Vditor code cannot be highlighted
In the process of using Vditor, the hljs attribute of the configuration preview is invalid. After trying various methods (baidu, google), it is invalid, and finally decided to solve it manually. The solution is as follows
configuration file
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 code
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()
}
}
Idea: Use native vditor+hljs configuration to solve
Disadvantages: It is troublesome to switch themes, and can be further optimized