nuxt3 使用代码高亮插件 prism.js

npm i prismjs -S

npm i babel-plugin-prismjs -D

npm i vite-plugin-prismjs

import prismjs from 'vite-plugin-prismjs'

vite: {
    plugins: [
        prismjs({
            // 添加支持的高亮的语言, 如果需要支持全部的话改成这样:  languages: "all"
            languages: ['cpp','javascript','php','sql','css','html','java','json','sass','scss','c','md','xml','shell'],
            // 配置prism插件 toolbar是后面两个插件依赖的插件.
            // show-language: 显示语言名。
            // copy-to-clipboard: 添加复制代码功能。
            plugins: ['toolbar', 'show-language', 'copy-to-clipboard'],
            // 主题名称,支持的主题可以在 node_moduels中安装此库的目录下寻找。
            theme: "okaidia",
            css: true
        })
    ]
},

import Prism from "prismjs";

onUpdated(() => {
    Prism.highlightAll(); //修改内容后重新渲染
})

onMounted(() => {
    Prism.highlightAll(); //切换菜单重新渲染
})

useHead({
    bodyAttrs: {
        "data-prismjs-copy": "复制",
        "data-prismjs-copy-error": "复制出错",
        "data-prismjs-copy-success": "已复制"
    }
});