diff-match-patch

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下看到其目录结构 核心代码如下，简练易懂，可以根据下面的自己在接着定制开发。 <template> <div> <!-- 操作按钮 --> <el-button @click="handleAdd">代码编辑，高亮补全</el-button> <el

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下看到其目录结构 核心代码如下，简练易懂，可以根据下面的自己在接着定制开发。 <template> <div> <!-- 操作按钮 --> <el-button @click="handleAdd">代码编辑，高亮补全</el-button> <el