<code>标签本身不支持折叠，仅语义化标记行内代码片段；真正可折叠长代码需<details>+<pre>+<code>组合：<details>提供交互、<pre>保留格式、<code>标识语义并触发高亮。
<code> 标签本身不支持折叠，强行用它包裹长代码只会导致溢出、换行错乱或 HTML 解析失败——这是最常被误用的点。
为什么 <code> 不能直接做折叠
它只是语义化标记「一行内代码片段」，浏览器默认渲染为等宽行内元素，不保留缩进、不换行、不处理嵌套标签。把多行 JSON 或函数体塞进 <code> 里，结果是：所有内容挤成一行，{ 和 } 还可能被当成 HTML 标签解析而消失。
- 错误示例：
<code>function a() { return 1; }→ 渲染后无换行、无缩进，且大括号若未转义会触发解析错误 -
<code>不接受white-space: pre-wrap等样式可靠生效，基线对不齐、宽度失控是常态 - 无障碍阅读器会把它当单个单词读，比如“function a left brace return one right brace”，完全不可理解
真正能折叠长代码的组合：<details> + <pre> + <code>
三者缺一不可：<details> 提供交互逻辑，<pre> 保持原始格式（空格、换行、缩进），<code> 表明语义和启用语法高亮库识别。
- 必须写成：
<details> <summary>点击展开配置</summary> <pre><code class="json">{ "port": 3000, "debug": true }</code></pre> </details> -
<summary>里禁止放<p>、<div>或换行，只允许短语级内容，例如<code>--verbose</code>可以，<strong>注意</strong>也可以 - JSON/JS/CSS 等需手动添加
class="xxx"，否则highlight.js或Prism.js不会触发高亮
常见踩坑：默认收起、状态不持久、键盘焦点失效
原生 <details> 默认就是收起的，加 open 属性才能默认展开；但这个状态不会存到 localStorage，刷新就重置——别指望它记住用户上次操作。
立即学习“前端免费学习笔记（深入）”；
- 想默认展开？必须显式写
<details open>，style="display:block"强行显示会破坏可访问性 - 折叠内容里的
<a href>或<input>在收起状态下仍存在于 DOM，Tab 键能聚焦到它们——这不是 bug，是规范行为，但容易引发交互困惑 - 旧版 Safari 对
<summary>里嵌<button>支持异常，点击可能不触发切换，建议避开
最常被忽略的是：你用了 <details>，却忘了给 <code> 加语言类名，导致高亮失效；或者把 <pre> 和 <code> 顺序写反，变成 <pre><code>...</pre></code>，结构非法，部分浏览器直接忽略高亮逻辑。
