前端使用 vue-codemirror 显示代码高亮

前端使用 vue-codemirror 显示代码高亮

最近有一个这样的需求，我们需要在面板上显示需要设置的代码， 要求代码高亮。

这里我用到了vue-codemirror 这个插件

首先安装它

npm install vue-codemirror --save

然后在main.js中使用

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(codemirror)

在自己需要使用到的页面引入

import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/material.css'  // 引入控制主题，没有的话主题不起效果
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')

声明一下组件

components: { codemirror },

templete中使用组件

<codemirror
    v-model="content"  
    :options="cmOptions"   
    @changes="changes"  
>
</codemirror>

data里面使用

data() {
	return {
		content: '',
		cmOptions: { // 配置项
			tabSize: 4, // 制表符的宽度
            mode: 'python', // 使用的模式
            theme: 'material', // 主题黑色
            // theme: 'darcula', // 主题白色
            lineNumbers: true, // 是否显示行号
            lineWrapping: true, // 是否应滚动或换行以显示长行
            extraKeys: { 'Ctrl': 'autocomplete' },
            lineWiseCopyCut: true, // 在没有选择的情况下进行复制或剪切将复制或剪切有光标的整行。
            showCursorWhenSelecting: true, // 选择处于活动状态时是否应绘制光标
            maxHighlightLength: Infinity, // 显示长行的时候 这个值是不限制，如果要做限制的话，值是number类型
            matchBrackets: true, // 光标匹配括号
            line: true,
            readOnly: true, // 只读
		}
	}
}

最终效果

这个效果最终还是不怎么满意，这里的高度限制，字体不够好看，这些我都没有找到修改的地方，如果你们找到有的，可以在评论留言告诉我，不胜感激。

查看配置地址

更新 控制行间距和自动符合代码高度

<div id="discode">
   <codemirror  
        v-model="firstform.script_content"  
        :options="cmOptions"   
        @changes="changes" 
    >
    </codemirror>
</div>

<style lang="scss"> // 这里不能加 scoped 不然就没有效果了
#discode {
    overflow-y: scroll !important;
    font-size : 13px; // 下面两行是控制行间距的
    line-height : 150%;
    .CodeMirror {
        overflow-y: scroll !important; // 这里控制高度自适应
        height: auto !important;
        .CodeMirror-scroll {
            min-height: 300px;  // 设置最小高度
        }
    }
}
</style>