nuxt3如何添加highlightjs代码高亮功能

大家好我是图恩，今天给大家分享如何在nuxt3项目中添加代码高亮功能。

nuxt3是基于vue3实现的服务端渲染（ssr）框架，跟单页面不同的是页面的渲染是在服务端完成，包括javascript/css等。

highlightjs（ https://highlightjs.org/ ）是一款代码高亮插件，支持市面上大部分语言的代码高亮，想知道它支持那些语言可以去它的官网查看。

nuxt3介入hightlightjs操作如下：

通过npm 安装

npm i highlight.js

在有需要给代码添加高亮的页面引入，同时引入css文件

// 引入highlightjs代碼高亮插件
import 'highlight.js/styles/monokai-sublime.css'
import hljs from "highlight.js"

在获取到内容后添加一个200毫秒的延时来调用highlightjs的高亮方法，否则不会生效，可以理解为在内容还没渲染完成就调用会不生效。

setTimeout(() =>{
      hljs.highlightAll()
  },200)

完整代码如下供参考

<script lang="ts" setup>
import { getDetailApi} from "@/pages/post/index"
import { reactive, onMounted } from "vue"
import { toReactive } from "@vueuse/shared";

// 引入highlightjs代碼高亮插件
import 'highlight.js/styles/monokai-sublime.css'
import hljs from "highlight.js"

let state = reactive({
  detailData: {
    title: "",
    content: "",
  },
})

const getList = async () => {
  // 通过异步请求数据
  let { data } = toReactive(await useFetch(getDetailApi + route.params.id)) as any;
  // 接口返回数据后再添加一个200毫秒的延时
  state.detailData.content = data.data.result
  setTimeout(() =>{
      hljs.highlightAll()
  },200)
}
getList()
</script>

本文章由javascript技术分享原创和收集