真正可用的代码块必须用嵌套结构，配合CSS实现语法高亮、浅灰背景、圆角、横向滚动、行号及深色模式适配。
code 标签默认样式太简陋，直接用会丢失可读性
浏览器对 <code> 的原生渲染只有等宽字体和无背景，没有行号、高亮、滚动或语言标识。用户复制时还容易带空格缩进错误，尤其在展示多行 JS 或 HTML 片段时，一眼看不出哪是标签、哪是属性、哪是值。
真正可用的代码块必须包含：语法高亮（哪怕只是基础色）、浅灰背景、左右内边距、圆角、可横向滚动（不换行破坏结构）、行号可选。这些都不是 <code> 自带的，得靠 <pre class="brush:php;toolbar:false;"></pre> + <code> 组合 + CSS 控制。
pre > code 是唯一可靠的基础结构
必须用 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 嵌套，不能只用 <code> 包多行内容。因为 <pre class="brush:php;toolbar:false;"></pre> 保留空白符和换行，<code> 只负责语义和字体，两者缺一不可。
常见错误包括：
- 把多行代码塞进单个
<code>标签里，导致换行丢失、缩进塌陷 - 用
<div class="code"> 替代 <code><pre class="brush:php;toolbar:false;"></pre>，结果空格被浏览器合并，JSON 或 HTML 片段完全变形 - 给
<code>直接设white-space: pre-wrap，但没处理父容器宽度，造成文字溢出或强制换行
正确写法示例：
<pre class="brush:php;toolbar:false;"><code class="js">function greet(name) {
return `Hello, ${name}!`;
}</code>
关键CSS属性组合：控制尺寸、滚动与视觉隔离
代码块不是越宽越好。过宽会拉伸阅读视线，过窄又触发不必要的横向滚动。建议限制最大宽度，并让内容可滚动而非折行：
-
max-width: 720px（适配主流屏幕，留出左右边距） -
overflow-x: auto（必须加在<pre class="brush:php;toolbar:false;"></pre>上，不是<code>） -
padding: 1rem 1.25rem（左右留白防贴边，上下留空呼吸） -
background-color: #f6f8fa（浅灰蓝比纯白更护眼，也区分正文） -
border-radius: 6px（圆角软化边界，避免生硬直角） -
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace（优先系统等宽字体）
注意：line-height 设为 1.4～1.5，太小挤，太大断行感强；tab-size: 4 确保缩进统一。
行号和语言标识要轻量，别依赖JS插件
很多博客强行引入 Prism.js 或 Highlight.js，只为加行号和高亮——但个人博客静态页根本不需要运行时解析。用纯 CSS + 少量 HTML 就能模拟基本效果：
- 行号用伪元素
::before配合counter-increment实现，无需额外 DOM - 语言标识用
class="html"这类约定，CSS 里用属性选择器匹配，比如pre[class*="language-"]::before - 高亮靠基础色即可：
keyword蓝、string红、comment灰绿，不用全语法树解析
最易忽略的一点：深色主题下，代码块背景必须同步切换。别只改文字颜色，否则浅灰背景+深灰文字=看不见。用 @media (prefers-color-scheme: dark) 单独覆盖背景和文字色。
