官网地址:https://highlightjs.org/
首先在项目中安装这个插件
npm i highlight.js
然后再相应的页面引入和调用,这里记录一下全局使用的方法
import hljs from 'highlight.js';
import 'highlight.js/styles/docco.css' //样式
const app = createApp(App);
//创建v-highlight全局指令
app.directive('highlight',function (el:any) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block:any)=>{
hljs.highlightBlock(block)
})
})
directive(app);
other.elSvg(app);
app.use(pinia).use(router).use(ElementPlus).use(i18n).use(VueGridLayout).mount('#app');
全局注册之后就可以使用了
<div>
<div v-highlight v-html="item.answer"></div>
</div>