如何在 Ace 代码编辑器中运行时添加新的高亮规则？

Question

我正在尝试向编辑器设置的任何模式中注入自定义关键字。我已经尝试了以下方法：

rules = editor.session.getMode().$highlightRules
startRules = rules.$rules.start

startRules.push({
  regex: "\\w+"
  onMatch: rules.createKeywordMapper({customToken: "one|two"})
})

rules.addRules({start: startRules})

editor.session.bgTokenizer.start(0)

我想要实现的是能够输入单词“two”，并将其包装在自定义令牌中。

- Jason M

Answer 1

我晚了几年，但最近我找到了一个解决方案，可能会对您和其他人有所帮助。请查看我在他们的Github存储库上开放的问题（Ace Editor Repo）。使用此解决方案，您可以像我一样在运行时定义自己的令牌。在我的示例中，我创建了一个名为“my_token”的令牌。编辑器将使用与您的令牌名称匹配的类名包装它，前缀为“ace_”。因此，类似于“ace_my_token”。

请注意，我的解决方案的一部分要求我使用最高优先级突出显示我的新规则，因为即使在字符串内部，我也需要以不同的方式进行突出显示，这就是为什么我将其放在规则集中的第一位的原因。根据您希望如何突出显示它，您可能需要调整插入规则的位置。

this.editor = ace.edit(this.editorId);
var session = this.editor.session;
this.language = this.language || 'text';
session.setMode('ace/mode/' + this.language, function() {
    var rules = session.$mode.$highlightRules.getRules();
    for (var stateName in rules) {
        if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
            rules[stateName].unshift({
                token: 'my_token',
                regex: 'two'
            });
        }
    }
    // force recreation of tokenizer
    session.$mode.$tokenizer = null;
    session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
    // force re-highlight whole document
    session.bgTokenizer.start(0);
});

这是一个演示：https://jsbin.com/yogeqewehu/edit?html,css,console,output

- Jacob