一、安装

官网地址：https://codemirror.net/

npm 插件地址：https://www.npmjs.com/package/vue-codemirror

vue 项目中安装，

npm install vue-codemirror --save

可在 package.json 文件中看到，当前是 4.0.6 版

二、使用

1、引入

这里是局部引入，vue 文件中引入

主题 dracula 是目前我觉得还比较好看的样式，可在路径 node_modules\codemirror\mode 下换其它样式；

mode 是 vue 类型，就不用单独设置 JavaScript、CSS 和 html；

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
</script>

2、options

cmOptions: {
    tabSize: 4,// tab的空格个数
    theme: 'dracula',//主题样式
    lineNumbers: true,//是否显示行数
    lineWrapping: true, //是否自动换行
    styleActiveLine: true,//line选择是是否加亮
    matchBrackets: true,//括号匹配
    mode: "vue", //实现javascript代码高亮
    readOnly: false//只读
}

3、完成代码 

<template>
    <codemirror class="code" v-model="code" :options="cmOptions"></codemirror>
</template>

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true

export default {
    components: {
        codemirror
    },
    data() {
        return {
            // 代码
            code: codes,
            cmOptions: {
                tabSize: 4,// tab的空格个数
                theme: 'dracula',//主题样式
                lineNumbers: true,//是否显示行数
                lineWrapping: true, //是否自动换行
                styleActiveLine: true,//line选择是是否加亮
                matchBrackets: true,//括号匹配
                mode: "vue", //实现javascript代码高亮
                readOnly: false//只读
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.code {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
}
</style>
<style lang="stylus">
.CodeMirror {
    height: 100%;
}
</style>

三、效果