Vite+Vue3+TS中解决PrismJS显示JSON数据不高亮的问题

在使用prismjs库高亮代码的时候，HTML、JS和CSS都能正常高亮，但是在现实JSON数据的时候就不高亮，经过一番折腾，最后解决办法如下：

必须导入js高亮组件

没错，就是这句

import "prismjs/components/prism-json"

想要显示舒服的代码字体，可以单独设置字体

pre {span {font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;}code {font-size: 16px !important;}
}

完整代码如下：

<template><pre class="line-numbers"><code :class="`language-${type}`" v-text="code" /></pre>
</template><script setup lang="ts">
import { onMounted } from "vue"
import Prism from "prismjs"
import "prismjs/themes/prism-tomorrow.min.css"
import "prismjs/components/prism-json"const props = withDefaults(defineProps<{type?: stringcode: string
}>(), {type: "json"
})watch(() => props.code, () => {nextTick(() => {Prism.highlightAll()})
})
onMounted(() => {nextTick(() => {Prism.highlightAll()})
})
</script>
<style lang="scss">
pre {span {font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;}code {font-size: 16px !important;}
}
</style>

完结，撒花✿✿ヽ(°▽°)ノ✿