vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比

vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比

使用的是vue语言，用element的组件，要做一个在线编辑代码，要求输入代码内容，可以进行高亮展示，可以切换各不同语言，而且支持关键字补全，还要有一个各不同版本间的代码左右比较，这就是需求。

至于为什么选中codemirror，请查看vue（element）中代码高亮插件全面对比

好了，现在正式开工吧！

首先需要下载codemirror组件，diff-match-patch组件

npm install codemirror
npm install diff-match-patch

当然啦，npm下载很是缓慢，换个国内镜像，淘宝的吧。果然，速度就嗖嗖的起来。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

cnpm install codemirror
cnpm install diff-match-patch

可在node_modules下看到其目录结构

codemirror_lgx211

核心代码如下，简练易懂，可以根据下面的自己在接着定制开发。

运行后，代码高亮效果如下所示；

代码高亮_lgx211

运行后，代码自动补全效果类上，我绑定的是 Ctrl 键，输入关键字的前几个字母，按住Ctrl键，即可根据所选语言自动补全；

运行后，代码版本差异对比效果如下所示；

代码版本差异对比_lgx211

滚动任一一侧的纵向滚动条或横向滚动条，另一侧的也会跟着幅度动起来。