真正可用的代码块必须用嵌套结构，配合CSS实现语法高亮、浅灰背景、圆角、横向滚动、行号及深色模式适配。
code 标签默认样式太简陋，直接用会丢失可读性
浏览器对 <code> 的原生渲染只有等宽字体和无背景，没有行号、高亮、滚动或语言标识。用户复制时还容易带空格缩进错误，尤其在展示多行 JS 或 HTML 片段时，一眼看不出哪是标签、哪是属性、哪是值。
真正可用的代码块必须包含：语法高亮（哪怕只是基础色）、浅灰背景、左右内边距、圆角、可横向滚动（不换行破坏结构）、行号可选。这些都不是 <code> 自带的，得靠 <pre class="brush:php;toolbar:false;"></code> + <code><code></code> 组合 + CSS 控制。</p>
<H3>pre > code 是唯一可靠的基础结构</H3>
<p>必须用 <code><pre class="brush:php;toolbar:false;"><code>...</code></pre> 嵌套，不能只用 <code> 包多行内容。因为 <pre class="brush:php;toolbar:false;"></code> 保留空白符和换行，<code><code></code> 只负责语义和字体，两者缺一不可。</p>
<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/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>把多行代码塞进单个 <code><code></code> 标签里，导致换行丢失、缩进塌陷</li>
<li>用 <code><div class="code"></code> 替代 <code><pre class="brush:php;toolbar:false;"></code>，结果空格被浏览器合并，JSON 或 HTML 片段完全变形</li>
<li>给 <code><code></code> 直接设 <code>white-space: pre-wrap</code>，但没处理父容器宽度，造成文字溢出或强制换行</li>
</ul>
<p>正确写法示例：</p>
<pre class='brush:php;toolbar:false;'><pre class="brush:php;toolbar:false;"><code class="js">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<h3>关键CSS属性组合：控制尺寸、滚动与视觉隔离</h3>
<p>代码块不是越宽越好。过宽会拉伸阅读视线，过窄又触发不必要的横向滚动。建议限制最大宽度，并让内容可滚动而非折行：</p>
<ul>
<li>
<code>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) 单独覆盖背景和文字色。
