vue（element）中使用monaco实现代码高亮

vue（element）中使用monaco实现代码高亮

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

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

好了，现在正式开工吧！

首先需要下载monaco-editor组件，monaco-editor-webpack-plugin组件

npm install monaco-editor
npm install monaco-editor-webpack-plugin

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

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

cnpm install monaco-editor
cnpm install monaco-editor-webpack-plugin

可在node_modules下看到其目录结构

核心代码如下所示

首先写个组件，供其他页面引入调用，

CodeEditor.vue

引入页面，供本页面使用

index.vue

效果如下所示

代码自动提示效果，如下所示

代码高亮效果，代码段折叠效果，右侧预览效果如下所示