vue codemirror如何实现在线代码编译器

vue codemirror如何实现在线代码编译器，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

前言

如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装

• 支持代码高亮

• 62种主题颜色，例如monokai等等

• 支持json, sql, javascript，css，xml, html，yaml, markdown, python编辑模式，默认为 json

• 支持快速搜索

• 支持自动补全提示

• 支持自动匹配括号

环境准备

npm install jshintnpm install jsonlintnpm install script-loadernpm install vue-codemirror

封装组件

我们可以在项目中的components中将vue-codemirror进行再次封装

此组件默认配置了json编译器，cmOptions中是代码编译器的配置项，需要额外的功能也可以去看官方文档配置
接下来看展示效果

可以看到我们输入了json格式的字符串，即使格式不正确，会给我们错误提示，并且也会给我们自动格式化

python编译器

我们封装的组件默认是json编译器，如果我们想使用其他语言，也很简单，只需要导入其他语言的mode

效果如下

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。