动态高亮需解决流式插入、无预设结构、DOM就绪即触发三问题：先正则提取代码块并转义HTML实体，生成结构，再用hljs.highlightElement()逐个处理新插入的code元素，并确保语言包已注册且class含language-前缀。
动态高亮不是“加个 class 就完事”，而是要解决三个实际问题：内容是流式插入的、原始 HTML 里没有预设结构、高亮必须在 DOM 真正可用后立即触发。直接调用 hljs.highlightAll() 几乎总是失败，因为它的扫描时机和目标结构都对不上。
✅ 必须把 Markdown 代码块转成 结构</H3><p>Highlight.js 只识别 <code><pre class="brush:php;toolbar:false;"><code class="js">...
这种嵌套结构，<p><code>```js 或纯文本中的
console.log(1)
它完全无视。
- 用正则提取三重反引号块：
/```(\w+)?\n([\s\S]*?)\n```/g，注意要捕获语言名和代码体
- 对代码内容做 HTML 实体转义：
.replace(/&/g, '&').replace(/, '/g, '>')，否则插入 DOM 会破坏结构甚至引发 XSS
- 生成标准结构：
<pre class="brush:php;toolbar:false;">${escapedCode}</pre>
✅ 动态插入后必须手动调用 hljs.highlightElement()
/```(\w+)?\n([\s\S]*?)\n```/g，注意要捕获语言名和代码体.replace(/&/g, '&').replace(/, '/g, '>')，否则插入 DOM 会破坏结构甚至引发 XSS<pre class="brush:php;toolbar:false;">${escapedCode}</pre>
hljs.highlightElement()
hljs.highlightAll() 只扫初始 DOM，对 JS 后续插入的内容无效。流式响应（如 SSE、fetch + ReadableStream）每 chunk 插入一段 HTML，就得立刻处理其中新出现的 <code> 元素。
- 不要等整个响应结束再统一高亮——用户看到的是“先出白字，再突然变色”，体验割裂
- 拿到新 HTML 字符串后，先用上一步转换函数处理，再插入容器（如
outputEl.innerHTML += convertedHtml） - 紧接着遍历新插入的
<code>元素，逐个调用：hljs.highlightElement(codeEl) - 如果担心重复高亮，可在插入前给容器加个临时标记，或只处理
outputEl.lastElementChild.querySelectorAll('code')
✅ 避免语言包缺失导致静默失败
控制台不报错，但代码块就是不着色？大概率是 hljs.registerLanguage() 没加载对应语言，或用了缩写类名（如 class="js"）而非 language-js。
立即学习“前端免费学习笔记（深入）”；
- 检查
<code>的 class 是否为language-javascript或language-py—— Highlight.js 默认只认language-前缀 - 若只用少数语言，显式引入：
import javascript from 'highlight.js/lib/languages/javascript'; hljs.registerLanguage('javascript', javascript); - 若不确定语言类型，用
hljs.highlightAuto(codeText)替代highlightElement()，但性能略低
最易被忽略的一点：高亮逻辑必须在 DOM 节点真实挂载后执行。用 innerHTML += 插入后，querySelectorAll('code') 可能还拿不到新节点，建议用 insertAdjacentHTML('beforeend', ...) + lastElementChild 定位，或包装在 requestAnimationFrame 回调里确保渲染完成。
