如何用Vue结合Monaco实现长尾词代码高亮功能？

本文共计1161个文字，预计阅读时间需要5分钟。

使用Vue语言和Element组件库，创建一个在线代码编辑器。需包含以下功能：- 输入代码内容- 高亮显示代码- 切换不同编程语言- 支持关键词自动补全- 不同版本代码左右对比

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

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

好了，现在正式开工吧！

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

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

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