整段代码应使用 pre + code 嵌套结构，code 仅用于行内短文本如函数名；pre 保留格式，code 声明语义，须写成 <pre>…</pre> 并添加 language 类便于高亮。
code 标签不是用来放整段代码的
很多人一看到「代码」就下意识用 包裹大段 HTML 或 JavaScript，结果语义错、样式乱、屏幕阅读器读不出来。<code> 是行内标签，只适合标记「一个变量名」「一个函数名」「一个命令」这类短文本，比如 <code>document.getElementById 或 npm install。整段代码该用
嵌套结构。</p><ul><li>单独用 <code> 包裹多行内容，浏览器会强行压成一行，换行和缩进全丢</li><li>没配 <pre class="brush:php;toolbar:false;"> 时，空格会被合并，<code>margin: 0 auto;</code> 可能渲染成 <code>margin:0 auto;</code></li><li>搜索引擎和辅助技术不认为纯 <code> 块是可执行代码，不利于技术文档 SEO 和无障碍访问</li></ul><H3>电子手册里怎么正确嵌套 pre + code</H3><p>操作手册要让用户一眼认出这是可复制的命令或配置，必须保留格式、高亮意图、支持复制。关键不是“看起来像代码”，而是“被当成代码对待”。</p><ul><li><pre class="brush:php;toolbar:false;"> 负责保留换行、空格、缩进；<code> 负责声明这段是计算机代码（语义）</li><li>必须写成 <pre class="brush:php;toolbar:false;"><code>...，不能反过来，也不能漏掉任意一层
class="html" 或 class="js"，方便后续用 Prism.js 等工具做语法高亮例如展示一个 HTML 片段：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>操作手册示例</title> </head> <body> <p>请运行 <code>npm run dev</code></p> </body> </html>
在说明文字中混用 code 和普通文本的边界
手册里常要夹叙夹议：「把 main 元素放在 <body> 内部，但不要嵌套在 header 里」——这种写法对，但容易踩两个坑。
立即学习“前端免费学习笔记（深入）”；
- 标签名如
main、header要加尖括号吗？不加。<main>才表示这个标签，main表示元素名本身；手册里讲结构时用后者更准确 - 路径、命令、属性值都该进
：比如 <code>package.json、aria-label、/usr/local/bin - 别把用户输入值（如“填入你的 API Key”）也套
，那不是代码，是占位符，用 <em> 或斜体更合适</em>
复制功能依赖 code 的干净包裹
很多电子手册加了「一键复制」按钮，底层逻辑就是选中 元素内容。如果里面混了 <strong>、<span> 或多余空格，复制出来就带杂质。</span></strong>
- 确保
内只有纯文本：无换行、无首尾空格、无 HTML 实体（如把 <code>&写成&） - 命令中含参数时，用
npm start -- --port=3000，别写成npm start -- --port = 3000（空格影响执行） - Windows 路径用正斜杠
C:/Users/name更稳妥，避免反斜杠被转义或解析失败
真正难的不是写对标签，而是每次敲 前，先问一句：这东西用户是要复制粘贴执行的，还是仅作名称指代？答案不同，写法就差一层嵌套、一个空格、一对尖括号。
