前言

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

• 支持代码高亮


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


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


• 支持快速搜索


• 支持自动补全提示


• 支持自动匹配括号
  
   

环境准备

npm install jshint
npm install jsonlint
npm install script-loader
npm install vue-codemirror


 

封装组件

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





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

接下来看展示效果

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

 

python编译器

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






效果如下