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