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下看到其目录结构

vue(element)中使用monaco实现代码高亮_第1张图片
核心代码如下所示

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

CodeEditor.vue





引入页面,供本页面使用

index.vue





效果如下所示

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

monaco自动提示_lgx211
代码高亮效果,代码段折叠效果,右侧预览效果如下所示

vue(element)中使用monaco实现代码高亮_第2张图片