应使用 标签包裹单行代码片段，如函数名、变量或简短表达式；多行代码须用 嵌套组合，并转义 html 特殊字符；避免手动高亮，推荐 prism.js 等库处理语法着色。
用 标签包裹单行代码片段
当只展示一个函数名、变量或简短表达式时， 标签是最轻量且语义正确的选择。它默认是行内元素，不会换行，也不会保留空格和缩进。
常见错误是把多行代码硬塞进 ：比如写 <code>function foo() {\n return true;\n} —— 换行符会被浏览器忽略，显示成一行且缺少缩进，可读性差。
正确做法只用于真正“单行”的上下文：
- 文档中提到了
console.log()，需要突出这个函数名 - 说明某个配置项如
maxRetries的默认值 - 在段落里引用命令如
npm install --save-dev eslint
用 嵌套组合展示多行可读代码
保留原始换行与空格，<pre class="brush:php;toolbar:false;"> 提供语义标记——两者嵌套才是展示完整代码块的标准写法。单独用 <pre class="brush:php;toolbar:false;"> 缺少语义，单独用 <code> 无法维持格式。 <p>注意点：</p> <ul><li>必须是 <pre class="brush:php;toolbar:false;"><code>…</code>，顺序不能反；
pre
是块级容器，是其子元素
<div> 而不是 <code><div>
<li>如果从代码文件直接复制粘贴，建议先用工具转义（例如在线 HTML 实体编码器），或手动替换 、> → <code>>、& → &
示例：
function greet(name) {
if (!name) {
return 'Hello, world!';
}
return `Hello, ${name}!`;
}
避免用 或 <pre class="brush:php;toolbar:false;"> 模拟代码高亮
原生 HTML 不支持语法着色。 和 <pre class="brush:php;toolbar:false;"> 只负责结构和格式，不处理颜色、关键字加粗等。强行用 <font color="blue">if</font> 这类方式拼凑高亮，会带来三个问题：</pre>
- 维护成本高：每次改代码都要同步改一堆 标签
- 可访问性差：屏幕阅读器无法识别语义，颜色对色弱用户不可见
- 响应式失效：内联样式难以适配不同字体或深色模式
真实项目中，应交给专门的高亮库（如 Prism.js 或 Highlight.js）处理，它们通过 JS 自动分析并注入 class，再配合 CSS 控制样式。手写 是退化方案，仅限极简静态页且无维护要求时临时应付。
注意 标签在不同上下文中的渲染差异
默认使用等宽字体（如 <code>monospace），但具体字体族取决于浏览器和系统设置。如果你发现代码显示歪斜或字符宽度不一致，可能是因为父容器设置了 <code>font-family 覆盖了默认值。
安全做法是显式重置：
code,
pre code {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}
这段 CSS 能覆盖多数现代系统，同时兼容 macOS、Windows 和 Linux 的默认等宽字体。别漏掉 pre code 这个组合选择器——否则
<pre class="brush:php;toolbar:false;"> 块里的字体可能被 <pre class="brush:php;toolbar:false;"> 的样式干扰。 <p>另外，<code> 不会自动换行，长代码行可能撑破容器。加 <code>white-space: pre-wrap</code></code></p>或
word-break: break-all 是常见补救，但会破坏代码可读性，优先考虑限制容器宽度或启用水平滚动。
