这篇文章主要介绍了vue 使用monaco实现代码高亮的方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
使用的是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
效果如下所示
代码自动提示效果,如下所示
代码高亮效果,代码段折叠效果,右侧预览效果如下所示
以上就是vue 使用monaco实现代码高亮的详细内容,更多请关注0133技术站其它相关文章!