标签只用于短小技术名词，如 fetch()、os.path.join()；不可用于函数体或 json 等多行代码，否则丢失缩进且影响可访问性；含特殊字符需转义，如 if (x < 10)。
什么时候该用 而不是 <pre class="brush:php;toolbar:false;">
只在句子中提一个短小的技术名词时用 ：比如 <code>fetch()、<code>os.path.join()、npm install、userProfile。它默认是行内元素，不换行、不保留空格缩进，嵌在段落里刚好合适。
- 错误做法：把整个函数体或 JSON 片段塞进
里——浏览器会压成一行，缩进全丢，屏幕阅读器会当成“一个变量名”读，而不是可执行代码
- 含 必须转义：
if (x ✅，<code>if (x ❌（会被解析为标签） 不负责格式保留，所以别指望它自动对齐或换行；CSS 的 <code>white-space对它基本无效
<pre class="brush:php;toolbar:false;"> 是展示多行代码的唯一合规写法
要展示带缩进、换行、多行结构的代码（如函数定义、配置片段、命令输出），必须用
<code> 组合，不能只用 <pre class="brush:php;toolbar:false;"> 或只用 <code>。 <ul> <li><pre class="brush:php;toolbar:false;"> 负责保留空格和换行，<code> 负责声明“这是代码”——缺一不可。否则 SEO 无法识别，屏幕阅读器可能读作“预格式文本”而非“源码”</code>
function hello() { console.log('hi'); }
<pre class="brush:php;toolbar:false;">if (x → 漏转义
if (x
HTML 特殊字符必须手动转义，哪怕用了 <code></code>
只管空白符，不管标签解析。浏览器先解析 HTML 结构，再渲染内容。漏转义会导致 DOM 破坏，轻则内容消失，重则页面崩溃。
- 所有
、<code>>、&都得写成对应 HTML 实体 - 常见陷阱：
<div class="box"> ✅，<code><div class="box"> ❌ <li>复杂内容（如带 JSX 或模板语法的代码）建议用服务端转义或构建时处理，手写极易出错</li> <h3>样式与可访问性容易被忽略的关键点</h3> <p>单独加 background 或 font-family 并不能让 </p> <pre class="brush:php;toolbar:false;"> 或 <pre class="brush:php;toolbar:false;"><code> 变成“可用的代码块”。真正影响体验的是三件事：等宽字体保障、横向溢出控制、语义完整性。 <ul><li>必须显式设 <code>font-family: monospace</code> </li></ul></code></pre>，否则某些系统下 <pre class="brush:php;toolbar:false;"> 默认字体非等宽 </pre></pre> <li> <pre class="brush:php;toolbar:false;"> 容器需加 <code>overflow-x: auto</code></pre> 防止长行撑破布局</li> <li>别用 <code><tt></tt>或<span></span>替代，它们没有代码语义，对读屏器和搜索引擎无效 - 语法高亮库（如 Prism.js）依赖
<code> 结构识别语言，改结构等于废掉高亮</code>
