添加到 HTML 模式中使用“push”而不是“next”的自定义规则不起作用

Question

我想自定义 HTML 模式，以便我可以用它编辑 LIT-html 模板字符串。我确实向

start

添加了一条与

${

匹配的规则，将状态切换为

js-start

。当我将

next: 'js-start'

添加到规则中时，这会起作用。但是，由于 JavaScript 代码可以包含嵌套的 HTML（包含在

lit.html`...` 

中），我必须使用

push

而不是

next

，但该规则似乎不再起作用。

作为后续，由于

${

可能出现在任何地方，我想我必须将我的新规则复制到为 HTML 定义的任何状态，对吗？ （即

this.$highlightRules.$rules

上不以

js-

或

css-

开头的所有状态）。

代码片段：

const editor   = ace.edit(wrap);
const HtmlMode = ace.require("ace/mode/html").Mode;

const CustomMode = function() {
    HtmlMode.call(this);
    
    const HtmlHighlightRules = ace.require("ace/mode/html_highlight_rules").HtmlHighlightRules;
    this.$highlightRules     = new HtmlHighlightRules();
    
    this.$highlightRules.$rules.start.unshift({
        token: "punctuation.definition.tag",
        regex: /\${/,
        
        // works
        next: 'js-start',
        
        // does not work
        //push: 'js-start',
    });
};

CustomMode.prototype = Object.create(HtmlMode.prototype);
CustomMode.prototype.constructor = CustomMode;
CustomMode.prototype.$id = "ace/mode/lit-html";

editor.getSession().setMode(new CustomMode());

正如预期的那样，类似

<p class="something">${Math.random()}</p>

的内容已正确突出显示。但是，一旦我使用

push

而不是

next

，

Math.random()

就会 not 突出显示，即 ACE 不会切换到

js-start

。

Answer 1

你会想打电话

this.$highlightRules.normalizeRules()

添加规则

push

/

pop

- 这些是速记，用于提供操作状态“堆栈”的函数。