<code>标签不能保留换行和缩进，因其为行内元素，会折叠空白符；多行配置须用<pre><code>嵌套，<pre>保格式、<code>表语义，并需转义<、>、&等特殊字符。
code 标签本身不能保留换行和缩进
<code> 是行内元素，浏览器会把内部的换行、多余空格全部折叠成单个空格。直接把配置文件内容塞进去，比如 nginx.conf 或 .env，格式全乱：多行变一行，缩进消失，根本没法看。
实操建议：
- 用
<pre>包裹<code>，即<pre><code>...</code></pre></li> <li><code><pre>
保留原始空白符（换行、空格、制表符），<code>则语义化标记这是“一段代码/配置”，两者配合才合理 - 避免只用
<pre>不套<code>—— 丢失语义，对可访问性（如屏幕阅读器）和 SEO 不友好
配置内容要转义特殊字符
配置文件里常含 <、>、&，比如 php.ini 中的 output_buffering = 4096 没问题，但若出现 error_log = /var/log/php/<date>.log，不转义就会被浏览器当成标签解析，直接消失或报错。
必须手动转义（服务端渲染时也一样）：
立即学习“前端免费学习笔记（深入）”；
-
<→ -
>→> -
&→& - 其他如
"、'在属性值中才需转义，纯文本内容里通常不用
别依赖 JavaScript 动态插入再转义——容易漏、有执行时序风险；静态 HTML 就该在写入前完成转义。
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
避免在 code 标签里写大段配置导致页面卡顿
超过 100 行的 docker-compose.yml 或 webpack.config.js 直接放进 <pre><code>，可能触发浏览器重排压力，尤其在低端设备上滚动卡顿明显。
缓解方式：
- 加
style="max-height: 400px; overflow-y: auto;"给<pre>，限制高度并启用滚动条 - 禁用用户误选（比如双击选中整块）：
style="user-select: text;"（默认是text，但某些 CSS 重置会改掉） - 真要展示超长配置，考虑用
<details><summary>折叠，默认收起，点开才加载（注意：仍需提前转义）
语言类型提示要用 code 的 class 属性，不是 lang
<code> 标签没有 lang 属性；HTML 规范中，lang 描述的是内容语言（如 zh、en），不是编程语言。想让语法高亮工具（如 Prism.js、highlight.js）识别类型，得靠 class：
- 正确：
<code class="yaml">（对应docker-compose.yml） - 错误：
<code lang="yaml">（无效，高亮库不认） - 常见 class 值：
language-json、language-ini、language-bash、language-toml
没引入高亮库时，class 至少能让你用 CSS 单独控制样式，比如给 language-json 加蓝灰底色。
真正麻烦的是混合场景：配置里嵌了变量（如 ${PORT}）、或需要运行时替换占位符——这时已超出纯 HTML 能力范围，得靠模板引擎或 JS 渲染，且必须确保转义时机早于插入 DOM。
