统一修改 标签样式需设置背景色、内边距、等宽字体栈； 套娃结构中清 外边距、背景放 、水平内边距放 ；字体大小用 0.875rem 并加 font-size-adjust；深色模式用 @media (prefers-color-scheme: dark) 调整变量；务必确保字体栈含系统等宽字体。
code 标签默认样式太丑，怎么统一改？
浏览器对 <code> 的默认渲染几乎没做任何美化：无背景、无内边距、字体小且等宽不明显。直接套用会导致代码片段在正文中“陷进去”，视觉上不突出。
最稳妥的做法是给所有 <code> 加基础样式，而不是依赖 class 或额外 wrapper：
- 用
background-color给浅灰或深色背景（如#f6f6f6或#2d2d2d），避免纯白反光 - 必须加
padding，至少0.2em 0.4em，否则文字贴边难读 -
font-family显式设为ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace，兼顾 macos / windows / linux 字体回退 - 别碰
line-height—— 单行<code>里调它容易撑高行距，破坏段落节奏
pre + code 嵌套时，padding 和 margin 怎么配？
真正要展示多行代码块，得用 <pre class="brush:php;toolbar:false;"><code></code> 套娃结构。<code><pre class="brush:php;toolbar:false;"></pre> 负责保留换行和空格，<code> 负责语义和字体。但两者默认都有 margin 和 padding，叠在一起容易过量。
常见错误是只给 <pre class="brush:php;toolbar:false;"></pre> 加背景，结果内边距全靠它扛，导致代码离容器边缘太远；或者只调 <code> 的 padding，却忘了 <pre class="brush:php;toolbar:false;"></pre> 默认有 margin，上下留白失控。
立即学习“前端免费学习笔记（深入）”；
- 清掉
<pre class="brush:php;toolbar:false;"></pre>的margin（设为0），把垂直空间控制权交给外层段落 -
<pre class="brush:php;toolbar:false;"></pre>只负责overflow-x: auto和border-radius，背景也放这里（更稳） <code>专注水平 padding（如1em）和字体，不设上下 padding- 如果需要代码行号，别用
padding-left挤出空位——用伪元素或 flex 布局更可控
字体大小设成 em 还是 rem？移动端怎么不糊？
设成 px 看似省事，但用户缩放页面时，<code> 文字可能卡死不放大，违反可访问性要求。用 em 或 rem 是必须的，但选哪个有讲究。
em 会继承父级 font-size，而文章正文中段落可能是 1.125rem，标题更大，<code> 在不同上下文里字号就飘了；rem 更稳，但要注意根字体是否被重置过（比如某些 css Reset 会设 html { font-size: 100% }，此时 1rem = 浏览器默认 16px）。
- 推荐用
0.875rem（即 14px）起步，比正文略小但可读性强 - 加
font-size-adjust: 0.5防止 fallback 字体过高/过矮（尤其中英混排时） - 移动端别信
viewport里user-scalable=no—— 真实用户仍会双指缩放，确保rem基准没被 js 动态改写 - ios safari 对
monospace字体的 subpixel 渲染偏糊，加-webkit-font-smoothing: antialiased能改善
深色模式下背景和字体颜色怎么自动切换？
硬写两套 class 切换太累，也容易漏。现代方案是直接用 @media (prefers-color-scheme: dark)，但有几个坑得提前踩明白。
不是所有深色主题都适合同一种代码背景色。比如 #1e1e1e 在 OLED 屏上太黑，文字发灰；而 #2d2d2d 又可能和深色正文区分不开。字体颜色也不能简单用白色——高亮语法时黄色、青色在纯白底上很亮，在深灰底上就发脏。
- 背景别用纯黑：
background-color: #252525比#000更柔和 - 字体主色用
#e0e0e0（非纯白），注释色用#6a6a6a（非浅灰），对比度才达标 - 别只改
<code>，<pre class="brush:php;toolbar:false;"></pre>的border和border-radius也要同步调整 - 如果项目用了 CSS 变量（如
--code-bg），记得在媒体查询里重定义变量值，而不是重复写属性
该配的都配了，但最容易被忽略的是：**字体堆栈里没包含系统自带的等宽字体，或者 fallback 到了非等宽字体（比如 Times New Roman），这时候再调 padding 和 background 都白搭——代码列根本对不齐**。