直接结论：Vite/Rsbuild 环境下，优先 Shiki（构建时），其次 Prism（客户端），最后考虑 highlight.js。

详细对比：

针对 Vite/Rsbuild 的具体建议

场景 1：代码写在文件里（文档/博客）→ Shiki 构建时

用 unplugin-shiki 或 rehype-pretty-code，构建阶段直接生成高亮 HTML：

// vite.config.ts
import Shiki from 'unplugin-shiki/vite'

export default {
  plugins: [
    Shiki({ theme: 'dracula' }) // 构建时转换，0 运行时开销
  ]
}

优势：浏览器不收高亮库代码，秒开无闪烁，SEO 完美。

场景 2：代码动态从 API 获取 → Prism 轻量版 或 Shiki 客户端

• 追求极致加载速度：Prism（只注册需要的语言，体积可控制在 20KB 内）
• 追求 VS Code 效果：Shiki 客户端模式，但要接受额外 300KB 左右 JS

场景 3：极简单展示（如后台管理系统）→ highlight.js

如果只是一个简单的 <pre> 代码展示，不需要行号、复制按钮等复杂功能：

import hljs from 'highlight.js/lib/core'
import typescript from 'highlight.js/lib/languages/typescript'

hljs.registerLanguage('typescript', typescript)
// 体积最小，够用就行

避坑指南

别在 Vite 里客户端跑完整版 Shiki（除非必须）：

• 完整 Shiki 客户端包 ≈ 500KB+（含所有语言和主题）
• 即使动态导入单个主题也要 ~200KB
• 首次高亮会有明显延迟（Wasm 初始化）

Prism 在 Rsbuild 里的坑：
Rsbuild 默认开启代码压缩，Prism 的按需加载语法（import 'prismjs/components/...'）有时会 tree-shaking 出错，建议用 babel-plugin-prismjs 显式配置语言。

一句话决策

• 要 VS Code 同款效果 且能 构建时处理 → Shiki（无敌）
• 要 客户端动态高亮 且控制 包体积 → Prism（平衡）
• 只要 能用就行，越小越好 → highlight.js（极简）