有哪些轻量级的代码高亮库

[leno23]

我来为您介绍一些轻量级的代码高亮库，同时也看看您项目中目前使用的是什么方案。

[2 tools called]

根据您的代码，我看到项目中已经安装了 react-syntax-highlighter，但目前被注释掉了。让我为您介绍几个优秀的轻量级代码高亮库：

推荐的轻量级代码高亮库

1. Prism.js ⭐ 最轻量

• 体积: ~2KB (核心) + 按需加载语言包
• 特点:
  • 模块化，按需加载语言支持
  • 丰富的主题
  • 支持插件扩展
  • 无依赖
• React 包装: prismjs + react-prism 或 prism-react-renderer
• 推荐用于: 需要极致轻量的场景

2. Shiki ⭐ 高精度渲染

• 体积: ~7-10KB + WASM
• 特点:
  • 使用 VS Code 的语法引擎
  • 渲染效果最接近 IDE
  • 支持所有 VS Code 主题
  • 服务端渲染友好
• React 包装: @shikijs/react 或 shiki

3. Highlight.js

• 体积: ~30KB (核心) + 语言包
• 特点:
  • 自动语言检测
  • 190+ 语言支持
  • 简单易用
• React 包装: react-highlight 或直接使用
• 适用于: 中等规模应用

4. react-syntax-highlighter (您目前使用的)

• 体积: ~50-100KB (包含多个引擎)
• 特点:
  • 开箱即用
  • 支持 Prism 和 Highlight.js 两种引擎
  • 丰富的预设主题
• 适用于: 快速开发，不太在意体积

5. Lowlight ⭐ 虚拟 DOM 友好

• 体积: ~10KB + 语言包
• 特点:
  • Highlight.js 的虚拟 DOM 版本
  • 更适合 React
  • 性能更好
• React 包装: react-lowlight

推荐方案

根据您的项目场景，我推荐以下方案：

方案 A: Prism.js (最轻量)

npm install prismjs prism-react-renderer

import { Highlight, themes } from 'prism-react-renderer';

<Highlight theme={themes.vsDark} code={code} language={language}>
  {({ tokens, getLineProps, getTokenProps }) => (
    <pre>
      {tokens.map((line, i) => (
        <div key={i} {...getLineProps({ line })}>
          {line.map((token, key) => (
            <span key={key} {...getTokenProps({ token })} />
          ))}
        </div>
      ))}
    </pre>
  )}
</Highlight>

方案 B: Shiki (最佳效果)

npm install shiki

import { codeToHtml } from 'shiki';

// 异步渲染
const html = await codeToHtml(code, {
  lang: language,
  theme: 'dark-plus'
});

<div dangerouslySetInnerHTML={{ __html: html }} />

方案 C: 优化当前的 react-syntax-highlighter

如果不想更换，可以优化导入方式减少体积：

// 只导入需要的语言和样式
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark';

SyntaxHighlighter.registerLanguage('javascript', javascript);

性能对比

库名	核心体积	渲染速度	主题丰富度	易用性
Prism.js	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Shiki	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Lowlight	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Highlight.js	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
react-syntax-highlighter	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

需要我帮您实现其中某个方案吗？