单独使用<code>标签不能作为代码块，因其为行内元素，会合并空白符、丢失换行缩进，且无语义与高亮支持；必须嵌套于<pre>中，并转义特殊字符、正确设置class与样式。
直接用 <code> 标签无法正确显示多行代码块——它会吃掉换行、压缩空格、忽略缩进，且不支持语法高亮。真正可用的代码块必须是 <pre><code> 嵌套结构，并配合转义与样式。
为什么单独code标签不能当代码块用
<code> 是行内元素，浏览器默认按普通文本渲染：所有连续空白（包括换行、制表符、多个空格）会被合并成单个空格。比如写：
function hello() {
console.log("world");
}
实际渲染效果等价于 function hello() { console.log("world"); }，缩进和换行全丢。这不是 bug，是规范行为。
- 适用场景：仅用于段落中嵌入短标识符，如
useState、npm install - 不可替代
<pre>：后者才是唯一能保留原始格式的 HTML 元素 - 语义缺失风险：搜索引擎和屏幕阅读器无法识别纯
<code>内容为“可执行代码块”
pre 和 code 必须嵌套，且顺序不能错
正确结构只能是 <pre><code class="js">...</code></pre>。漏掉任意一层或颠倒顺序，都会导致问题：
立即学习“前端免费学习笔记（深入）”；
-
<code><pre>...</pre></code>：语义错误，<pre>在<code>内部会被降级为普通文本，高亮库（Prism.js / highlight.js）直接跳过 -
<pre class="js">...</pre>：无<code>，高亮库找不到触发节点，class 被忽略 -
<pre><code>...</code></pre>但没加 class：高亮库无法判断语言类型，可能 fallback 到 plain text 渲染
class 值要匹配高亮库要求：language-javascript 或 js（Prism），javascript（highlight.js），大小写敏感，不能写成 Javascript 或 JS。
代码里的 <、>、& 必须手动转义
如果把未处理的原始代码塞进 <code>，浏览器会把它当 HTML 解析。例如：
if (i < arr.length) { ... }
不转义 < 就变成 <arr.length) { ... }，后续内容被当作标签闭合或属性丢失。常见错误现象：
- 代码截断（最常见）
- 页面意外插入 DOM 元素（比如
<script>触发执行） - 高亮失效（DOM 结构被破坏，
<code>子树不完整）
转义规则只有三条：< → ，<code>> → >，& → &。服务端输出前调 htmlspecialchars()，前端动态插入时用 textContent 赋值，别用 innerHTML。
居中、滚动、响应式这些样式必须分层控制
<pre> 默认宽度由内容撑开，直接设 margin: 0 auto 无效；<code> 是行内元素，text-align: center 对它本身不起作用。
- 居中方案：用外层
<div style="width: 90%; max-width: 800px; margin: 1em auto;">包裹整个<pre><code>，并重置<pre>的默认 margin - 横向滚动：只对
<pre>设overflow-x: auto，不要设在<code>上（它没宽高概念） - 字体与空格：必须设
font-family: monospace和tab-size: 4，否则缩进错位；white-space: pre（<pre>已自带，无需重复） - Flex 居中慎用：若父容器是 Flex，
<pre>需显式设align-self: flex-start，否则可能被拉伸变形
最易被忽略的是：所有样式都该作用在 <pre> 上，<code> 只负责语义和高亮类名，别给它设 width / margin / display:block —— 这会让高亮库注入的 <span> 子元素错位或截断。
