必须用 pre 包裹 code，pre 负责背景色与容器样式，code 负责语义、字体与语法高亮；单独使用任一标签都会导致语义缺失、换行异常或高亮失效。
直接加 CSS 就能实现颜色效果，但只靠 pre 或只靠 code 都会出问题——前者没语义，后者不换行，颜色样式容易错配或失效。
为什么不能只给 pre 加背景色？
单纯给 pre 设 background-color 确实能上色，但副作用明显：
-
pre不声明“这是代码”，屏幕阅读器读作“预格式化文本”，不是“Python 代码块” - 如果页面里还有 ASCII 艺术、日志输出、诗歌等也用了
pre，它们全会被染上同一种背景色 - 语法高亮库（如 Prism.js）通常只扫描
pre > code结构，没code标签，高亮逻辑压根不触发
正确写法：必须用 pre 包裹 code，再统一设色
颜色控制要落在 pre 上（负责容器和背景），同时保留 code 的语义和字体继承：
- 给
pre加background-color、border-radius、padding—— 这是视觉区块的底色和形状 - 给
code设font-family: ui-monospace, 'SFMono-Regular', monospace和display: block—— 确保等宽字体生效且不被行内特性干扰 - 别给
code单独设background-color，否则可能和pre的背景冲突，出现双层色块或边框错位
示例最小可用样式：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
pre {
background-color: #f6f6f6;
border-radius: 4px;
padding: 1em;
overflow-x: auto;
}
pre code {
display: block;
font-family: ui-monospace, 'SFMono-Regular', monospace;
}
颜色类名该加在 pre 还是 code 上？
加在 code 上更合理，原因很实际：
- 语法高亮工具（如 highlight.js）靠
code的class（如language-js）识别语言，进而注入对应颜色规则 - 如果把
language-python写在pre上，多数高亮库会忽略——它们默认只监听code元素 - 你可以同时用：
<pre class="brush:php;toolbar:false;"><code class="python">...</code></pre>，这样语义、高亮、自定义背景三者互不干扰
容易被忽略的细节：颜色和缩进、换行必须协同处理
只加颜色不处理排版，颜色再好看也白搭：
- 没设
tab-size: 4，从 VS Code 复制的 Python 缩进在 Safari 里可能变成 8 格，颜色块内文字错位 - 没设
white-space: pre或pre-wrap，长代码行会撑破容器，背景色被截断 - 没转义
、<code>>、&，浏览器真去解析标签，颜色块里突然弹出一个<div> 渲染结果，而不是你写的字符串 <p>最终效果是否可靠，不取决于颜色多炫，而在于 <code>pre和code是否各司其职、缺一不可。
