正确嵌套是…，保留空白与换行，提供语义；仅用其一会导致格式或可访问性问题；美化需css控制背景、等宽字体、内边距及行号方案。
pre 和 code 标签到底该谁包谁？
绝大多数人写反了：<pre class="brush:php;toolbar:false;"></pre> 是容器，<code> 是语义标签，正确嵌套是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>。只用 <code> 不会保留换行和空格；只用 <pre class="brush:php;toolbar:false;"></pre> 缺少语义，对屏幕阅读器和 SEO 不友好。
常见错误现象：代码缩进消失、多行变一行、复制时带多余空行。
-
<pre class="brush:php;toolbar:false;"></pre>负责保留空白符和换行，但不声明内容类型 <code>告诉浏览器“这是计算机代码”，影响字体、语义和辅助技术- 必须嵌套，不能并列或颠倒
怎么让代码块真正“漂亮”？关键就三件事
纯 HTML 默认样式很朴素，要好看得靠 CSS 控制。重点不在花哨，而在可读性与一致性。
- 给
<pre class="brush:php;toolbar:false;"></pre>设固定背景色（如#f5f5f5）和圆角border-radius - 给
<code>设等宽字体（font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace） - 控制内边距：
<pre class="brush:php;toolbar:false;"></pre>用padding留白，<code>用display: block避免 inline 换行错位
示例最小可用样式：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
pre {
background: #f5f5f5;
border-radius: 4px;
padding: 1rem;
margin: 1rem 0;
}
pre code {
display: block;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
font-size: 0.95rem;
line-height: 1.5;
}
要不要加行号？别硬塞 JS，先看这个 CSS 方案
用 JavaScript 动态插入行号容易出错、影响 SSR 和首屏渲染。现代 CSS 的 counter() + ::before 完全能搞定，且零 JS 依赖。
- 给
<code>加counter-reset: line; - 用
code .line::before或按换行拆分的span触发计数（需预处理换行） - 更稳妥的做法：服务端/构建时把每行包进
<span class="line"></span>，再用.line::before { counter-increment: line; content: counter(line); }
注意：CSS 行号无法选中复制，如果业务强依赖复制完整代码，就得用 JS 或放弃行号。
遇到 pre 里文字溢出、滚动难看怎么办？
默认 white-space: pre 会让长行直接撑破容器。不推荐简单加 overflow-x: auto —— 滚动条遮挡末尾字符、移动端体验差。
- 优先用
white-space: pre-wrap（在<code>上设），允许折行但保留原有换行 - 若必须水平滚动，给
<pre class="brush:php;toolbar:false;"></pre>加overflow-x: auto和overflow-y: hidden，再用padding-bottom预留滚动条空间 - 移动端慎用横向滚动，考虑用
word-break: break-all或overflow-wrap: anywhere替代
容易被忽略的一点：<pre class="brush:php;toolbar:false;"></pre> 默认有 margin，和周围段落间距不一致，务必重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
