Question

我正在为LPMLN语言编写一个编辑器，该编辑器目前在ACE编辑器中没有突出显示支持。我试图将脚本作为指南嵌入到index.html网站中，但无法使用本地相对路径在本地添加该脚本。因此，我只能通过添加脚本的URL来尝试CDN方式，这种方法有效。但是，然后我在突出显示javascript文件中定义了突出显示规则。因此，URL方式将不起作用，因为现有库中没有此类文件。然后，我尝试将代码发布到github上并复制CDN链接以加载我的脚本，但是它似乎无法正常工作。我已经在模式创建者链接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和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编辑器脚本并添加自定义突出显示规则脚本？

1 个答案: