单用加背景色会失败，因code是行内元素，导致内边距失效、长行溢出、缩进错位；须用pre包裹code，pre设背景/圆角/滚动，code设display:block/字体/tab-size，且class命名规范、内容转义、缩进统一。
为什么单用加背景色会失败</H3>
<p>直接给<code>设<code>background-color
、color或border-radius，看起来能上色，但实际会出三类问题：一是display: inline导致内边距撑不开、圆角被裁切；二是长代码行直接溢出容器，没有滚动条；三是缩进错位——tab-size和white-space默认不生效，Python 或 YAML 一粘贴就全乱。根本原因在于：是行内元素，不负责格式保留，也不响应块级排版规则。</p>
<H3>深色代码块必须用<code>pre
包裹code
深色背景不是靠“颜色深”实现的，而是靠结构分工：pre提供容器、背景、滚动和尺寸控制；code专注语义、字体和语法高亮注入点。缺一不可。
-
pre上设background-color: #1e1e1e、color: #d4d4d4、padding: 1em、border-radius: 6px、overflow-x: auto -
code必须设display: block（否则不占满pre宽度）、font-family: ui-monospace, 'SFMono-Regular', monospace、tab-size: 4 - 别给
code单独设background-color，否则和pre背景叠加，边缘发虚或出现双层阴影
深色模式下codeclass命名要规范
如果你用 Prism.js 或 highlight.js 做语法高亮，class 名写错就等于没高亮。深色背景对对比度更敏感，颜色失效会直接导致可读性归零。
- 推荐写法：
<pre><code class="javascript">或<code class="js">（Prism 支持简写） - 避免写成：
Javascript、JS、javascript-code——大小写、连字符、前缀缺失都会让高亮库跳过该块 - 如果用 highlight.js，必须确保在 DOM 加载后调用
hljs.highlightAll()，否则深色背景有了，文字还是灰的
容易被忽略的转义与缩进细节
深色背景下，错误更刺眼：未转义的<变成标签、&被解析为空格、Tab 缩进在 Safari 里变 8 格……这些不是样式问题，是结构崩塌。
立即学习“前端免费学习笔记（深入）”；
- 所有代码内容里的
<、>、&必须手动转义为、<code>>、& - 缩进统一用空格（2 或 4 个），禁用 Tab——不同浏览器对
tab-size支持不一致，深色主题下错位一眼可见 - 如果代码含中文或 emoji，确认字体栈包含
system-ui或Segoe UI Emoji，否则方块乱码在深色底上格外扎眼
