如何在 CodeMirror 3 中设置嵌套代码块的样式答案

【问题标题】：How to style nested code blocks in CodeMirror 3如何在 CodeMirror 3 中设置嵌套代码块的样式
【发布时间】：2013-10-16 13:59:00
【问题描述】：

使用 CodeMirror 3.18 我希望能够将用户代码块的范围深度可视化为涉及关键字、原子等的常规样式的覆盖。

所以在下面的例子中，我已经注释了我想要的额外的类名层：

if (happy) { // mark overlay depth 2 from here
    if (knowIt) { // mark overlay depth 3 from here
        clapYourHands(); // still 3 here
    } // back at depth 2
} // back at 1

我是否需要为此编写自己的词法分析器，或者是否可以扩展现有的 (javascript) 提示脚本？

最好我希望这些类在每一行上加倍。我的目标（可能你有兴趣）是尝试看看我是否可以实现像 Scratch 这样的可视化：

【问题讨论】：

标签： javascript css lexer codemirror

【解决方案1】：

您必须编写自己的模式，但将其编写为 JavaScript 模式的包装器可能是可行的——让其进行标记化和基本样式设置，您的包装器会根据上下文添加额外的样式（它可以计算大括号，或者只是检查 JavaScript 模式状态下的上下文）。

【讨论】：