如何为语法高亮定义和加载自定义 ace 模式答案

【问题标题】：How to define and load custom ace mode for syntax highlighting如何为语法高亮定义和加载自定义 ace 模式
【发布时间】：2020-06-28 11:56:45
【问题描述】：

我正在尝试在 Ace 中制作我自己的语法高亮显示。到目前为止，我这样做了：

克隆 ace repo git clone https://github.com/ajaxorg/ace.git
使用Iro 设计一些语法。后来我将 Iro 生成的代码粘贴到 mode creator 中，它似乎工作得很好。
我复制了Iro生成的代码，放到ace/lib/ace/mode/mealy.js
在ace目录中运行npm install
在ace 目录中运行node ./Makefile.dryice.js。我成功看到ace/build/src/mode-mealy.js。
我创建了这个嵌入代码

    <!doctype html>
    <html lang="en-us">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>SyntaxHighlighter</title>
        <style type="text/css" media="screen">
        #editor { 
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        </style>
      </head>
      <body>
        <div id="editor"></div>
        <script type="text/javascript" src="../ace/build/src/ace.js"></script>
        <script>
            var editor = ace.edit("editor");
            editor.setTheme("ace/theme/monokai");
            
            editor.session.setMode("ace/mode/mealy");
        </script>
      </body>
    </html>

不幸的是，语法突出显示根本不起作用，但如果我使用editor.session.setMode("ace/mode/javascript")，那么一切正常。我什至将我的语言添加到lib/ace/ext/modelist.js。

【问题讨论】：

标签： javascript syntax syntax-highlighting ace-editor

【解决方案1】：

这种方法有几个问题，但非常接近。最好遵循本指南以获得完整而详细的说明 https://aleksander-mendoza.github.io/syntax_highlighter.html

【讨论】：