为什么在 VS Code 中预览时有彩色显示,但在 Hugo 生成的网页上没有彩色的原因?
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 标签支持:
...