ant vue 使用 vue-codemirror代码高亮问题

聂风9527

已于 2022-10-11 13:55:59 修改

阅读量919

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-24 16:09:00 首次发布

本文链接：https://blog.csdn.net/qq_55634475/article/details/126506668

版权

本文档描述了在Vue项目中使用vue-codemirror和codemirror编辑器时遇到的代码无法高亮显示的问题。通过引入相应的语言模式js文件和调整cmOptions配置，如添加`gutters`和`highlightSelectionMatches`选项，可以实现代码高亮功能。同时，提供了完整的代码示例以供参考。

摘要由CSDN通过智能技术生成

版本信息：

vue版本：2.x

vue-codemirror版本：4.x

codemirror版本：5.x

问题描述

codemirror编辑器内的代码不能高亮

代码示例：


<template>
    <div id="glueInfo">
        <codemirror style="height:100%" v-model="codeSnippets" :options="cmOptions"/>
    </div>
</template>
<script>
import {codemirror} from 'vue-codemirror';
import 'codemirror/lib/codemirror.css'; // 核心样式
import 'codemirror/mode/htmlmixed/htmlmixed.js';
export default {
    name: 'glueInfo',
    components: {codemirror},
    computed: {},
    data() {
        return {
            codeSnippets: '<div>code</div>',
	        cmOptions: {
	            autorefresh: true,
		        mode: 'text/x-html',// 语言类型
		        theme: 'default',// 样式
		        lineNumbers: true,// 编辑器左侧是否显示行号
                line: true,
                showCursorWhenSelecting: true,// 选择内容的时候是否显示光标
		        firstLineNumber: 1,
		        viewportMargin: Infinity, // 处理高度自适应时搭配使用
		        autofocus: false,
		        indentUnit: 4,// 编辑器中缩进的大小
		        smartIndent: true,// 是否使用mode提供的上下文的缩进
		        readOnly: false, // 只读
                styleActiveLine:true,
                matchBrackets: true,// 括号匹配
                autoCloseBrackets:true, //自动补全括号
	        },
        }
    },
}
</script>

解决办法：在 cmOptions 中加入如下配置，并把对应代码的高亮 js引入进去

gutters: ["CodeMirror-lint-markers","CodeMirror-linenumbers","CodeMirror-foldgutter"],
highlightSelectionMatches: {
   minChars: 2,
   style: "matchhighlight",
   showToken: true
},