1.问题

想用codemirror做代码实时高亮。项目中前端用的是vuejs，不知道如何使用codemirror，找到了codepen上的一个demo：http://codepen.io/royportas/p...但不知道如何把它转化到我项目中，我用vue-cli的webpack模版建立的项目

求完整写法

2.补充

好吧，其实我最终使用的也不是codepen上这个代码的效果，我只需要能把</code>中的代码高亮就可以了。但是，codepen上这段代码并不能高亮，添加了如下参数：</p> <pre class='brush:php;toolbar:false;'><code>lineNumbers: true, matchBrackets: true, viewportMargin: Infinity, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], mode: "javascript" </code></pre> <p>结果还是不能高亮<br>到底该怎样写才能高亮呢？</p> <h2>3.其他</h2> <p>angularjs中使用codemirror，有相应的ui-codemirror，它是用指令实现的。</p> <p>相应地，也有人用指令写过vuejs对应的代码，参考：<br>http://type.so/js/bind-codemi...，具体:</p> <blockquote><p>实现 vuejs 和 codemirror 的相互绑定</p></blockquote> <pre class='brush:php;toolbar:false;'><code>Vue.directive("codemirror", { twoWay: true, bind: function () { // 请自行初始化CodeMirror, 可使用 $(this.el).data('codemirror') this.editor = editor; // model主动赋值标记 this.silent = false; this.handler = function () { if (!this.silent) { this.set(this.editor.getValue(), true); // 加锁，防止相互赋值 } }.bind(this); this.editor.on("change", this.handler); }, update: function (value, oldValue) { this.silent = true; this.editor.setValue(this.vm.$data[this.raw]); this.silent = false; } });</code></pre> <blockquote><p>使用</p></blockquote> <pre class='brush:php;toolbar:false;'><code><!-- code 为 Vue data 中使用的变量名 --> <textarea id="codepad" v-codemirror="code">

但是这个作者的水平比较高，他忽略没写的部分我全然不知道怎么写，有人能把这个具体写出来吗？