解决 Hugo PaperMod 主题中 Markdown 文字标记颜色显示问题

Markdown语法的文本编辑，可以使得博客文章在视觉上更加丰富多彩，提高阅读体验。但是使用PaperMod主题默认配置会出现“为什么在 VS Code 中预览时有彩色显示，但在 Hugo 生成的网页上没有彩色的问题”。这实际上和我们对css和html的配置有很大关系，本文将教大家如何配置正确的富文本渲染样式。

问题分析

经过分析，发现了两个主要问题：

标准 Markdown 元素无彩色样式：Hugo PaperMod 主题默认只对代码块提供了语法高亮，但对于其他 Markdown 元素如加粗、斜体、内联代码等没有提供彩色样式。
HTML 标签被过滤：在某些 Markdown 文件中使用了 HTML 标签来设置颜色（如<font color="#2DC26B">或<span style="background:#fdbfff">），但 Hugo 默认会过滤掉不安全的 HTML 标签，导致这些彩色样式在网页中不显示。

解决方案

创建自定义 CSS 文件

在项目的 assets/css/extended/ 目录下创建一个新文件 markdown-colors.css

/* 为Markdown元素添加彩色样式 */
.post-content strong {
  color: var(--primary, #e83e8c);
  font-weight: 700;
}

.post-content em {
  color: var(--secondary, #fd7e14);
  font-style: italic;
}

.post-content strong em,
.post-content em strong {
  color: var(--tertiary, #6610f2);
  font-weight: 700;
  font-style: italic;
}

.post-content code:not(.highlight) {
  color: var(--code-color, #d63384);
  background-color: var(--code-bg, #f8f9fa);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

.post-content a {
  color: var(--link-color, #0d6efd);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.post-content a:hover {
  color: var(--link-hover-color, #0a58ca);
  text-decoration: underline;
}

.post-content blockquote {
  border-left: 4px solid var(--quote-border, #0d6efd);
  background-color: var(--quote-bg, #f8f9fa);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--quote-text, #495057);
  border-radius: 0 4px 4px 0;
}

.post-content del {
  color: var(--del-color, #6c757d);
  text-decoration: line-through;
}

.post-content table th {
  background-color: var(--table-header-bg, #e9ecef);
  color: var(--table-header-text, #495057);
  font-weight: 600;
}

.post-content table tr:nth-child(even) {
  background-color: var(--table-row-even, #f8f9fa);
}

/* 深色主题适配 */
[data-theme="dark"] .post-content strong {
  color: var(--primary, #ff6b9d);
}

[data-theme="dark"] .post-content em {
  color: var(--secondary, #ffa94d);
}

[data-theme="dark"] .post-content code:not(.highlight) {
  color: var(--code-color, #f783ac);
  background-color: var(--code-bg, #343a40);
}

[data-theme="dark"] .post-content a {
  color: var(--link-color, #74c0fc);
}

[data-theme="dark"] .post-content a:hover {
  color: var(--link-hover-color, #a5d8ff);
}

[data-theme="dark"] .post-content blockquote {
  background-color: var(--quote-bg, #343a40);
  border-left-color: var(--quote-border, #74c0fc);
  color: var(--quote-text, #dee2e6);
}

[data-theme="dark"] .post-content del {
  color: var(--del-color, #adb5bd);
}

[data-theme="dark"] .post-content table th {
  background-color: var(--table-header-bg, #495057);
  color: var(--table-header-text, #f8f9fa);
}

[data-theme="dark"] .post-content table tr:nth-child(even) {
  background-color: var(--table-row-even, #343a40);
}

在 hugo.yml 配置文件中确保已经启用了自定义 CSS：

params:
  # 其他配置...
  assets:
    disableFingerprinting: false
    # 其他配置...

启用 HTML 标签支持（针对已有 HTML 样式）

Markdown 文件中已经使用了 HTML 标签来设置颜色（如 <font color="#2DC26B">），需要在 Hugo 配置中启用 HTML 标签支持：

在 hugo.yml 文件中添加以下配置：

markup:
  goldmark:
    renderer:
      unsafe: true # 允许 HTML 标签
  highlight:
    noClasses: false

重启 Hugo 服务器使配置生效

修改主题变量

在 hugo.yml 中添加自定义 CSS 变量：

params:
  # 其他配置...
  cssVars:
    primary: "#e83e8c"
    secondary: "#fd7e14"
    tertiary: "#6610f2"
    link-color: "#0d6efd"
    code-color: "#d63384"
    quote-border: "#0d6efd"

自定义颜色

使用不同的颜色方案，可以修改 CSS 中的颜色值：

--primary: 主要强调色（用于加粗文字）
--secondary: 次要强调色（用于斜体文字）
--tertiary: 第三强调色（用于加粗斜体文字）
--link-color: 链接颜色
--code-color: 内联代码文字颜色
--quote-border: 引用块边框颜色

测试验证

创建一个测试 Markdown 文件，包含各种 Markdown 元素：

# 测试 Markdown 彩色样式

这里有一些**加粗文字**，应该显示为主要颜色。

这里有一些*斜体文字*，应该显示为次要颜色。

这里有一些**_加粗斜体文字_**，应该显示为第三颜色。

这里有一些`内联代码`，应该有特殊的背景色和文字颜色。

这里有一些[链接文字](https://example.com)，应该有特殊的颜色。

这里有一些> 引用文字

> 可以是多行的
> 应该有特殊的样式和颜色

这里有一些~~删除线文字~~，也应该有特殊样式。

注意事项

确保在 hugo.yml 中 markup.highlight.noClasses 设置为 false
如果使用自定义 CSS，确保文件路径正确：assets/css/extended/
修改后需要重启 Hugo 服务器才能看到效果
安全提醒：启用 unsafe: true 允许 HTML 标签可能会带来安全风险
推荐做法：尽可能使用标准 Markdown 语法而非 HTML 标签，这样更安全且易于维护

预期效果

实施此解决方案后， Hugo 博客中的 Markdown 元素将显示为：

加粗文字：醒目的主色调
斜体文字：柔和的次要色调
内联代码：带有背景色的代码样式
[链接]：明显的链接颜色
引用块：带有左边框和背景色的引用样式
~~删除线~~：灰色删除线样式

谢谢关注收藏

⏰ 刚刷到的朋友注意啦！点击【关注】锁定宝藏库，从此升职加薪不迷路 ✨

我的投资理财博客：MakeMoney，https://blog-demo-559.pages.dev/

我的技术分享博客：Tesla，https://funkygod.vip/

轻量云主机限时优惠

RackNerd

☁ 主机显示特惠：只要80元（3TB流量，1vcpu，50GB硬盘）购买地址：https://my.racknerd.com/aff.php?aff=14942

CloudCone

CloudCone 特惠轻量云主机：购买地址：https://app.cloudcone.com/?ref=12332

📢 腾讯云资源限时福利

有云服务器、CDN、对象存储、网络防护等需求的朋友，欢迎联系下方腾讯云官方销售 👇
✔️ 内部专属折扣，价格更优 ✔️ 量大可谈，支持定制方案 ✔️ 技术咨询与售后无忧

目录CONTENT

解决 Hugo PaperMod 主题中 Markdown 文字标记颜色显示问题

解决 Hugo PaperMod 主题中 Markdown 文字标记颜色显示问题

问题分析

解决方案

创建自定义 CSS 文件

启用 HTML 标签支持（针对已有 HTML 样式）

修改主题变量

自定义颜色

测试验证

注意事项

预期效果

谢谢关注收藏

轻量云主机限时优惠

RackNerd

CloudCone

📢 腾讯云资源限时福利

评论区