Bootstrap 覆盖 pre 样式时，需用更高权重选择器（如 pre.code-block）覆盖背景与边框；补充中文字体、设 font-weight: 400 和 line-height: 1.6 提升可读性；暗色主题下需手动适配 pre 及其子元素颜色。
pre 标签背景色被 Bootstrap 覆盖怎么办
Bootstrap 默认给 <pre class="brush:php;toolbar:false;"></pre> 加了 background-color: #f8f9fa 和 border: 1px solid #dee2e6，想换深色背景或去掉边框，光写 pre { background: #1e1e1e; } 很可能不生效——因为 Bootstrap 的选择器权重更高（比如用 pre[class] 或带 .pre-scrollable 类）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用更具体的选择器覆盖，比如
pre.code-block, pre[class*="language-"] { background: #1e1e1e !important; border: none; } - 避免滥用
!important，优先在自定义 CSS 文件中放在 Bootstrap 引入之后加载 - 检查浏览器开发者工具里，是不是
pre被套在<figure></figure>或<div class="highlight"> 里——真正需要改的是外层容器的背景，不是 <code>pre自身字体太细、行高太挤，代码看不清
Bootstrap 默认用
font-family: SFMono-Regular, Menlo, Monaco, Consolas，但没设font-weight，在某些系统上会渲染成极细的 300 字重；line-height是1.5，对多行代码容易粘连。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制设为等宽中等字重：
pre { font-family: "SFMono-Regular", "Fira Code", "Consolas", monospace; font-weight: 400; line-height: 1.6; } - 如果用了 Fira Code、JetBrains Mono 这类编程字体，记得在
font-family里把它们放前面，并确保已正确引入（@font-face 或 CDN） - 别只改
pre，也顺手加一句code { font-weight: 400; }，否则行内代码可能还是发虚
pre 里中文或 emoji 显示方块或错位
默认字体栈里缺少中文字体支持，尤其 macOS 上 SFMono 不支持中文，Windows 上 Consolas 也不行，结果就是
pre里中文变方块、emoji 换行错乱、全角空格塌陷。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
font-family末尾补上系统中文字体："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 加
font-feature-settings: "liga" 0;关闭连字（Fira Code 等字体开启连字后，中文标点可能异常） - 设
white-space: pre-wrap;替代默认的pre，让长代码行自动换行，同时保留缩进和空格
暗色主题下 pre 背景还是白的
很多项目用
data-bs-theme="dark"或手动切body.dark，但 Bootstrap 并不会自动改pre的背景——它只管.bg-dark这类工具类，<pre class="brush:php;toolbar:false;"></pre>是语义标签，不在主题响应范围内。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写媒体查询或属性选择器：
body[data-bs-theme="dark"] pre { background: #2d2d2d; color: #f8f8f2; } - 如果用 CSS 变量，提前定义好：
:root { --bs-pre-bg: #f8f9fa; --bs-pre-color: #212529; }，再在 dark 主题下重置 - 注意
pre > code的颜色继承问题：即使pre背景变暗，code内部若硬编码了color: #333，依然会看不清
最麻烦的其实是嵌套——比如 Markdown 渲染器输出的
pre > code > span.token.string，这时候单改pre根本没用，得一层层查 computed styles 找真正起作用的节点。改之前，先右键「检查」，别猜。 - 强制设为等宽中等字重：
