用了vuejs的项目中,使用codemirror
做实时代码高亮。
对于codemirror相关的css和js文件,如果手动引入外部的,则能正确显示行号、实时高亮(本地编辑器如sublime的高亮体验)
如果引入通过npm
下载到node_modules
目录下的,那么就不能正常使用:语法不能高亮。
用vue-cli的webpack模版建的项目。
index.html
代码编辑区域
入口js文件main.js
import Vue from 'vue' // import CodeMirror from 'codemirror' Vue.directive('banzi', { twoWay: true, bind: function () { this.codemirror = CodeMirror(this.el, { mode: 'javascript', lineNumbers: true }) this.codemirror.on('change', function () { this.set(this.codemirror.getValue()) }.bind(this)) }, update: function (value, oldValue) { this.codemirror.setValue(value || '') } }) /* eslint-disable no-new */ new Vue({ el: 'body', data: { 'neirong': '' } })
用npm装的codemirror
,里面没有index.js
,有bower.json
:
{ "name": "codemirror", "main": ["lib/codemirror.js", "lib/codemirror.css"], "ignore": [ "**/.*", "node_modules", "components", "bin", "demo", "doc", "test", "index.html", "package.json", "mode/*/*test.js", "mode/*/*.html" ] }
参照bower.json
,我尝试这样引入codemirror
:
import CodeMirror from 'codemirror/lib/codemirror.js'
但是不起作用
在根组件App.vue
中这样引入codemirror
:
import CodeMirror from 'codemirror/lib/codemirror' // CodeMirror,必要 import 'codemirror/lib/codemirror.css' // css,必要 import 'codemirror/mode/javascript/javascript' // js的语法高亮,自行替换为你需要的语言
结贴了。
效果
参考
vue-codemirror