如果嵌入需要正确的大括号嵌套，如何在 Ace 编辑器中进行嵌入突出显示？答案

【问题标题】：How to do embedded highlightings in Ace editor if embedding requires proper brace nesting?如果嵌入需要正确的大括号嵌套，如何在 Ace 编辑器中进行嵌入突出显示？
【发布时间】：2014-07-10 10:39:33
【问题描述】：

考虑以下 Razor 代码：

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

显然，只有考虑到所有括号，才能正确识别 Razor 块。
如果我做天真的嵌入（基于 PHP 所做的）：

    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);

我从GetSomething() 得到第一个) 被识别为 Razor 块的右大括号，这是不正确的。

在 Ace 中正确的做法是什么？

【问题讨论】：

嗨，有关于 Ace 的 Razor 模式突出显示的任何来源吗？我想使用与 VS 中类似的语法编辑数据库中的视图，但找不到任何东西。你能帮帮我吗？
@ppumkin 我搁置了它，但这里正在进行中：gist.github.com/ashmind/70eee840893a209719be。它只有 @X、@{…}、@(…)，没有 @if、<text> 等。请注意，您可能需要 Ace 源来构建它。
@ppumkin 好的，刚刚将我在 Ace 中的工作上传到 github.com/ashmind/ace/tree/razor-wip-shelf — 获取并构建它（包括 node Makefile.dryice.js full）。构建打开 mode_creator 后（从本地服务器），选择模式 Razor，文档 Razor，主题 chrome_razor。这应该可行，因此您只需要弄清楚它为什么这样做以及它在您的项目中工作需要什么。抱歉，我要睡觉了，所以我现在帮不上忙）
@ppumkin 请注意，默认 CSS 没有针对 razor 节点的黄色规则，这就是我使用 chrome_razor 的原因。但是规则很简单，也可以在外面添加。
好的。我第一次安装了 Node.Js，做了完整的编译，barra bing，barra boom，复制到我的 MVC 项目，包括主题和It works! 那真是太棒了。非常感谢！！！！！！！

标签： ace-editor

【解决方案1】：

您需要为每个( 添加一个状态到堆栈，并为) 移除一个状态

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";
    }
}]

另见Add Javascript into Custom Language - ACE Editor

【讨论】：

啊，所以你基本上同时匹配 '(' 和 ')' 作为结束规则，这样你就可以计算它们了。这很酷，而且我没有考虑过。谢谢！