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

Question

我正在尝试编写自己的CodeMirror模式,如此处所述.

我的目标是改变特定关键字的颜色.例如,任何"aaa"单词都需要为红色,任何"bbb"单词都需要为蓝色.任何其他单词都需要具有默认颜色.

这是我不成功的尝试(见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
});  

Answer 1

你有两个问题.

• CodeMirror前缀cm-为用于样式标记的类.CSS中的样式必须考虑到这一点.

• 在找到"aaa"或"bbb"之后你正在跳过剩余的线路,通过你对你的目标的描述听起来就像你不想那样做.

我已经修复了jsfiddle.您可能还希望仅匹配完整的单词(当前fooaaabar也已aaa突出显示).要做到这一点,首先让你的标记化器读取整个单词(stream.eatWhile(/\w/)),然后查看结果单词是否是您要查找的单词之一(stream.current() == "aaa").