<code>标签不能直接套代码块，因为它是行内元素，不保留换行和缩进；必须嵌套在<pre>中，并对<、>、&等字符转义，才能正确显示多行代码。
为什么标签不能直接套代码块</H3>
<p>很多人一看到“显示代码”就立刻写<code>console.log('hello')，结果换行和缩进全丢了——是行内语义标签，只负责标记“这段文字在逻辑上是一段代码”，不保留空白符或换行。浏览器会像处理普通文本一样折叠空格和回车。</p>
<p>常见错误现象：<code>标签里塞多行JS、HTML结构或命令行输出，渲染后变成挤在一起的一长串。</p>
<ul>
<li>必须配合<pre class="brush:php;toolbar:false;">使用：<pre class="brush:php;toolbar:false;">保留原始格式，<code>提供语义，二者嵌套才是标准解法</li>
<li>单独用<code>只适合短小片段，比如函数名<code>fetch
、属性名tabIndex、文件路径/src/utils.js
但没转义<、>、&等字符，浏览器会尝试解析它们，导致代码被截断或报错</li> </ul> <H3>如何正确转义特殊字符再放进<code></H3> <p>HTML解析器看到<code><div class="btn"></div>时，会把
<div>当作真实标签开始解析，后面内容就乱了。必须把、&替换成对应HTML实体。
<p>手动转义规则简单但易漏：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>
<code>< 替代 > 替代 >
& 替代 &
"
示例（正确）：
<button type="button" onclick="alert('OK')">Click</button>
搭配CSS让块真正可读</H3>
<p>光有<code>和<pre class="brush:php;toolbar:false;">只是“能显示”，要“好读”还得加样式。关键不是花哨，而是解决三个实际问题：字体不等宽看不清、背景太亮伤眼、长行不换行溢出。</p>
<p>最小可用CSS配置（建议加到全局样式中）：</p>
<pre class='brush:php;toolbar:false;'>pre {
background-color: #f6f8fa;
padding: 12px;
border-radius: 4px;
overflow-x: auto;
}
code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.95em;
}
pre code {
display: block;
white-space: pre;
line-height: 1.5;
}
font-family必须指定等宽字体栈，避免系统 fallback 到宋体/黑体-
overflow-x: auto比word-wrap: break-word更可靠，尤其对URL、base64等无空格长串
- 不要给
加<code>padding，所有留白由pre控制，否则嵌套后内边距叠加
什么时候该用而不是<kbd>或<samp></H3>
<p>三者语义不同，混用会让屏幕阅读器误读、SEO 工具降权。选错不只难看，还影响可访问性。</p>
<ul>
<li><code>表示“计算机代码”：函数名<code>JSON.parse
、CSS 属性display: flex、命令npm install
font-family必须指定等宽字体栈，避免系统 fallback 到宋体/黑体overflow-x: auto比word-wrap: break-word更可靠，尤其对URL、base64等无空格长串加<code>padding，所有留白由pre控制，否则嵌套后内边距叠加
而不是<kbd>或<samp></H3> <p>三者语义不同，混用会让屏幕阅读器误读、SEO 工具降权。选错不只难看，还影响可访问性。</p> <ul> <li><code>表示“计算机代码”：函数名<code>JSON.parse、CSS 属性
display: flex、命令npm install
samp>Error: ENOENT</samp>，不是你写的代码，是它吐出来的</li> </ul> <p>容易被忽略的地方：文档里贴一段 curl 命令，如果只写<code>curl -X GET https://api.example.com，屏幕阅读器会读作“代码 curl 减 x 空格 g e t 空格 h t t p s ...”，而加上curl +
-X GET + https://...分段，才能准确传达操作意图。语义粒度，得细到每个词。
