vue中富文本框设置代码高亮

1、安装

npm install vue-quill-editor --save -dev // 富文本
npm install highlight.js --save -dev // 代码高亮

2、在 main.js 中引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

import 'highlight.js/styles/monokai-sublime.css'; // 代码高亮样式
Vue.use(VueQuillEditor)

3、在 需要使用富文本框的组件中

// html 代码部分
<quill-editor v-model="wz.content" ref="myQuillEditor" :options="editorOption"></quill-editor>

// js
import hljs from 'highlight.js';

// data 数据部分
data(){ 
  return{ 
    content:'', 
    editorOption: {
       modules: {