codeMirror自定义关键词颜色颜色

一、下载并引入vue-codemirror

1、下载

npm install vue-codemirror

2、引入

   <codemirror
        ref="editor"
        v-model="code"
    ></codemirror>

import { codemirror } from 'vue-codemirror';
import CodeMirror from "codemirror";

二、使用codeEditor.markText函数标记关键词

1、在code发生变化时标记

   @Watch("code", { immediate: true })
   private watchCopyValue(val: string) {
        this.markText();
    }
	

2、分析代码，标记需要的关键词

//存放标记过的数据 方便后面清除
private marks: { clear: () => void }[] = [];
private markText() {
        const keywords: string[] = ["abc", "你好啊", "const", "var"];
        const reg = new RegExp(keywords.join("|"), "g");
        this.marks.forEach(item => item.clear());
        this.marks = [];
        let index = 0;
        this.codeEditor?.eachLine(line => {
            Array.from(line.text.matchAll(reg)).forEach(item => {
                //this.codeEditor 为ready事件返回的编辑器实例 在另一篇文章中有获取方式
                const mark = this.codeEditor?.markText(
                    { line: index, ch: item.index },
                    { line: index, ch: item.index + item[0].length },
                    {
                        className: "custom-keyword",
                    }
                );
                mark && this.marks.push(mark);
            });
            index++;
        });
    }

3、css样式

 .cm-s-idea span.custom-keyword {
        color: navy;
        font-weight: 600;
    }

三、结果展示

四、这只是简单的配置标记，可能会有一些问题，欢迎指正；