本文主要是介绍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高亮显示代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!