vue-codemirror代码不高亮显示的解决办法
近期在修改以前项目出现过的问题,使用vue-codemirror代码的颜色不会高亮显示,在网上查找了很多的资料,现在把解决方案记录一下。vue-codemirror是一个在线代码编辑器,显示效果如下所示:
那如何在项目中去使用vue-codemirror
1.下载对应的依赖
在项目中安装对应的依赖,引入相关文件
npm install vue-codemirror --save
2.在main.js中注册为全局组件,这样就可以全局使用这个组件
在本项目中,这个组件在多个地方都有被使用到,为了减少代码的冗余,在main.js中引入下载的依赖包,取名为codemirror,通过全局方法Vue.use()使用插件
import codemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(codemirror)
3.在页面中使用vue-codemirror
因为在main.js中注册了codemiror,直接在页面写入就行,不需要再额外导入vue-codemirror
<codemirror v-loading="loading"
ref="codeMirrorRef"
v-model="serviceObject"
:options="cmOption">
</codemirror>
4.导入相关样式
按照以上步骤大致内容已经配置好了,但是为了实现代码高亮还需要在页面上引入相关的样式
import "codemirror/theme/cobalt.css";
import "codemirror/addon/selection/active-line.js";
import 'codemirror/addon/display/autorefresh';
import "codemirror/mode/javascript/javascript.js"
5.配置cmOption
为了使代码块能高亮,theme主题名必须和上文导入的/theme/cobalt.css"名字一致,同理mode的名字也要和导入的样子名字一致,本文导入javascript是因为项目需要,大家可根据自己的项目导入合适的主题
export default {
data() {
return {
isdisabled: true,
loading: false,
cmOption: {
autoRefresh: true, // 重点是这句,为true
value: '', // 初始内容
mode: 'javascript', //实现Java代码高亮
tabSize: 4, // tab的空格宽度
styleActiveLine: true, // 设置光标所在行高亮true/false
lineNumbers: true, //显示行号
theme: "cobalt", //设置主题cobalt/monokai
// json: true,
readOnly: true, // 设置为只读true/false;也可设置为"nocursor"失去焦点
// lineWrapping: true
},