行内代码必须用 ，不可用 ； 语义正确、排版安全、屏幕阅读器友好； 是块级元素会破坏行距；禁用 white-space: pre；html 特殊字符须转义。
单行代码必须用 ，不能塞进 <pre class="brush:php;toolbar:false;">
直接在段落里提函数、命令或变量时， 是唯一语义正确且排版安全的选择。比如写“调用 <code>fetch() 时要传 <code>AbortSignal”，浏览器会以等宽字体渲染，行高正常，屏幕阅读器读作“fetch 函数”。
-
fetch()✅ 正确：行内、语义清晰、不撑开上下文行距 -
fetch()
❌ 错误：是块级元素，默认带 margin，插在段落中会让文字上下留白异常
- 别给
加 <code>white-space: pre：它会让长命令横向溢出容器，且基线和周围文本对不齐 - HTML 特殊字符必须转义：想写
x ，得写成 <code>x ，否则浏览器尝试解析
多行代码必须用 嵌套，缺一不可
标签本身不保留换行、缩进或连续空格——这是它的设计行为，不是 bug。你写成：
<pre class="brush:php;toolbar:false;"><code>function add(a, b) {
return a + b;
}</code>
实际渲染出来就是 function add(a, b) { return a + b; }
- 正确结构是
function add(a, b) { return a + b; }：其中保格式，<pre class="brush:php;toolbar:false;"> 定语义
- 单独用
→ 屏幕阅读器读作“预格式化文本”，不是“JavaScript 代码”
- 单独用
→ 格式全崩，缩进和换行消失 - 如果要用语法高亮（如 highlight.js），必须加
class 到 <code> 标签上，例如 <code class="js">
里的 HTML 字符不转义，页面就可能崩溃
只要 或 <pre class="brush:php;toolbar:false;"><code> 内容含 、&，就必须手动转义。漏掉一个
<ul><li><code><div class="box"> ✅ 正确：浏览器原样显示
<li><code><div class="box"> ❌ 危险：浏览器尝试解析为标签，<div>
<li>转义不是可选项：哪怕只是写个比较表达式 <code>if (x >= 0)</code>，也得写 <code>>=</code>
</li>
<li>编辑器里复制代码后，建议先过一遍正则替换：& → &， → ></li>
<h3>样式和可访问性容易被忽略的硬约束</h3>
<p></p>
<pre class="brush:php;toolbar:false;"> 默认用等宽字体，但不同系统默认字体差异大；它也不自动处理长文本折行或滚动。这些不是“锦上添花”，而是影响可用性的关键点。
</pre>
<ul>
<li>必须显式设置 <code>font-family：推荐 <code>ui-monospace, 'SFMono-Regular', Consolas, monospace，比只写 monospace 更稳
要加 <code>overflow-x: auto</code>，否则长代码行直接撑破容器
要设 <code>display: block（当它在 内时），否则不响应父级宽高与滚动控制
真正难的是边界判断——不是看“代码行数”，而是问“要不要保留原始换行和缩进”。一个 1 行的 Shell 命令带管道符，也得用
<code>；而一个 3 行的 <code>useState()</code> 调用，只要没换行需求，<code> 就够了。</code></code>
