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