关于在使用Vditor时所遇到代码无法高亮问题

Vditor代码无法高亮问题

在使用Vditor过程中，配置preview的hljs属性无效，在尝试各种方法后(baidu、google)无效，最终决定手动进行解决，解决方案如下

配置文件

module.exports = {
  height: 500,
  theme: 'classic',
  tab: '\t',
  counter: {
    enable: true,
    type: 'markdown'
  },
  // 代码高亮
  preview: {
    delay: 0,
    hljs: {
      style: 'monokai',
      lineNumber: true
    }
  },
  outline: {
    enable: true,
  },
  mode: "sv"
}

vue代码

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css';
import Vditor from "vditor"; //1.import一下vditor组件
import "vditor/dist/index.css"; //1.import一下vditor组件样式
import * as vditorConfig from "/vditor.config.js";

const highlightCode = () => {
  const preEl = document.querySelectorAll('pre')
  preEl.forEach((el) => {
    hljs.highlightBlock(el)
  })
}
export default{
	data(){
		return {
			contentEditor: {}
		}
	},
	mounted(){
		this.contentEditor = new Vditor('vditor', vditorConfig)
		highlightCode()
	},
	updated(){
		highlightCode()
	}
}

思路：使用原生vditor+hljs配置进行解决
缺点：切换主题麻烦，可进行进一步的优化