vue显示代码块vue-codemirror组件的使用

干货食堂 2023-03-22

2661

先说下需求，就是我想让前端显示一下代码块，好看一点，最好针对不同的java格式有对应的语法高亮，说真的，要是不用组件，纯原生写，基本上完成不了，太难了，所以还是得用插件来实现。因为我能想到的只有通过 <pre>标签来实现，下面就来介绍一下插件的使用方法。

1、安装

npm install vue-codemirror --save

2、main引入

import VueCodeMirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
Vue.use(VueCodeMirror);

3、当前组件页面引入

import { codemirror } from 'vue-codemirror';
import 'codemirror/theme/liquibyte.css';//导入选中的theme主题,与初始化theme配置一致
import 'codemirror/addon/hint/show-hint.css';//导入自动提示核心样式


import 'codemirror/mode/sql/sql.js';//导入使用的语言语法定义文件，初始化mode配置一致
import 'codemirror/addon/edit/matchbrackets.js';
import 'codemirror/addon/hint/show-hint.js';//导入自动提示核心文件
import 'codemirror/addon/hint/sql-hint.js';//导入指定语言的提示文件

4、声明组件

components:{ 
  codemirror
},

5、使用组件

<codemirror
    ref="mycode"   
    v-model="curCode"       
    :options="cmOptions"  
    class="code">        
</codemirror>

6、data中cmOptions的配置

curCode:'',
cmOptions:{
     value:'',//编辑器的起始值。可以是字符串，也可以是文档对象。
     mode:"text/x-hive",//第一个将模式名称映射到它们的构造函数，第二个将MIME类型映射到模式规范。
     theme: "liquibyte",//编辑器样式的主题       
     indentWithTabs: true,//在缩进时，是否tabSize 应该用N个制表符替换前N *个空格。默认值为false。
     smartIndent: true,//是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为true。
     lineNumbers: true,//是否在编辑器左侧显示行号。
     matchBrackets : true,//括号匹配         
     autofocus: true,//可用于使CodeMirror将焦点集中在初始化上  
     extraKeys: {"Ctrl-Space": "autocomplete"},//按键配置 
     hintOptions: {tables: {          
        users: ["name", "score", "birthDate"],      
        countries: ["name", "population", "size"] 
     }}  
},