HTML code标签内代码缩进的调整方法-html教程-PHP中文网

必须为设置 white-space: pre-wrap 等属性以保留缩进，仅语义标记；需配置 vs code 的 unformatted 列表并转义 html 实体，再结合 prism/highlight.js 实现高亮与缩进。

html code标签内代码缩进的调整方法

code 标签里缩进失效，其实是 white-space 没配对

直接在 <code> 里写带缩进的 HTML 或 JS 片段，浏览器默认不会渲染出空格层级——不是缩进丢了，是 <code> 的 CSS 行为压制了它。默认 white-space: normal 会合并连续空格、忽略换行，导致所有内容挤成一行。

必须显式设置 CSS 才能保留缩进结构：

white-space: pre：保留所有空格和换行，但不自动换行，宽代码会横向溢出
white-space: pre-wrap（推荐）：保留空格和换行，且允许自动折行，适合文档内嵌代码块
white-space: pre-line：合并连续空格，但保留换行，适合纯文本类代码说明

别用 text-indent——它在 pre 类行为下完全无效。

pre + code 嵌套时，缩进要靠外层 pre 控制

常见写法是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，此时缩进逻辑全由 <pre class="brush:php;toolbar:false;"></pre> 的 white-space 决定，<code> 本身只是语义标记，不参与格式控制。

容易踩的坑：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

只给 <code> 加样式，忽略 <pre class="brush:php;toolbar:false;"></pre> —— 白搭
没给 <pre class="brush:php;toolbar:false;"></pre> 设 overflow-x: auto，长行直接撑破容器
用 <pre class="brush:php;toolbar:false;"></pre> 包含未转义的 HTML（比如 <div>），浏览器会解析标签而非显示源码——必须先做 HTML 实体转义（<code><div>）
VS Code 里编辑 pre/code 内容，缩进会被格式化工具“吃掉”

VS Code 默认对 HTML 文件启用格式化，而 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 在 html.format.unformatted 列表里（默认包含 pre, code, textarea 等），所以格式化时会跳过它们内部——这看似好，实则埋雷：
- 你手动缩进的代码块，在保存后看起来没变，但若某次误删了 unformatted 配置，整块缩进瞬间塌陷
- Prettier 的 htmlWhitespaceSensitivity 设为 "strict" 时，哪怕在 pre 外围，也会干扰内部空白处理
稳妥做法：在 settings.json 显式加固：
```
{
  "html.format.unformatted": ["pre", "code", "textarea", "script", "style"],
  "prettier.htmlWhitespaceSensitivity": "css"
}
```
想让 code 块里的代码也高亮+缩进，得靠 Prism 或 Highlight.js

纯 HTML 的 <code> 不做语法解析，缩进只是空格，高亮更无从谈起。真正要兼顾可读性与专业感，得引入语法高亮库：
- Prism.js：轻量，按需加载语言插件，支持 data-language 自动识别
- Highlight.js：自动检测语言，但体积稍大，<code class="html"> 才能触发 HTML 高亮
注意：这类库依赖原始缩进结构，所以前面三步（CSS 白空格控制 + VS Code 保护配置）仍是前提。否则高亮再炫，缩进一塌糊涂，照样没法看。