vue3 highlight.js 将html中 <pre><code>标签美化成代码高亮

1.vue3中装插件

cnpm install -S highlight.js 

2.载入插件

import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

3.注册指令

这里如果是用mounted生命周期，html必需已经加载好，如果html内容是请求接口再加载的，需要使用updated生命周期

app.directive('highlight', {
    updated(el) { 
      console.log('el', el)
      const blocks = el.querySelectorAll('pre code')
      for (let i = 0; i < blocks.length; i++) {
        hljs.highlightElement(blocks[i])
      }
    }
  })

4.使用指令

<div class="entry-content" v-highlight v-html="detail.content"></div>

5.别人写的插件（感觉不适用通过接口获取html内容后再代码高亮，适合直接将某个代码块内容直接高亮）

cnpm install -S @highlightjs/vue-plugin

6.载入插件：

app.use(hljsVuePlugin)

7.使用插件：

 <!-- 把数据绑定到 `code` 属性-->
<highlightjs autodetect :code="code" />
<!--或者直接将显示的代码写到 `code`中 -->
<highlightjs language='javascript' code="var x = 5;" />