动态高亮需手动接管流程：先将字符串转为结构，再调用hljs.highlightElement()，且class必须为language-xxx格式，三者缺一不可。
动态高亮不是靠 CSS 动画或伪类就能搞定的——它本质是「内容变化 → 结构重建 → 高亮重触发」的链式响应。用 :hover 或 :active 只能做瞬时反馈，真要让新插入的代码块、流式返回的 Markdown 片段、或用户粘贴的 HTML 片段立刻带语法色，必须绕过 highlight.js 的静态扫描机制，手动接管转换与高亮流程。
✅ 必须把 Markdown 代码块转成 结构</H3><p>highlight.js 不解析 <code><pre class='brush:js;toolbar:false;'>
console.log(1)
这种纯文本，只认 DOM 中的 <pre class="brush:php;toolbar:false;"><code class="js"></code>。流式输出（如 SSE、fetch ReadableStream）拿到的永远是字符串，得自己切、转、插。</p><ul><li>用正则提取三重反引号块：<code>/```(\w+)?\n([\s\S]*?)\n```/g</code>，注意捕获空语言和多行内容</li><li>对代码内容做 HTML 实体转义：<code>.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')</code>，否则 <code><div></code> 会变成真实标签</li><li>拼出标准结构：<code>`<pre class="brush:php;toolbar:false;"><code class="language-${lang || 'plaintext'}">${escapedCode}</pre>`
innerHTML += htmlString，避免 XSS 和结构破坏；优先用 insertAdjacentHTML('beforeend', ...) 或 textContent + 手动创建节点✅ 动态插入后必须手动调用 hljs.highlightElement()
hljs.highlightAll() 只扫初始 DOM，对后续插入的 <pre class="brush:php;toolbar:false;"><code></code> 无感。每插入一个代码块，就得立刻告诉 highlight.js：“这个新节点，高亮它”。</pre>
- 插入后立即获取刚加进来的
<code>元素，比如const codeEl = container.lastElementChild.querySelector('code') - 调用
hljs.highlightElement(codeEl)，它比highlightAll()更轻量、更精准 - 如果插入的是多个代码块，别循环调用
highlightElement—— 改用hljs.highlightAll()，但必须确保此时所有<pre class="brush:php;toolbar:false;"><code></code> 已真实挂载到 DOM 树中</pre> - 注意：
highlightElement()要求code元素已存在且有class（如language-js），否则静默失败
✅ class 值必须是 language-xxx 或 lang-xxx
写成 class="js" 或 class="html-code"，highlight.js 直接跳过。这不是松散匹配，是硬性前缀规则。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 支持两种格式：
language-javascript和lang-javascript都行，但javascript单独写不行 - 语言 ID 要准确，
language-py不识别，得用language-python；查可用语言列表看官网文档，别凭印象写 - 没指定语言时，用
language-plaintext最安全，避免 fallback 到自动检测（耗性能且不准） - 别在 class 里混用空格或多余字符：
class=" js "中的前后空格会导致匹配失败
真正容易被忽略的点是：DOM 插入时机和高亮调用之间的微小延迟。比如用 setTimeout 延迟 0ms 触发高亮，有时仍会失败——因为浏览器还没完成 layout。稳妥做法是插入后立刻调用 highlightElement，或用 requestIdleCallback 包一层，但别加任何人工 delay。结构、class、调用三者必须严丝合缝，缺一环，颜色就出不来。
立即学习“前端免费学习笔记（深入）”；
