Need Help For a New Language


We designed a new high level programming language in Arabic, for kids, it’s used in some schools in the middle east. We decide to use CodeMirror v6, We need some help please to do this.

Our language syntax it’s like Lua, or VB, we need just a basic keywords highlighting, and Autocomplete, with RTL support, and we know CodeMirror v6 can do this.

Thank you.

That what I tried so far:

< body >
< div id=“editor”></ div>
< script defer="" src=“codemirror.js”></ script>
< script defer="" src=“index.js”></ script>
< /body >


(function () {

  'use strict';

  // @omit

  // This file was generated by lezer-generator. You probably shouldn't edit it.

  const {Parser} = CM["lezer"];

  const {NodeProp} = CM["lezer"];

  const parser = Parser.deserialize({

    version: 13,

    states: "!WQYQPOOOhQPO'#CdOOQO'#Ci'#CiOOQO'#Ce'#CeQYQPOOOOQO,59O,59OOyQPO,59OOOQO-E6c-E6cOOQO1G.j1G.j",



    nodeNames: "⚠ LineComment Program Identifier String Boolean ) ( Application",

    maxTerm: 13,

    nodeProps: [

      [NodeProp.openedBy, 6,"("],

      [NodeProp.closedBy, 7,")"]


    skippedNodes: [0,1],

    repeatNodeCount: 1,

    tokenData: "$W~R^XY}YZ}]^}pq}rs!`st!}xy#]yz#b}!O#g!Q![#g!]!^#{!c!}#g#R#S#g#T#o#g~!SS[~XY}YZ}]^}pq}~!cTOr!`rs!rs#O!`#O#P!w#P~!`~!wOS~~!zPO~!`~#QQ#Y#Z#W#h#i#W~#]OT~~#bOV~~#gOU~~#lTR~}!O#g!Q![#g!c!}#g#R#S#g#T#o#g~$QQP~OY#{Z~#{",

    tokenizers: [0],

    topRules: {"Program":[0,2]},

    tokenPrec: 0


  // @omit

  const {foldNodeProp, foldInside, indentNodeProp} = CM["@codemirror/language"];

  const {styleTags, tags: t} = CM["@codemirror/highlight"];

  let parserWithMetadata = parser.configure({

    props: [


        Identifier: t.variableName,

        Boolean: t.bool,

        String: t.string,

        LineComment: t.lineComment,

        "( )": t.paren



        Application: context => context.column(context.node.from) + context.unit



        Application: foldInside





  const {LezerLanguage} = CM["@codemirror/language"];

  const {javascript} = CM["@codemirror/lang-javascript"];

  const exampleLanguage = LezerLanguage.define({

    parser: parserWithMetadata,

    languageData: {

      commentTokens: {line: ";"}




  const {completeFromList} = CM["@codemirror/autocomplete"];

  const exampleCompletion ={

    autocomplete: completeFromList([

      {label: "var", type: "keyword"},

      {label: "fun", type: "function"}




  const {LanguageSupport} = CM["@codemirror/language"];

  function example() {

    return new LanguageSupport(exampleLanguage, [exampleCompletion])


  const {EditorState, EditorView, basicSetup} = CM["@codemirror/basic-setup"];

  let state = EditorState.create({

    doc: 'var \nfunc ()',

    extensions: [basicSetup, example(), javascript()]


  new EditorView({state, parent: document.querySelector("#editor")});


The keywords seem not colored.

You don’t have a keyword node type in your grammar (at least, it’s not named, since it doesn’t show up in nodeName) and there’s no keyword entry in your styleTags call, so I guess that would explain why keywords aren’t being colored.

Thank you @marijn for your response, can you give me an example of how to add nodeName, and styleTags call please ?

No, you’re going to have to learn the system a bit in order to be able to use it. You didn’t post your grammar, only the compiled parse tables, so I have no idea what that even looks like.

I see, Yeah no worries, I will continue my research, However this is an example of our syntax (English):

function integer foo(integer a, integer b)
   return a + b
end function

function main
   integer x = foo(4, 6)
   print ("Result is: " + x )
end function

The syntax is very easy, we did this to help kids learn programming in a easy and fun way.
Keywords here it’s like {"function", "integer", "end", "return"}

I’m wondering if I can use language-lua to handle this?

Can we use Codemirror v6 or it’s not ready yet?

It’s being used successfully by a number of people, so it should be ready.

@marijn Thank you, I will give it a try and let you know.