高亮失效的直接原因是高亮库只扫描嵌套结构，本身不参与解析；必须将完整嵌入其内容区，动态插入后还需手动调用highlightelement()。
details 标签里放代码，高亮失效的直接原因
不是 <details></details> 本身有问题，而是 highlight.js（或 Prism）这类库只扫描 <pre class="brush:php;toolbar:false;"><code></code> 结构——<code><details></details></code> 是个普通容器，它不参与语法解析。如果你把原始代码块直接塞进 <code><summary></summary></code> 或 <code><details></details></code> 内部，又没保留 <code><pre class="brush:php;toolbar:false;"><code></code> 嵌套，高亮引擎根本“看不见”那段代码。</pre>
必须用 <code> 套在 details 里面</code>
正确的 DOM 结构只有一种：把标准高亮所需的 <pre class="brush:php;toolbar:false;"><code class="js"></code> 完整嵌入 <code><details></details></code> 的内容区（即 <code><summary></summary></code> 后面的部分），不能拆、不能省。</pre>
-
<details></details>可以包裹任意 HTML，但它不改变子节点的语义 -
<pre class="brush:php;toolbar:false;"><code class="python">print("hello")</code></pre>这段必须原样存在，且 class 值得是language-xxx或lang-xxx - 别写成
<details><code>...—— 缺<pre class="brush:php;toolbar:false;"></pre>就不触发高亮 - 也别写成
<details><p><code>...——<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>会破坏预格式化，空格缩进全丢
动态插入时要手动触发 highlightElement
如果页面加载后才往 <details></details> 里加代码（比如通过 innerHTML、Vue 渲染或 fetch 返回），hljs.highlightAll() 不会自动重跑。你得在插入完成之后，显式调用 hljs.highlightElement()。
- 确保新插入的
<code>元素已有正确 class，例如class="bash" - 获取该元素后调用：
hljs.highlightElement(codeEl) - 如果不确定语言，先设
class="plaintext"避免报错，再根据实际内容覆盖 - 别对整个
<details></details>调用highlightAll()—— 效率低，还可能重复高亮已处理过的块
HTML 示例代码里的 必须转义
你在 <details></details> 里展示 HTML 片段（比如 <div>Hello</div>）时，如果没转义，浏览器会真把它当标签解析，导致 DOM 结构错乱、<code> 被截断、高亮完全失败。
- 最稳做法：服务端或构建时就把
→ <code><，>→>，&→& - 前端临时处理可用
document.createTextNode(htmlString).textContent获取转义后字符串 - 绝对不要用
innerHTML = rawHtmlString直接赋值含的内容 - GitHub Markdown 中的
```html块能自动转义，但纯 HTML 页面里必须自己来
细节折叠本身很简单，但和高亮组合时，最容易被忽略的是三件事：结构必须是 <pre class="brush:php;toolbar:false;"><code></code> 嵌套、class 名必须带 <code>language-</code> 前缀、动态插入后必须手动调 <code>highlightElement</code>——漏掉任一环，看起来都像“高亮失效”。</pre>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
