nuxt3中如何使用自定义指令结合highlight js 实现代码高

• 安装highlight库

bun install highlight.js

• 在项目的plugins中创建highlight.ts文件，如果没有plugins目录需要在根目录中创建该目录
• 自定义指令

import hljs from 'highlight.js'
import {defineNuxtPlugin} from '#app'
import 'highlight.js/styles/atom-one-dark.min.css'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight',
        {
            mounted(el) {
                let element = el.querySelectorAll('pre code')
                element.forEach((block: HTMLElement) => {
                    if (block.dataset.highlighted === 'yes') return
                    hljs.highlightElement(block)
                })
            },
            updated(el) {
                let element = el.querySelectorAll('pre code')
                element.forEach((block: HTMLElement) => {
                    if (block.dataset.highlighted === 'yes') return
                    hljs.highlightElement(block)
                })
            },
            getSSRProps(binding, vnode) {
                // 你可以在这里提供SSR特定的props
                return {}
            },
        },
    )
})

       为了避免数据更新后，代码没有重新高亮，所以在updated生命周期中对结构重新渲染，使用highiighted来判断当前结构是否已经渲染了

• 在nuxt.config.ts配置文件中加上如下代码

plugins: [
        {
            src: '~/plugins/highlight.ts',
            mode: 'all',
        },
    ]