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