大家好我是图恩，今天给大家分享如何在nuxt3项目中添加代码高亮功能。
nuxt3是基于vue3实现的服务端渲染（ssr）框架，跟单页面不同的是页面的渲染是在服务端完成，包括javascript/css等。
highlightjs（ https://highlightjs.org/ ）是一款代码高亮插件，支持市面上大部分语言的代码高亮，想知道它支持那些语言可以去它的官网查看。
nuxt3介入hightlightjs操作如下：
通过npm 安装
npm i highlight.js在有需要给代码添加高亮的页面引入，同时引入css文件
// 引入highlightjs代碼高亮插件\r\nimport 'highlight.js/styles/monokai-sublime.css'\r\nimport hljs from "highlight.js"\r在获取到内容后添加一个200毫秒的延时来调用highlightjs的高亮方法，否则不会生效，可以理解为在内容还没渲染完成就调用会不生效。
setTimeout(() =>{\r\n hljs.highlightAll()\r\n },200)完整代码如下供参考
<script lang="ts" setup>\r\nimport { getDetailApi} from "@/pages/post/index"\r\nimport { reactive, onMounted } from "vue"\r\nimport { toReactive } from "@vueuse/shared";\r\n\r\n// 引入highlightjs代碼高亮插件\r\nimport 'highlight.js/styles/monokai-sublime.css'\r\nimport hljs from "highlight.js"\r\n\r\nlet state = reactive({\r\n detailData: {\r\n title: "",\r\n content: "",\r\n },\r\n})\r\n\r\nconst getList = async () => {\r\n // 通过异步请求数据\r\n let { data } = toReactive(await useFetch(getDetailApi + route.params.id)) as any;\r\n // 接口返回数据后再添加一个200毫秒的延时\n state.detailData.content = data.data.result\r\n setTimeout(() =>{\r\n hljs.highlightAll()\r\n },200)\r\n}\r\ngetList()\r\n</script>