如何用条件为codemirror中的单词着色?

时间:2016-11-14 10:36:56

标签: javascript css codemirror

我在codemirror上构建自己的语言,我有数组包含我的类的名称,我也有临时数组(当我输入类的名称然后我在temp数组中加载了这个类的字段)

例如,如果我有两个类:

头等舱的名称是数据,它的字段是:

fnamelnameage

第二类的名称是信息,其字段为:

motherfather

当我输入codemirror 数据时,临时数组包含(fnamelnamedata) 当我输入codemirror info 时,临时数组包含(motherfather

我想要什么

仅在特定颜色的字段出现在自己的类名称之后(即当我在codemirror Data.fname上键入时,我想为蓝色的单词 fname 着色但是当我输入codemirror info.fname时,我不想用蓝色为 fname 添加颜色,因为( fname 不包含在类" info&#中34))

我尝试了什么

CodeMirror.defineMode("mymode", function() {    
    return {
        token: function(stream,state) {
            for (var i = 0; i <ClassName.length ; i++) {
                if (stream.match(ClassName[i]) ) {
                    return "style1";
                }                   
            }
            for (var i = 0; i <temp.length ; i++) {
                if (stream.match(temp[i]) ) {
                    return "style2";
                }                   
            }                   
    };        
});

我的尝试中的问题

当我在codemirror上键入类的名称时,

数组 temp 的包含会发生变化...所以会发生什么: 当我输入codemirror Data.fname然后单词 fname 颜色为蓝色但是如果我输入codemirror Data.fname info.mother(在我键入info.mother之前,单词 fname 蓝色,因为它包含在临时数组(fnamelnamedata)中,但输入 info.mother 后包含temp数组更改为(motherfather))因此 fname 的颜色变为黑色

**此图片显示执行**

here the word "fname" color in blue

here the color of word "fname" change and became black

我知道我的问题,因为数组临时包含的内容正在发生变化......但我无法找到解决问题的方法......所以有任何帮助吗?

1 个答案:

答案 0 :(得分:0)

请查看codemirror源代码中提供的各种语言modes(如python,javascript)等。您需要了解令牌化,这是任何语言模式实现的基础。另请查看codemirror的themes,以便您的实现可以支持您的语言的多个主题。