vue-codemirror 自定义代码段高亮

最新推荐文章于 2025-04-21 16:18:37 发布

藤原拓海_别天神

最新推荐文章于 2025-04-21 16:18:37 发布

阅读量1.5k

点赞数 1

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_61604012/article/details/136459470

版权

本文介绍了如何使用CodeMirror编辑器插件在文本中实现自定义关键字的高亮，并允许用户设置不同关键字的颜色。通过JavaScript操作，实现在匹配到关键字时动态应用CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义关键字高亮，自定义关键字颜色

// rtwsCodeMirror 为你的编辑器实例

    //定义需要高亮的关键字keywords
    const keywords={
        'hello':'red',
        'world':'blue',
    };
    const reg = new RegExp("\\b("+Object.keys(keywords).join('|')+")\\b","g");
    //这一步清除之前的关键字标记，可要可不要
    rtwsCodeMirror.operation(function () {
        for (let mark of rtwsCodeMirror.getAllMarks()){
            mark.clear();
        }
    });
    //重要部分
    rtwsCodeMirror.operation(function () {
        let cursor = rtwsCodeMirror.getCursor();
        let doc = rtwsCodeMirror.getDoc();
        let text = rtwsCodeMirror.getValue();
        // 正则过滤
        let matches = text.match(reg);
        if(matches){
            matches.forEach((match)=>{
                let color = keywords[match];
                let index = text.indexOf(match,cursor,ch);
                while