应使用而非或包裹单行代码片段，因其行内、等宽、无障碍友好且兼容高亮库；仅用于需保留换行缩进的多行代码。
单元测试报告里代码片段显示错乱、语义丢失、屏幕阅读器读错，基本都是因为把 当容器用了——它只负责“这是代码”，不负责“怎么排版”。
单行断言或函数名必须用 ，不能套 <pre class="brush:php;toolbar:false;"></pre>
测试报告中频繁出现的 expect()、toBe()、userReducer 这类内容，属于上下文明确的短标识符， 是唯一合规选择。
-
expect(state).toBe(null)✅ 正确：行内、等宽、无障碍友好 -
expect(state).toBe(null)
❌ 错误：是块级元素，会撑开段落行高，破坏报告紧凑性
if (x ❌ 错误：含 <li>别给 <code> 加 <code>white-space: pre-wrap：长断言会溢出容器且基线偏移，影响对齐
多行快照或错误堆栈必须用 组合
Jest 的 .snap 文件内容、Vitest 报错时的堆栈追踪、React Testing Library 的 debug() 输出，都依赖原始缩进和换行—— 单独无法保留这些。
- 正确结构：
<code>exports[`Button renders correctly 1`] = `<button class="primary">Click</button>`;</code>
- 只用
❌：搜索引擎不识别为代码，CI 报告中无法被语法高亮插件捕获
- 只用
❌：所有换行变空格，<code><div><p>text</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>渲染成一行，无法比对 - 缩进统一用 2 个空格（非 Tab）：避免不同终端渲染宽度不一致导致错位
HTML 特殊字符必须手动转义，哪怕只是比较操作符
测试断言里大量出现 x 、<code>type === 'LOAD_SUCCESS'、html & css ——这些符号在 或 <pre class="brush:php;toolbar:false;"><code> 内部不转义，等于主动破坏 HTML 结构。</code></pre>
-
x 10✅ 安全写法 -
x 10❌ 危险：浏览器尝试解析 为标签，后续内容可能消失 <div class="test"> ❌ 必须写成 <code><div class="test"> <li>CI 环境中尤其敏感：某些静态站点生成器（如 Docusaurus）会在构建阶段直接报错退出</li> <h3>别指望 <code> 自动高亮，但必须为高亮库留好接口标签本身不做语法分析，Prism.js 或 highlight.js 要靠 <code> 的 class 或父级 <pre class="brush:php;toolbar:false;"> 的 class 才能触发语言识别。</pre>- 推荐写法：
expect(add(2, 3)).toBe(5);
- 漏掉 class ❌：高亮失效，纯黑底白字，可读性骤降
- 写成
...❌：class 在上无效，高亮库只认 <pre class="brush:php;toolbar:false;"> 或 <code> 的 language-* 类（取决于配置）</code></pre> - 字体必须显式设为等宽：
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace，否则 macOS 和 Windows 渲染差异明显
最常被忽略的是混用边界：有人把整个 Jest 配置对象塞进
，有人把 <code>render()单独包一层。记住唯一判断标准——要不要保留原始换行和缩进。测试报告是机器可读优先的产物，格式错一点，CI 就可能误判失败。
- 推荐写法：
