如何正确加载ACE编辑器脚本和添加自定义高亮规则脚本？

Question

我正在为 LPMLN 语言制作一个编辑器，该语言目前在 ACE 编辑器中不支持高亮显示。我试图将脚本作为指南嵌入到我的 index.html 站点中，但我无法使用本地相对路径在本地添加它。所以我只能通过添加脚本的 URL 来尝试 CDN 方式，这是可行的。但是，然后我在突出显示 javascript 文件中定义了突出显示规则。所以 URL 方法将不起作用，因为现有库没有这样的文件。然后我尝试post github 上的代码并复制CDN link 来加载我的脚本，但它似乎无法工作。我已经在 mode creator link: https://ace.c9.io/tool/mode_creator.html 中测试了我的突出显示文件，它提供了正确的突出显示。

这是我的 html 代码（来自正文）：

<body>

<div id="editor">%example:
1:go_out(today,a):-not rain(today),free(a,today).
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript"></script>
<script src="https://raw.githack.com/BobHuNanjing/myeditor/master/ace/mode/mode-lpmln" type="text/javascript" charset="utf-8"></script>


<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/lpmln");
</script>
<app-root></app-root>
</body>
</html>

这是我的突出显示 js 文件：

define('ace/mode/lpmln',function(require, exports, module) {
    "use strict";
    var oop = require("../lib/oop");
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
    /* --------------------- START ----------------------------- */
    var LpmlnHighlightRules = function() {
    this.$rules = {
    "start" : [
    {
        "token" : "keyword.other.define",
        "regex" : "(\:-)"
    },
    {
        "token" : "keyword.operator.naf",
        "regex" : "((not))"
    },
    {
        "token" : "keyword.operator.neg",
        "regex" : "([\-])"
    },
    {
        "token" : "markup.underline.weight",
        "regex" : "(\d+:)"
    },
    {
        "token" : "string.regexp",
        "regex" : "(^\w+(\.*\d{0,2})([+*/-]\w+(\.*\d{0,2}))+)"
    },
    {
        "token" : "comment.line.percentage",
        "regex" : "(\%.*)"
    },
    {
        "token" : "support.varaiable",
        "regex" : "([\(\)])"
    },
    {
        "token" : "variable.parameter",
        "regex" : "(?<=\().*?(?=\,)|(?<=\,).*?(?=\))"
    },
    {
        defaultToken : "text",
    }
    ]
    };
    this.normalizeRules();
    };
    /* ------------------------ END ------------------------------ */
    oop.inherits(LpmlnHighlightRules, TextHighlightRules);
    exports.LpmlnHighlightRules = LpmlnHighlightRules;
    });

如我所见，主题已正确加载，该主题必须存在于cloudflare CDN 的路径下。但是我的脚本没有加载。我也试过 ace.config.setModuleUrl('ace/mode/lpmln',"https://raw.githack.com/BobHuNanjing/myeditor/master/ace/mode/mode-lpmln.js")，控制台没有显示任何错误，但没有突出显示。

那么我应该如何正确导入 ace.js 以及如何正确添加新的突出显示 js 文件并使其工作？

Answer 1

要为 Ace 定义语法，您需要突出显示规则和控制折叠自动缩进等的模式，请参阅 https://github.com/ajaxorg/ace-builds/blob/0d62c26de7b2e1922d8dd95ba587c9845c018c51/src/mode-json.js#L257 and https://ace.c9.io/#nav=higlighter

这是一个片段，它通过添加模式定义来修改您的示例以使其工作

define('ace/mode/lpmln',function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;


// to define highlighting we need mode and highlight rules
// normally highlight rules are defined in a separate file, 
// but since this is used only in one place, this function is directly in the mode
var LpmlnHighlightRules = function() {
    this.$rules = {
    "start" : [
    {
        "token" : "keyword.other.define",
        "regex" : "(\:-)"
    },
    {
        "token" : "keyword.operator.naf",
        "regex" : "((not))"
    },
    {
        "token" : "keyword.operator.neg",
        "regex" : "([\-])"
    },
    {
        "token" : "markup.underline.weight",
        "regex" : "(\d+:)"
    },
    {
        "token" : "string.regexp",
        "regex" : "(^\w+(\.*\d{0,2})([+*/-]\w+(\.*\d{0,2}))+)"
    },
    {
        "token" : "comment.line.percentage",
        "regex" : "(\%.*)"
    },
    {
        "token" : "support.varaiable",
        "regex" : "([\(\)])"
    },
    {
        "token" : "variable.parameter",
        "regex" : "(?<=\().*?(?=\,)|(?<=\,).*?(?=\))"
    },
    {
        defaultToken : "text",
    }
    ]
    };
    this.normalizeRules();
    };
/* ------------------------ END ------------------------------ */
oop.inherits(LpmlnHighlightRules, TextHighlightRules);
exports.LpmlnHighlightRules = LpmlnHighlightRules;

var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var CstyleBehaviour = require("./behaviour/cstyle").CstyleBehaviour;
var CStyleFoldMode = require("./folding/cstyle").FoldMode;

var Mode = function() {
    this.HighlightRules = LpmlnHighlightRules;
    this.$behaviour = new CstyleBehaviour();
    this.foldingRules = new CStyleFoldMode();
};
oop.inherits(Mode, TextMode);

(function() {
    this.$id = "ace/mode/lpmln";
}).call(Mode.prototype);

exports.Mode = Mode
});

// after the mode is defined initialize the editor
// this can be in another file, but this playground doesn't allow to create multiple files
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/lpmln");

#editor{ height: 100px }

<!--include ace-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript"></script>
<!--include one of modes if you use behavior or folding rules-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/mode-json.js" type="text/javascript"></script>

<div id="editor" >%example:
1:go_out(today,a):-not rain(today),free(a,today).
</div>

如何正确加载ACE编辑器脚本和添加自定义高亮规则脚本？

How to correctly load ACE editor script and add self-defined highlighting rule script?

html

javascript

ace-editor