这周前端vue项目有一小需求,需要实现在文本框中输入不同编程语言代码块并且让关键词高亮显示。
经过调研决定使用vue-codemirror和codemirror;
原因如下:
- vue-codemirror是基于codemirror,适用于 Vue 的 Web 代码编辑器;
- 但是导入vue-codemirror后并没有发现codemirror的核心css以及使用的语言语法定义文件,如下图;
实现过程如下:
1.导入插件
//导入codemirror 插件 npm install codemirror --save//导入vue-codemirror 插件 npm install vue-codemirror --save
2.全局挂载
3.在需要使用该插件的组件中挂载


1 <template> 2 <codemirror