Bootstrap 5 默认 字体颜色为 #212529， 继承该颜色并添加 #f8f9fa 背景；修改需分别覆盖 的 color 和 的 background-color 及嵌套 code 样式。

Bootstrap 5 默认的 <code> 和 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 字体颜色是什么&lt;/H3&gt; &lt;p&gt;Bootstrap 5 给 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 设了 &lt;code&gt;color: #212529&lt;/code&gt;（深灰），&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 则继承自 &lt;code&gt;color: #212529&lt;/code&gt;，同时加了 &lt;code&gt;background-color: #f8f9fa&lt;/code&gt;。这不是“代码高亮”，只是基础文本色 —— 所以你改不改它，都得覆盖这两层样式。&lt;/p&gt; &lt;H3&gt;直接覆盖 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 的字体颜色（最常用）&lt;/H3&gt; &lt;p&gt;如果你只改内联代码（比如 &lt;code&gt;&lt;code&gt;console.log()&lt;/code&gt;&lt;/code&gt;），只需重置 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 元素本身：&lt;/p&gt; &lt;pre class='brush:php;toolbar:false;'&gt;code { color: #d63384 !important; }</pre> <p>注意几点：</p> <ul> <li> <code>!important 很可能需要，因为 Bootstrap 5 的 code 规则带 font-family、color 等多属性，且部分用 :not(.no-class) 等选择器提升权重

别只写 color，顺手补上 font-family: var(--bs-font-monospace)，否则可能回退到系统默认等宽字体，和 Bootstrap 的设计脱节

如果项目用了 CSS-in-JS 或 scoped style（如 Vue SFC），!important 可能不够，得提高选择器特异性，比如 body code 或 .my-app code

覆盖 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 块级代码的字体与背景&lt;/H3&gt; &lt;p&gt;真正要改代码块（比如 Markdown 渲染出的 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;js&quot;&gt;&lt;/code&gt;），必须同时处理 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 和嵌套的 &lt;code&gt;&lt;code&gt;&lt;/code&gt;：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/gongju/2905&quot; title=&quot;CSS&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png&quot; alt=&quot;CSS&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/gongju/2905&quot; title=&quot;CSS&quot;&gt;CSS&lt;/a&gt; &lt;p&gt;CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/gongju/2905&quot; title=&quot;CSS&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;pre class='brush:php;toolbar:false;'&gt;pre code { color: #e63757; background-color: transparent; } pre { background-color: #2c3e50; color: #ecf0f1; padding: 1rem; border-radius: 0.25rem; }</pre> <p>关键点：</p> <ul> <li> <code>pre 控制整体容器（背景、内边距、圆角），pre code 控制内部文字色 —— 单独改 pre 的 color 不影响 code 文字，因为 code 自带独立 color

Bootstrap 5 的 pre 默认有 white-space: pre 和 overflow-x: auto，别意外删掉，否则长行会折行或溢出

如果用了 Prism.js 或 Highlight.js，它们会给 <code> 加类（如 .token.keyword），此时你的 pre code 规则会被更具体的选择器覆盖，得用 pre code, pre code .token 或直接查浏览器开发者工具看最终生效规则

避免全局污染：用自定义类精准控制

全站统一改 code 容易误伤文档中非代码语义的 <code>（比如教程里写的 HTML 标签名）。更稳妥的是加 class：

<code class="code-inline-primary">fetch()</code>
<pre class="code-block-dark"><code>...</code>

然后写对应样式：

.code-inline-primary {
  color: #0d6efd !important;
}
.code-block-dark {
  background-color: #1e293b;
}
.code-block-dark code {
  color: #f1f5f9;
  font-family: var(--bs-font-monospace);
}

这样既避开 !important 泛滥，又方便未来按场景切换主题（比如暗色模式下只换 .code-block-dark 的 background-color）。

真正容易被忽略的是：Bootstrap 5 的 code 样式在 reboot.scss 里定义，而 pre 在 type.scss，两者来源不同；如果你用 Sass 编译项目，其实可以直接覆写 $code-color 和 $pre-color 变量 —— 但前提是没跳过 Bootstrap 的源码编译流程。纯 CDN 引入的话，CSS 覆盖仍是唯一可靠路径。