如何优雅地高亮显示代码语法？

Question

在实现代码语法高亮时，常遇到如何在保持页面性能的同时，优雅地支持多种编程语言与主题切换的问题。特别是在富文本编辑器或技术博客中，需兼顾高亮准确性、渲染速度与样式可定制性。使用主流库（如 Prism.js 或 Highlight.js）虽能快速集成，但容易因语言包臃肿导致加载缓慢，且默认样式难以与设计系统融合。如何按需加载语言组件、实现暗色模式无缝切换，并避免 SSR 渲染闪烁，成为构建优雅代码高亮功能的关键挑战。

Answer 1

1. 代码高亮的常见实现方式与核心挑战

在现代前端开发中，代码语法高亮广泛应用于技术博客、文档系统和富文本编辑器。常见的解决方案包括 Prism.js 和 Highlight.js，它们通过正则匹配或词法分析对代码块进行标记着色。

• Prism.js 支持插件化语言扩展，但默认引入全部语言包会导致 bundle 体积膨胀。
• Highlight.js 提供自动语言检测，但其完整版库大小超过 100KB（压缩后），影响首屏加载性能。
• 两者均依赖 DOM 操作，在服务端渲染（SSR）环境下易出现客户端与服务器渲染不一致，导致“闪烁”现象。

此外，设计系统集成困难：默认主题多为固定 CSS 类名，难以动态切换暗色/亮色模式，且样式隔离性差。

2. 架构优化路径：从全量加载到按需加载

为提升性能，应采用模块化策略实现语言组件的按需加载。以 Prism.js 为例，可通过构建工具（如 Webpack 或 Vite）进行 tree-shaking，并结合动态 import 实现运行时懒加载特定语言解析器。

// 动态导入 JavaScript 语言支持
async function loadPrismLanguage(lang = 'javascript') {
  if (!Prism.languages[lang]) {
    await import(`prismjs/components/prism-${lang}.min.js`);
  }
  return Prism.highlight(code, Prism.languages[lang], lang);
}

方案	初始包大小	可定制性	SSR 友好度
Prism.js 全量	~80KB	中等	低
Highlight.js 自动检测	~110KB	中等	中
Shiki + WASM	~60KB (+WASM)	高	高
Syntax Highlighter (React)	~45KB	高	中

3. 主题系统设计：支持暗色模式无缝切换

传统做法是通过预定义 CSS 类切换主题，但存在样式污染和延迟问题。推荐使用 CSS Custom Properties 结合运行时主题管理器。

:root {
  --code-bg: #f6f8fa;
  --code-token-comment: #6e7781;
}

[data-theme="dark"] {
  --code-bg: #1c2128;
  --code-token-comment: #8b949e;
}

.code-block {
  background: var(--code-bg);
  padding: 1rem;
}

在 React 或 Vue 应用中，可封装 useTheme Hook 监听系统偏好并同步更新 data-theme 属性，实现无闪烁的主题切换。

4. SSR 渲染一致性保障机制

为避免客户端与服务端高亮结果不一致引发的闪烁（Hydration Mismatch），需确保高亮逻辑可在 Node.js 环境执行。

1. 选择支持 SSR 的高亮引擎，如 Shiki（基于 VS Code TextMate 引擎，运行于 WASM）。
2. 在服务端预先完成语法解析，生成带 class 的 HTML 字符串。
3. 客户端复用相同配置，跳过重复渲染。

import { getHighlighter } from 'shiki';

const highlighter = await getHighlighter({
  theme: 'github-light',
  langs: ['javascript', 'python']
});

const html = highlighter.codeToHtml(codeString, { lang: 'js', theme: currentTheme });

5. 高级架构：构建可扩展的高亮服务层

对于大型内容平台，建议抽象出统一的 CodeHighlightService，封装语言加载、主题管理、缓存与错误降级机制。

```mermaid graph TD A[用户输入代码块] --> B{语言已加载?} B -- 否 --> C[动态加载语言模块] C --> D[执行高亮解析] B -- 是 --> D D --> E[应用当前主题样式] E --> F[输出HTML片段] F --> G[渲染至DOM] H[主题切换事件] --> I[批量更新所有代码块] I --> G ```

该服务可集成缓存层（如 LRUCache 存储已解析结果），减少重复计算；同时支持 fallback 到纯文本显示，保障极端情况下的可用性。

6. 性能监控与用户体验优化

在真实场景中，需监控高亮耗时、资源加载时间及内存占用。可通过 Performance API 记录关键指标：

performance.mark('highlight-start');
await highlightCode();
performance.mark('highlight-end');
performance.measure('code-highlight', 'highlight-start', 'highlight-end');

结合懒渲染策略：仅对视口内的代码块立即高亮，其余延后处理，显著降低主线程压力。