动态高亮需解决流式插入、Markdown解析和DOM不存在三问题：先用正则提取代码块并转义HTML实体，生成language-js类名的pre>code结构，再对挂载后的code元素调用highlightElement()，且仅在`闭合后处理以防错乱。
动态高亮不是“加个 class 就完事”，而是要解决三个实际问题：内容是流式插入的（比如 SSE 或 GPT 返回）、原始文本含 Markdown 语法（如 ```js）、DOM 结构在高亮前并不存在。直接调用 hljs.highlightAll() 一定失败。
✅ 必须把 Markdown 代码块转成 结构
Highlight.js 只认 <code class="js">...</code>
这种嵌套结构，```js
- 用正则
/```(\w+)?\n([\s\S]*?)\n```/g提取语言和代码体 - 必须对代码内容做 HTML 实体转义：
&→&、→、>→>，否则会破坏 DOM 或引发 XSS - 生成的 class 名必须是
language-javascript或lang-js，写成js或javascript-code不生效
✅ 动态插入后必须手动调用 highlightElement()
流式响应中，每次追加一段 HTML 字符串（比如 outputEl.innerHTML += chunk），这时新插入的 <code></code> 节点不会被自动扫描。别再用 <code>hljs.highlightAll()</code> ——它只扫初始加载时已存在的节点。
- 对每个新插入的
元素，显式调用hljs.highlightElement(codeEl) - 如果插入的是完整
<code></code> 片段，优先选 <code>hljs.highlightElement(codeEl)</code>，比 <code>highlightAll()</code> 更轻量、更可控
- 确保调用时机：必须等该节点已挂载到 DOM 中，且
codeEl确实存在（检查codeEl.parentNode）
✅ 避免重复高亮和样式错乱
流式输出常分多次插入同一段代码（例如
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
1)
拆成三段），若每次插入都执行高亮，可能触发多次 innerHTML 替换，导致光标丢失、格式错乱或性能抖动。
- 只在确认代码块“收尾”后再处理：检测到完整的
```闭合标记才转换并高亮 - 不要对整个容器反复调用
highlightAll()，尤其当容器里混有非代码内容（如段落、标题）时，会浪费 CPU 且干扰已有 class - 若使用
textContent渲染纯文本再转义插入，记得之后用insertAdjacentHTML而非innerHTML +=，避免重绘整块内容
最易被忽略的一点：高亮逻辑必须和流式解析状态同步。比如用户还没看到 ``` 结束符，你就提前把中间片段当完整代码块处理了——结果就是语法树错乱、高亮断层、甚至 DOM 崩溃。真实场景中，这不是边缘 case，而是默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
