JavaScript在线代码编辑器-技术选型

背景

我们有时候需要在项目中引用代码编辑器,那么你知道有哪些库可以支持嘛?

monaco-editor

monaco-editor是强大的代码编辑器,它可以支持多种语言语法的高亮,目前使用者非常广泛,基本上大部分企业项目都是使用的它,值得一提的是vscode就是基于它进行开发的。

如果你是vue的开发者你可以下载vue-monaco-editor,如果你是react的开发者,你可以下载react-monaco-editor进行使用。

初学者必踩的坑就是如何配置代码高亮,首先无论你是vue还是react,你都需要安装一个插件作为支持:monaco-editor-webpack-plugin,然后vue的话在vue.config.js中进行配置,react的话需要另外下载一个插件叫customize-cra,使用它重写cra,然后在启动命令修改为react-app-rewired xxx就可以了。

codeMirror

codeMirror也是一个不错的在线代码编辑器,目前使用的网站也比较多,比如菜鸟教程的在线代码编辑器就是使用codeMirror进行制作的。网上有很多codeMirror的教程,可以自行搜索

prism-editor

prism-editor是基于prismjs进行开发的,prismjs是功能强大的高亮代码块的库,目前CSDN正在使用这个库,用来博客代码块的展示。这个库原本是不支持编辑器输入的,只是为了展示高亮代码,但是由于prism提供的主题包非常好看(就像CSDN大会员有各种绚丽的代码块一样),很多开发者在源码上进行二次开发制作出了一款可输入的高亮代码块,也就是我们说的代码编辑器了

以上就分享几个常用的库,可以实现高亮代码的需求,大家感兴趣的话可以自行百度详细了解这些库的使用

猜你喜欢

转载自blog.csdn.net/chengqige/article/details/126979965