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

奔跑的呱呱牛2024-01-16 14:54

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

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

必须导入js高亮组件

没错，就是这句

js 复制代码

import "prismjs/components/prism-json"

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

css 复制代码

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

完整代码如下：

js 复制代码

<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?: string
    code: 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>

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