Highlight.js 动态代码高亮的最佳实践

在网页开发中，我们经常需要处理动态加载的内容，特别是当这些内容包含需要语法高亮的代码片段时。Highlight.js 作为一款流行的代码高亮库，其核心功能 highlightElement 和 highlightAll 虽然强大，但在处理动态内容时可能会遇到一些挑战。

动态内容高亮的痛点

当页面中存在动态加载的消息或内容，且这些内容中嵌套了代码片段时，直接使用 highlightAll() 会导致整个页面的代码块都被重新处理。这不仅效率低下，还可能影响用户体验，特别是在频繁更新内容的场景下。

解决方案：作用域高亮

通过实现一个简单的辅助函数，我们可以针对特定 DOM 元素内的代码块进行高亮处理：

const highlightAllElement = el => el.querySelectorAll('pre code').forEach(hljs.highlightElement)

这个函数的工作原理是：

1. 接收一个 DOM 元素作为参数
2. 在该元素范围内查找所有 <pre><code> 元素
3. 对每个匹配的代码块应用 highlightElement 方法

性能优化建议

1. 批量处理：对于大量动态内容，建议先收集所有新内容，然后一次性处理
2. 节流处理：对于高频更新的场景，可以使用节流函数控制处理频率
3. 选择性更新：只处理新增内容，避免重复处理已高亮的代码块

进阶技巧

对于更复杂的场景，可以考虑：

1. 结合 MutationObserver 监听 DOM 变化
2. 实现差异对比算法，只处理实际发生变化的代码块
3. 为不同的代码语言预加载高亮规则

总结

通过这种作用域高亮的方法，开发者可以更高效地处理动态内容中的代码高亮需求，既保持了 Highlight.js 的核心功能，又避免了不必要的性能开销。这种模式也体现了现代前端开发中"精确更新"的思想，值得在各种动态内容场景中推广应用。