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

Question

使用 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 这样的可视化:

Answer 1

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