How to do embedded highlightings in Ace editor if embedding requires proper brace nesting?

问题

Consider the following Razor code:

    <div>@(Model.GetSomething())</div>

Obviously, the Razor block can only be properly identified if all parentheses are accounted for.
If I do naive embed (based on what PHP does):

    var RazorLangHighlightRules = function() {
        CSharpHighlightRules.call(this);
    };

    oop.inherits(RazorLangHighlightRules, CSharpHighlightRules);

    var RazorHighlightRules = function() {
        HtmlHighlightRules.call(this);

        var razorStartRules = [{
            token : "meta.block-marker.razor",
            regex : "@\\(",
            push  : "csharp-start"
        }];

        var endRules = [{
            token : "meta.block-marker.razor",
            regex : "\\)",
            next  : "pop"
        }];

        console.log(this.$rules);
        for (var key in this.$rules)
            this.$rules[key].unshift.apply(this.$rules[key], razorStartRules);

        this.embedRules(RazorLangHighlightRules, "csharp-", endRules, ["start"]);
        this.normalizeRules();
    };

    oop.inherits(RazorHighlightRules, HtmlHighlightRules);

I get the first ) from GetSomething() being recognized as the closing brace for Razor block, which is incorrect.

What is the right way to do that in Ace?

回答1:

You need to add a state to stack for every ( and remove for )

endRules = [{ 
    regex: "[()]",
    onMatch: function(val, state, stack) {
        this.next = "";
        console.log(stack, this.next, val);
        if (val == "(") {
            stack.unshift("csharp-start", state);
            return "paren";
        }
        // val == ")"
        stack.shift();
        this.next = stack.shift() || "start";
        return this.next == "csharp-start" ? "paren" : "meta.block-marker.razor";
    }
}]

see also Add Javascript into Custom Language - ACE Editor

来源：https://stackoverflow.com/questions/24674431/how-to-do-embedded-highlightings-in-ace-editor-if-embedding-requires-proper-brac

标签

ace-editor