如何用Monaco在Vue项目中实现代码高亮功能？

本文共计1166个文字，预计阅读时间需要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下载很是缓慢，换个国内镜像，淘宝的吧。果然，速度就嗖嗖的起来。