CodeMirror 自定义模式 - 如何在关键字上应用样式？答案

【问题标题】：CodeMirror custom mode - how to apply styles on keywords?CodeMirror 自定义模式 - 如何在关键字上应用样式？
【发布时间】：2015-04-19 19:30:46
【问题描述】：

我正在尝试编写自己的 CodeMirror 模式，如 here 所述。

我的目标是更改特定关键字的颜色。例如，任何“aaa”字都需要是红色的，任何“bbb”字都需要是蓝色的。任何其他单词都需要具有默认颜色。

这是我失败的尝试 (see jsfiddle)。如何使这项工作？

HTML：

<textarea rows="4" cols="30" id="cm" name="cm">aaa bbb ccc</textarea>

CSS：

.style1 { color: red; }
.style2 { color: blue; }

Javascript：

CodeMirror.defineMode("mymode", function() {

  return {
    token: function(stream,state) {

        if (stream.match("aaa") ) {
            console.log("aaa found");
            while ((ch = stream.next()) != null)
                if (ch == " " && stream.next() == " ") break;
            return "style1";
        }
        else if (stream.match("bbb") ) {
            console.log("bbb found");
            while ((ch = stream.next()) != null)
                if (ch == " " && stream.next() == " ") break;   
            return "style2";
        }
     else
         return null;
    }
  };

});


var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
    mode: "mymode",
    lineNumbers: true
});

【问题讨论】：

标签： codemirror

【解决方案1】：

你有两个问题。

CodeMirror 前缀 cm- 到用于样式标记的类。您的 CSS 中的样式必须考虑到这一点。
您在找到“aaa”或“bbb”后跳过了其余的行，尽管您对目标的描述听起来您不想这样做。

我已经在the jsfiddle 中修复了这两个问题。您可能还想只匹配完整的单词（目前fooaaabar 也有aaa 突出显示）。为此，首先让您的分词器读取整个单词 (stream.eatWhile(/\w/))，然后查看生成的单词是否是您要查找的单词之一 (stream.current() == "aaa")。

【讨论】：