codepen上这段代码怎样转化为vue webpack模版写法？

Question

1.问题

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

求完整写法

2.补充

好吧，其实我最终使用的也不是codepen上这个代码的效果，我只需要能把<textarea>中的代码高亮就可以了。但是，codepen上这段代码并不能高亮，添加了如下参数：

lineNumbers: true,
matchBrackets: true,
viewportMargin: Infinity,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
mode: "javascript" 

结果还是不能高亮
到底该怎样写才能高亮呢？

3.其他

angularjs中使用codemirror，有相应的ui-codemirror，它是用指令实现的。

相应地，也有人用指令写过vuejs对应的代码，参考：
http://type.so/js/bind-codemi...，具体:

实现 vuejs 和 codemirror 的相互绑定

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 为 Vue data 中使用的变量名 -->
<textarea id="codepad" v-codemirror="code"></textarea>

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