Vue + prismjs 实现代码高亮显示

1、安装

安装prismjs 及对应的vite-plugin-prismjs 插件

npm install prismjs
npm install vite-plugin-prismjs -D

2、配置vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { prismjsPlugin } from 'vite-plugin-prismjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: true
    }),
    prismjsPlugin({
      languages: 'all', // 语言
      plugins: ['line-numbers', 'copy-to-clipboard'],
      theme: 'solarizedlight',
      css: true
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3、封装组件 PrismView

<script setup lang='ts'>
/**
 * @Description prismjs 预览 代码
 * @Author llj
 * @Date 2024-08-07 14:24:35
 */
import Prism from 'prismjs'
const props = defineProps({
  codes: {
    default: ''
  },
  language: {
    default: 'html'
  }
})
onMounted(() => {
  Prism.highlightAll()
})
onUpdated(() => {
  Prism.highlightAll()
})
</script>

<template>
  <pre v-if="language === 'js'"><code class="language-html line-numbers">{{ codes }}</code></pre>
  <pre v-else><code class="language-html line-numbers">{{ codes }}</code></pre>
</template>

4、使用代码高亮组件

<PrismView codes="var data = 1;" language='js' ></PrismView>