如何创建语法高亮规则

Question

我正在试用 monaco 编辑器，但我很难理解如何创建我自己的语法突出显示规则。（如果您有解释如何创建规则的资源，我将不胜感激）

我从简单的东西开始：

我想在声明时为我的变量添加一种特殊颜色。即：a = 12，在 a
为内置函数添加特殊颜色。即：builtin(a, b)，在 builtin

我正在使用 https://microsoft.github.io/monaco-editor/monarch.html 实时尝试规则这是我的语法定义

// Create your own language definition here
// You can safely look at other samples without losing modifications.
// Modifications are not saved on browser refresh/close though -- copy often!
return {
  defaultToken: '',
    tokenPostfix: '.ds',

    keywords: [
        'do', 'then', 'end', 'function', 'if', 'else', 'return', 'continue', 'break', 'for',
    'while', 'to', 'until', 'in', 'static', 'step', 'delete', 'true', 'false'
    ],

  builtins: [
    'print', 'builtin'
  ],

    operators: [
        '=', '>', '<', '!', '?', ':', '==', '<=', '>=', '!=',
    '&&', '||', '++', '--', '**', '+', '-', '*', '/', '%',
    '<<', '>>', '+=', '-=', '*=', '/=', '%=',
    ],

    // we include these common regular expressions
    symbols: /[=><!~?:&|+\-*\/\^%]+/,
    escapes: /\(?:[abfnrtv\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,

    // The main tokenizer for our languages
    tokenizer: {
        root: [
            // My attempt for variable syntax colorization
      ["^[a-zA-Z_]+(?=\s*=)", 'variable.name' ],
      // identifiers and keywords
            [
                /[a-zA-Z_]\w*/,
                {
                    cases: {
                        '@keywords': { token: 'keyword.[=10=]' },
            // My attempt for builtins syntax colorizatio
            '@builtins': 'predefined',
                        '@default': 'identifier'
                    }
                }
            ],
            // whitespace
            { include: '@whitespace' },
            // delimiters and operators
            [/[{}()\[\]]/, '@brackets'],
            [
                /@symbols/,
                {
                    cases: {
                        '@operators': 'delimiter',
                        '@default': ''
                    }
                }
            ],

            // numbers
            [/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],
            [/0[xX][0-9a-fA-F_]*[0-9a-fA-F]/, 'number.hex'],
            [/\d+?/, 'number'],

            // delimiter: after number because of .\d floats
            [/[;,.]/, 'delimiter'],

            // strings: recover on non-terminated strings
            [/"([^"\]|\.)*$/, 'string.invalid'], // non-teminated string
            [/'([^'\]|\.)*$/, 'string.invalid'], // non-teminated string
            [/"/, 'string', '@string."'],
            [/'/, 'string', "@string.'"]
        ],
    },
}

Answer 1

如果我理解正确的话，那么你不能用语法荧光笔做你想做的事。你要的是语义高亮

语法是关于语言的结构。它决定什么是标识符，什么是数字，什么是字符串等

语义赋予事物意义，例如哪个标识符是一个变量，它是class名称或其他类型等

Monarch 是一种声明式分词器，一种将分词值分配给文本特定部分的工具。如何查找文本的哪一部分获得在 tokenizer 字段中声明的哪个标记值。

但是你无法从句法规则中找到语义。相反，您必须解析输入并从解析 tree/syntax 树中决定符号在输入中扮演的角色。

如何创建语法高亮规则

How to create syntax highlighting rule

monaco-editor