CodeMirror 是一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库
1.第一步安装
npm install vue-codemirror --save
2.在main中引入
import VueCodemirror from 'vue-codemirror' Vue.use(VueCodemirror);
3.引入后在html界面中建立textarea标签,用于生成代码框
<textarea class="form-control" id="codes" name="code"></textarea>
4.根据textarea的id获取到标签元素,将容器转换为编辑器
this.editor = CodeMirror.fromTextArea(document.getElementById('codes'), { mode:"python",// 语言模式 theme:"leetcode",// 主题 keyMap:"sublime",// 快键键风格 lineNumbers:true,// 显示行号 smartIndent: true , //智能缩进 indentUnit: 4, // 智能缩进单位为4个空格长度 indentWithTabs:true, // 使用制表符进行智能缩进 lineWrapping:true,// // 在行槽中添加行号显示器、折叠器、语法检测器` gutters: ["CodeMirror-linenumbers","CodeMirror-foldgutter","CodeMirror-lint-markers"], foldGutter:true, // 启用行槽中的代码折叠 autofocus:true, / /自动聚焦 matchBrackets:true,// 匹配结束符号,比如"]、}" autoCloseBrackets: true , // 自动闭合符号 styleActiveLine:true, // 显示选中行的样式 });
5.初始化编译器时可设置属性:
value:初始内容 Mode:设置编译器编程语言关联内容,对应的mine值 Theme:编译器的主题,需要引入对应的包 tabSize:tab的空格宽度 lineNumbers:是否使用行号 smartIndent:自动缩进是否开启 indentUnit:缩进单位 keyMap:快捷键,default使用默认快捷键,除此之外包括emacs,sublime,vim快捷键,使用需引入工具
注释: