如何在Bootstrap 5中用CSS修改代码块Code和Pre的字体颜色-css教程-PHP中文网

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

如何在bootstrap 5中用css修改代码块code和pre的字体颜色

Bootstrap 5 默认的 和字体颜色是什么

Bootstrap 5 给 设了 color: #212529（深灰），

 则继承自 color: #212529，同时加了 background-color: #f8f9fa。这不是“代码高亮”，只是基础文本色 —— 所以你改不改它，都得覆盖这两层样式。

直接覆盖 `的字体颜色（最常用）`

如果你只改内联代码（比如 console.log()），只需重置 元素本身：

code {
  color: #d63384 !important;
}

注意几点：

!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

覆盖 <code></code> 块级代码的字体与背景

真正要改代码块（比如 Markdown 渲染出的

<code class="js"></code>），必须同时处理 <code><pre class="brush:php;toolbar:false;">

和嵌套的 ：

pre code {
  color: #e63757;
  background-color: transparent;
}
pre {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 1rem;
  border-radius: 0.25rem;
}

关键点：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

pre 控制整体容器（背景、内边距、圆角），pre code 控制内部文字色 —— 单独改 pre 的 color 不影响 code 文字，因为 code 自带独立 color
Bootstrap 5 的 pre 默认有 white-space: pre 和 overflow-x: auto，别意外删掉，否则长行会折行或溢出
如果用了 Prism.js 或 Highlight.js，它们会给 加类（如 .token.keyword），此时你的 pre code 规则会被更具体的选择器覆盖，得用 pre code, pre code .token 或直接查浏览器开发者工具看最终生效规则

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

全站统一改 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 覆盖仍是唯一可靠路径。