和 必须嵌套使用： 保留换行与空白符， 提供代码语义、等宽字体及可访问性支持；单独使用任一标签均会导致格式错乱或语义缺失。
为什么 <pre class="brush:php;toolbar:false;"></code> 和 <code><code></code> 要一起用</H3>
<p>单独用 <code><code></code> 不会保留换行和缩进，浏览器会把连续空格/制表符压成一个空格；单独用 <code><pre class="brush:php;toolbar:false;"></code> 缺少语义，不利于可访问性和 SEO。二者嵌套才是标准做法：<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code>...</code></pre>
<p>常见错误是只写 <code><code> 或只写 <code><pre class="brush:php;toolbar:false;"></code>，结果代码要么挤成一行，要么被屏幕阅读器读作“预格式化文本”而非“代码”。</p>
<ul>
<li><code><pre class="brush:php;toolbar:false;"></code> 负责保留空白符和换行</li>
<li><code><code></code> 告诉浏览器这是计算机代码，触发默认等宽字体和语义识别</li>
<li>顺序不能反：必须 <code><pre class="brush:php;toolbar:false;"></code> 包裹 <code><code></code>，否则 CSS 重置可能失效</li>
</ul>
<H3>怎么防止代码块撑破容器或折行错乱</H3>
<p>默认情况下，<code><pre class="brush:php;toolbar:false;"></code> 内容不会自动换行，长行直接溢出容器。加 CSS 是必须的，但要注意属性组合：</p>
<ul>
<li>用 <code>white-space: pre-wrap</code> 替代 <code>pre</code>：保留换行和空格，同时允许折行</li>
<li>配合 <code>overflow-x: auto</code> 提供横向滚动（比折行更保真）</li>
<li>避免用 <code>word-break: break-all</code> —— 它会在任意字符处截断，破坏代码可读性</li>
<li>给 <code><code></code> 设置 <code>font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace</code> 确保等宽</li>
</ul>
<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/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;">pre {
margin: 0;
padding: 1em;
background: #f5f5f5;
overflow-x: auto;
}
pre code {
white-space: pre-wrap;
font-family: Consolas, monospace;
}</pre>
<h3>如何让不同语言的代码有语法高亮</h3>
<p><code><pre class="brush:php;toolbar:false;"><code></code> 本身不带高亮，需要靠 JavaScript 库（如 Prism.js、highlight.js）或手动加 class。关键点在于语言标识必须写在 <code><code></code> 的 <code>class</code> 属性里，不是 <code><pre class="brush:php;toolbar:false;"></pre> 上。
- 正确写法：
<code class="javascript">，不是 <pre class="javascript"></pre>
- Prism.js 识别
language-xxx，highlight.js 识别 lang-xxx 或 language-xxx（看版本）
- 如果用了打包工具（Webpack/Vite），确保高亮库的 CSS 已引入，否则只有颜色 class 没效果
- 服务端渲染时，注意 SSR 输出的 class 是否与客户端 hydrate 一致，否则闪屏
哪些细节容易被忽略导致可访问性问题
<code class="javascript">，不是 <pre class="javascript"></pre>
language-xxx，highlight.js 识别 lang-xxx 或 language-xxx（看版本）代码块不是纯装饰，屏幕阅读器会逐字朗读，所以缺失信息会严重影响理解。
- 必须加
aria-label或aria-labelledby，说明语言和用途，例如：<pre class="brush:php;toolbar:false;" aria-label="Python 函数示例"></pre> - 避免在
<code>里塞 HTML 实体（如<），应直接写原始字符，由<pre class="brush:php;toolbar:false;"></pre>自动转义 - 复制按钮如果存在，要绑定到
<pre class="brush:php;toolbar:false;"></pre>级别，而不是<code>，否则选中范围不准 - 深色主题下检查背景/文字对比度，
#f5f5f5配#333在某些显示器上对比不足
最常漏的是 aria-label 和 white-space 的组合配置——前者影响残障用户，后者影响所有用户看到的换行行为。
