动态高亮闪烁主因是DOM更新、样式重置与浏览器重排在毫秒级冲突，尤其流式渲染时元素销毁重建导致视觉断层；hljs.highlightAll()强制重写innerHTML，丢失焦点/事件/滚动，应改用hljs.highlightElement()只处理新增代码块，并将高亮嵌入数据流节奏。
动态高亮闪烁不是视觉特效没写对，而是 DOM 更新、样式重置、浏览器重排三者在毫秒级时间里打架的结果——尤其在流式渲染、状态切换或频繁 v-html 替换时，90% 的“闪烁”本质是元素被销毁又重建导致的视觉断层。
为什么 hljs.highlightAll() 一用就闪？
这个函数会遍历所有 <pre class="brush:php;toolbar:false;"><code></code> 元素，强制重新解析并替换 <code>innerHTML</code>。哪怕内容完全一样，DOM 节点也被重写，绑定的事件、输入焦点、滚动位置全丢，用户眼睛就“卡”一下。</p><ul><li>别在每次流式 chunk 到达后都调用 <code>hljs.highlightAll()</code> —— 它是为静态页面设计的，不是流式场景的解药</li><li>如果容器用了 <code>v-if</code> 或 <code>ngIf</code> 控制显隐，切换瞬间 DOM 被移除，再插入就是全新节点，高亮必然重刷</li><li><code>highlightAll()</code> 内部会先清空 <code>code.textContent</code> 再写入 HTML 字符串，这步触发 layout，尤其含长代码块时，主线程卡顿肉眼可见</li></ul><H3>动态插入代码块后只高亮新增部分</H3><p>核心原则：不碰旧节点，只处理新插入的 <code><pre class="brush:php;toolbar:false;"><code></code> 片段。用 <code>hljs.highlightElement()</code> 替代全局扫描。</p><ul><li>每次拿到 Markdown 解析后的 HTML 字符串，先用正则提取出新生成的 <code><pre class="brush:php;toolbar:false;"><code class="js">...</code></code> 片段（参考知识库中 <code>convertMarkdownCodeBlocks()</code> 函数）</li><li>插入到目标容器后，立即对这些新 <code><code></code> 元素逐个调用 <code>hljs.highlightElement(codeEl)</code></li><li>务必确保传入的是已挂载的 DOM 元素，不是字符串或未 append 的 fragment；否则会静默失败</li><li>若服务端返回的是纯文本（如 <pre class="brush:php;toolbar:false;">
console.log(1)</pre>），必须先转成合法 HTML 结构再插入，不能直接 <code>innerHTML += rawText
高亮后文字抖动、换行错乱
这不是 Highlight.js 的锅，是 CSS 没兜住字体度量和行高变化。高亮过程会往文本里塞大量 <span class="hljs-keyword"></span>，若父容器未锁定排版行为，浏览器会反复重排。
立即学习“前端免费学习笔记（深入）”；
- 给包裹代码块的
<pre class="brush:php;toolbar:false;"></pre>设固定font-family和line-height，例如：pre { font-family: 'SFMono-Regular', Consolas, monospace; line-height: 1.4; } - 禁止子元素影响行高：
pre code * { line-height: inherit; } - 避免用
white-space: pre-wrap配合word-break: break-all—— 这俩叠加会让高亮后的<span></span>在换行点被截断，视觉上像“跳行” - 若用 Web Worker 做语法分析，记得把结果序列化后传回主线程，不要在 worker 里操作 DOM
Vue/React 中高亮状态丢失的隐藏原因
框架的响应式更新机制和 Highlight.js 的 DOM 操作存在天然冲突：组件重渲染时，v-dom diff 可能复用旧节点，但 highlightElement() 写死的 class 名会被 diff 算法当成“需保留”，导致二次高亮失效或样式残留。
- Vue 用户：不要在
mounted()里一次性highlightAll()，改用nextTick()+ 查询新插入的code元素再高亮 - React 用户：在
useEffect里监听容器 ref 变化，用MutationObserver捕获新增的<code>节点，比依赖useState触发时机更可靠 - 所有框架都要防 XSS：服务端返回的代码内容必须 HTML 实体转义（
, <code>>,&），否则<script></script>标签可能在高亮前就被执行 - 若用了
dangerouslySetInnerHTML或v-html，确保高亮逻辑在内容插入完成后的下一个 microtask 执行（可用Promise.resolve().then(() => {...})）
最易被忽略的一点：高亮不是终点，而是渲染链上的一环。它必须嵌入到你的数据流节奏里——什么时候取、什么时候转、什么时候插、什么时候标，每一步的时间窗口都得对齐。漏掉任意一环，用户看到的就是一闪而过的白块或错位文字。
