使用higtlight实现代码高亮

官网地址：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>