如何使用 Ace 代码编辑器在运行时添加新的突出显示规则？

Posted 2023-05-07

【中文标题】如何使用 Ace 代码编辑器在运行时添加新的突出显示规则？

【英文标题】：How do I add new highlight rules at runtime with Ace Code Editor?

【发布时间】：2017-01-14 03:46:35

【问题描述】：

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

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)

我想要完成的是能够写出“二”这个词并将其包裹在自定义令牌周围

【参考方案1】：

我晚了几年，但我最近找到了一个可能对您和其他人有所帮助的解决方案。查看我在他们的 Github 存储库 (Ace Editor Repo) 上打开的这个问题。使用此解决方案，您可以像我在运行时一样定义自己的令牌。在我的示例中，我制作了一个名为“my_token”的令牌。编辑器会将其包装在一个类名中的 div 中，该类名与您的令牌名称相匹配，前缀为“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