vue-codemirror代码不高亮显示的解决办法

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
        },

6.最终效果如下所示

如果想要配置不同的主题，可以去官网参考示例使用

vue-codemirror官网: https://www.npmjs.com/package/vue-codemirror