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

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><code>...</code></pre>，此时缩进逻辑全由 <pre> 的 white-space 决定，<code> 本身只是语义标记，不参与格式控制。

立即学习“前端免费学习笔记（深入）”；

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

容易踩的坑：

• 只给 <code> 加样式，忽略 <pre> —— 白搭
• 没给 <pre> 设 overflow-x: auto，长行直接撑破容器
• 用 <pre> 包含未转义的 HTML（比如 <div>），浏览器会解析标签而非显示源码——必须先做 HTML 实体转义（<div>） <h3>VS Code 里编辑 pre/code 内容，缩进会被格式化工具“吃掉”</h3> <p>VS Code 默认对 HTML 文件启用格式化，而 <code><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 保护配置）仍是前提。否则高亮再炫，缩进一塌糊涂，照样没法看。