Vue中使用highlight.js格式化高亮代码

安装

npm install highlight.js 
// or
yarn add highlight.js

引入

定义指令

新建一个 less 文件

// 对应默认主题
.dv-json-editor--default {
      // 复制 highlight.js/style/default.css 
}

// 对应 monokai 主题
.dv-json-editor--monokai {
      // highlight.js/style/monokai.css
 }

无需在组件中 import 'highlight.js/style/default.css', 只需引入我们新建的 less 文件

实现效果

theme 为 atom-one-light 和 monokai 时

image.png