应使用<code>而非<div>或<pre>包裹单行代码片段，因其行内、等宽、无障碍友好且兼容高亮库；<pre>仅用于需保留换行缩进的多行代码。

单元测试报告里代码片段显示错乱、语义丢失、屏幕阅读器读错，基本都是因为把 当容器用了——它只负责“这是代码”，不负责“怎么排版”。

单行断言或函数名必须用 ，不能套 <pre class="brush:php;toolbar:false;">&lt;/H3&gt;&lt;p&gt;测试报告中频繁出现的 &lt;code&gt;expect()&lt;/code&gt;、&lt;code&gt;toBe()&lt;/code&gt;、&lt;code&gt;userReducer&lt;/code&gt; 这类内容，属于上下文明确的短标识符，&lt;code&gt; 是唯一合规选择。&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;code&gt;expect(state).toBe(null)&lt;/code&gt; ✅ 正确：行内、等宽、无障碍友好&lt;/li&gt;&lt;li&gt;&lt;pre class='brush:php;toolbar:false;'&gt;expect(state).toBe(null)</pre> ❌ 错误：<pre class="brush:php;toolbar:false;"> 是块级元素，会撑开段落行高，破坏报告紧凑性&lt;/li&gt;&lt;li&gt;&lt;code&gt;if (x &lt; 0) return true&lt;/code&gt; ❌ 错误：含 &lt; 字符未转义，浏览器解析中断，后续 DOM 可能塌陷&lt;/li&gt;&lt;li&gt;别给 &lt;code&gt; 加 &lt;code&gt;white-space: pre-wrap&lt;/code&gt;：长断言会溢出容器且基线偏移，影响对齐&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;多行快照或错误堆栈必须用 &lt;pre class='brush:php;toolbar:false;'&gt; 组合&lt;/H3&gt;&lt;p&gt;Jest 的 &lt;code&gt;.snap&lt;/code&gt; 文件内容、Vitest 报错时的堆栈追踪、React Testing Library 的 &lt;code&gt;debug()&lt;/code&gt; 输出，都依赖原始缩进和换行——&lt;code&gt; 单独无法保留这些。&lt;/p&gt;&lt;ul&gt;&lt;li&gt;正确结构：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;exports[`Button renders correctly 1`] = `<button class=&quot;primary&quot;>Click</button>`;</pre><li>只用 <pre class="brush:php;toolbar:false;"> ❌：搜索引擎不识别为代码，CI 报告中无法被语法高亮插件捕获&lt;/li&gt;&lt;li&gt;只用 &lt;code&gt; ❌：所有换行变空格，&lt;code&gt;<div><p>text</p></div>&lt;/code&gt; 渲染成一行，无法比对&lt;/li&gt;&lt;li&gt;缩进统一用 2 个空格（非 Tab）：避免不同终端渲染宽度不一致导致错位&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;HTML 特殊字符必须手动转义，哪怕只是比较操作符&lt;/H3&gt;&lt;p&gt;测试断言里大量出现 &lt;code&gt;x < 5&lt;/code&gt;、&lt;code&gt;type === 'LOAD_SUCCESS'&lt;/code&gt;、&lt;code&gt;html &amp; css&lt;/code&gt; ——这些符号在 &lt;code&gt; 或 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt; 内部不转义，等于主动破坏 HTML 结构。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill5117&quot; title=&quot;HTML Extract&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg&quot; alt=&quot;HTML Extract&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill5117&quot; title=&quot;HTML Extract&quot;&gt;HTML Extract&lt;/a&gt; &lt;p&gt;使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill5117&quot; title=&quot;HTML Extract&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;code&gt;x < 5 &amp;&amp; y > 10&lt;/code&gt; ✅ 安全写法&lt;/li&gt;&lt;li&gt;&lt;code&gt;x &lt; 5 &amp;&amp; y &gt; 10&lt;/code&gt; ❌ 危险：浏览器尝试解析 &lt;5 &amp;&amp; y&gt; 为标签，后续内容可能消失&lt;/li&gt;&lt;li&gt;&lt;code&gt;<div class=&quot;test&quot;>&lt;/code&gt; ❌ 必须写成 &lt;code&gt;<div class=&quot;test&quot;>&lt;/code&gt;&lt;/li&gt;&lt;li&gt;CI 环境中尤其敏感：某些静态站点生成器（如 Docusaurus）会在构建阶段直接报错退出&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;别指望 &lt;code&gt; 自动高亮，但必须为高亮库留好接口&lt;/H3&gt;&lt;p&gt;&lt;code&gt; 标签本身不做语法分析，Prism.js 或 highlight.js 要靠 &lt;code&gt; 的 class 或父级 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 的 class 才能触发语言识别。&lt;/p&gt;&lt;ul&gt;&lt;li&gt;推荐写法：&lt;pre class='brush:js;toolbar:false;'&gt;expect(add(2, 3)).toBe(5);</pre></li> <li>漏掉 class ❌：高亮失效，纯黑底白字，可读性骤降</li> <li>写成 <code class="js">... ❌：class 在 上无效，高亮库只认 <pre class="brush:php;toolbar:false;"> 或 &lt;code&gt; 的 language-* 类（取决于配置）&lt;/code&gt;</pre>

字体必须显式设为等宽：font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace，否则 macOS 和 Windows 渲染差异明显

最常被忽略的是混用边界：有人把整个 Jest 配置对象塞进 ，有人把 <code>render() 单独包一层

。记住唯一判断标准——要不要保留原始换行和缩进。测试报告是机器可读优先的产物，格式错一点，CI 就可能误判失败。