Question

我正在尝试按照文档here编写自己的CodeMirror模式。

我的目标是更改特定关键字的颜色。例如，任何＆＃34; aaa＆＃34;这个词必须是红色的，任何＆＃34; bbb＆＃34;这个词必须是蓝色的。任何其他单词都需要具有默认颜色。

这是我的失败尝试（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
});

Answer 1

你有两个问题。

CodeMirror将cm-作为用于样式标记的类的前缀。 CSS中的样式必须考虑到这一点。
在找到＆＃34; aaa＆＃34;之后，您正在跳过其余部分。或者＆＃34; bbb＆＃34;，通过你对你的目标的描述听起来你并不想这样做。

我已在the jsfiddle修复了这两项问题。您可能还希望仅匹配完整的字词（当前fooaaabar也突出显示aaa）。要做到这一点，首先让您的标记生成器读取整个单词（stream.eatWhile(/\w/)），然后查看结果单词是否是您要查找的单词之一（stream.current() == "aaa"）。

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

1 个答案: