正确显示代码缩进需用组合：pre保留空白符，code仅语义化；html标签须转义为</>；还需css设置white-space: pre-wrap、overflow-x: auto和font-family: monospace。
code 标签本身不处理缩进，必须配合 pre
code 只是语义化标记“这段是代码”，它**完全不保留换行或空格**，也不会渲染缩进。直接写 <div><p>text</p></div>，浏览器会把它压成一行显示，所有空格和换行都被忽略。真正起作用的是 pre：它强制保留原始空白符（包括空格、Tab、换行），是缩进能被看见的唯一基础。
所以正确组合永远是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，不能只用 code，也不能把 pre 漏掉。
pre 里的 HTML 片段必须转义尖括号
如果你在 pre 里直接写未转义的 HTML 标签，比如：
<pre class="brush:php;toolbar:false;"><code><div><p>hello</p></div></code>
浏览器会把它当作真实 DOM 解析——<div> 被当成开始标签，<code>
被当成结束标签，
pre 内容实际只剩
<p>hello</p>，缩进全丢。
必须把 和 <code>> 替换成 HTML 实体：
最终应写成：<div><p>hello</p></div>
pre 默认样式会让缩进“看不见”
即使你用了 pre + 转义 + 正确空格，缩进仍可能显示异常：字体变小、横向溢出、行高塌陷、空格被压缩。这不是缩进没生效，是浏览器默认 CSS 压制了效果。
必须加最小 CSS 修复：
-
white-space: pre-wrap —— 保留空格和换行，同时允许自动折行（推荐）
-
overflow-x: auto —— 宽代码不撑破容器，出现横向滚动条
-
font-family: monospace —— 确保等宽字体，缩进对齐才可靠
不要给 pre 设 text-indent：它在 white-space: pre* 下无效。
VS Code 里编辑 pre/code 内容容易踩的坑
在编辑器里手动写带缩进的代码片段时，常见问题不是逻辑错，而是格式被“悄悄破坏”：
- 复制粘贴进
pre 的 HTML 没转义，直接变成可执行标签
- 编辑器自动格式化（如 Prettier）会删掉
pre 里的多余空格或换行，尤其当 htmlWhitespaceSensitivity 设为 "strict" 时
- 按 Tab 键插入的是 Tab 字符，但
pre 渲染时宽度依赖编辑器设置，协作中可能错位；建议统一设 "editor.insertSpaces": true 和 "editor.tabSize": 2，确保缩进是固定空格数
- 别在
pre 外层再套 p 或 div（除非加了 display: block），否则默认 margin 会干扰垂直间距
最稳的做法：先在外部编辑器写好已转义、带空格缩进的代码，再整体粘贴进 <pre class="brush:php;toolbar:false;"><code></code>，之后关掉对该区域的自动格式化（可用 <code>// prettier-ignore</code> 注释包裹）。</pre>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
