缩进“消失”是因浏览器默认渲染规则与css未适配所致，需配合white-space、转义和嵌套三要素才能正确保缩进。
为什么 <pre class="brush:php;toolbar:false;"></pre> 里的缩进会“消失”
不是代码写错了，而是浏览器默认把 <pre class="brush:php;toolbar:false;"></pre> 里的空格当普通文本渲染——它保留换行和空格字面量，但不阻止 CSS 样式重置字体大小、行高、外边距，更不会自动处理横向溢出。你看到的“扁平化”，其实是内容被压缩、截断或换行错乱导致的视觉错觉。
<pre class="brush:php;toolbar:false;"></pre> 必须配 CSS 才能保缩进
只写 <pre class="brush:php;toolbar:false;"><code><div> <p>test</p>
</div></code></pre> 没用。必须加以下至少一项 CSS：
-
white-space: pre-wrap：保留所有空格与换行，且允许自动换行（最常用） -
white-space: pre-line：合并连续空格，但保留换行（适合带语义的代码注释） -
overflow-x: auto：外层容器加该样式，防止宽代码撑破布局 -
font-family: monospace：确保空格宽度一致，避免等宽失效
推荐组合：white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
HTML 实体和转义别漏掉
<pre class="brush:php;toolbar:false;"></pre> 不解析标签，但如果你真想在其中展示 HTML 片段（比如教人写 <div>），必须手动转义：
<ul>
<li><code> → <code><
> → >
& → &
漏掉 < 就会触发浏览器解析，<div> 变成真实 DOM 节点，缩进层级直接崩坏。别依赖编辑器自动转义——它不一定生效，尤其粘贴时。
<h3>嵌套 <code><code> 标签不是可选项
语义上，<pre class="brush:php;toolbar:false;"></pre> 表示“预格式化文本”，<code> 表示“一段计算机代码”。W3C 明确建议嵌套使用：<pre class="brush:php;toolbar:false;"><code>...</code></pre>。好处有三：
- 屏幕阅读器能正确识别为代码块，提升无障碍支持
- 语法高亮工具（如 Prism、highlight.js）通常只作用于
<code>内部 - 避免 CSS 误命中其他
<pre class="brush:php;toolbar:false;"></pre>（比如日志输出块）
单独用 <pre class="brush:php;toolbar:false;"></pre> 看似省事，后期加高亮或做 SSR 渲染时容易踩坑。
真正麻烦的从来不是写几行缩进，而是当别人复制你的代码块到 Markdown、Notion 或 Slack 里，空格全变成单个空格或直接丢弃——所以从第一行开始，就得把 white-space、转义、嵌套这三件事钉死。
