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