VUE中使用codemirror高亮显示代码

本文主要是介绍VUE中使用codemirror高亮显示代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：

      项目中要实现在线浏览代码功能，选择使用codemirror，这里使用了一个别人封装ue-codemirror插件

1.安装

npm install vue-codemirror --save

2.在组件中引用

<codemirror :value="fileContent" :options="cmOptions"></codemirror>

//引入vue-codemirror
import { codemirror } from 'vue-codemirror';
//codeMirror核心样式
import 'codemirror/lib/codemirror.css';
//不同语言对应的不同高亮js，vue中使用无法直接加载，只好在组件中再次引入，想要设置哪些高亮就添加对应mode的js文件
require("codemirror/mode/clike/clike.js")
require("codemirror/mode/javascript/javascript.js")
require("codemirror/mode/xml/xml.js")
require("codemirror/mode/vue/vue.js")
require("codemirror/mode/python/python.js")
require("codemirror/mode/css/css.js")
require("codemirror/mode/sql/sql.js")
require("codemirror/mode/shell/shell.js")

data() {return {//要显示的代码，这里是从后台查询获得，目前初始化就先写空字符串了fileContent: '',cmOptions: {lineNumbers: true,matchBrackets: true,readOnly:true,//mode参数控制那种语言高亮，默认写的Java，mode具体怎么写，可以查看codemirror官网mode: 'text/x-java',tabSize: 4,line: true}};},

3.查询数据，根据文件后缀名设置mode的值，设置了主要几个语言，可以根据自己情况进行设置

//处理莫得值，根据文件名后缀
if (this.$utils.endWith(filePath, '.xml') || this.$utils.endWith(filePath, '.XML') || this.$utils.endWith(filePath, '.html')) {this.cmOptions.mode = 'text/html';
} else if (this.$utils.endWith(filePath, '.js') || this.$utils.endWith(filePath, '.JS')) {this.cmOptions.mode = 'text/javascript';
} else if (this.$utils.endWith(filePath, '.vue') || this.$utils.endWith(filePath, '.VUE')) {this.cmOptions.mode = 'text/x-vue';
} else if (this.$utils.endWith(filePath, '.css') || this.$utils.endWith(filePath, '.CSS')) {this.cmOptions.mode = 'text/css';
} else if (this.$utils.endWith(filePath, '.py') || this.$utils.endWith(filePath, '.PY')) {this.cmOptions.mode = 'text/x-python';
} else if (this.$utils.endWith(filePath, '.go') || this.$utils.endWith(filePath, '.GO')) {this.cmOptions.mode = 'text/x-go';
} else if (this.$utils.endWith(filePath, '.cpp') || this.$utils.endWith(filePath, '.CPP')) {this.cmOptions.mode = 'text/x-c++src';
} else if (this.$utils.endWith(filePath, '.sql') || this.$utils.endWith(filePath, '.SQL')) {this.cmOptions.mode = 'text/x-sql';
} else if (this.$utils.endWith(filePath, '.sh') || this.$utils.endWith(filePath, '.SH')) {this.cmOptions.mode = 'text/x-sh';
} else {this.cmOptions.mode = 'text/x-java';
}

 

这篇关于VUE中使用codemirror高亮显示代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---