Hugo 博客写作指南（六）：Chroma 代码高亮主题完整指南

本文是 Hugo 博客写作指南系列的第六篇，详细介绍 Hugo Chroma 代码高亮器的所有可用主题，以及如何配置和选择适合的主题。

在技术博客中，代码块是最常见的内容之一。一个美观、清晰的代码高亮主题不仅能提升阅读体验，还能让代码结构更加清晰。Hugo 使用 Chroma 作为代码高亮器，支持 36 种 内置主题。本文将详细介绍所有可用的主题，并帮助你选择最适合的主题。

Hugo Chroma 简介

Chroma 是一个用 Go 语言编写的高性能语法高亮器，是 Hugo 的默认代码高亮引擎。

Chroma 的优势：

• ⚡ 快速 - Go 语言编写，性能优异
• 🎨 丰富 - 36 种内置主题
• 🔧 灵活 - 支持自定义样式
• 📱 兼容 - 支持 100+ 种编程语言

🎨 可用的 Chroma 主题列表

浅色主题 (Light Themes)

浅色主题适合在明亮环境下使用，或者偏好浅色背景的用户。

深色主题 (Dark Themes) ⭐ 推荐

深色主题适合在昏暗环境下使用，能有效减少眼睛疲劳，是技术博客的首选。

✅ 推荐的深色主题

方案 1: Dracula 主题 (最推荐)

特点:

• 🎨 粉色、绿色、紫色配色
• 🌙 专为深色模式设计
• 👁️ 高对比度，护眼神器
• 🎯 现代感强，适合技术博客

配置方法:

[markup]
  [markup.highlight]
    codeFences = true
    lineNos = false
    style = 'dracula'  # 修改这里

效果预览:

背景：#282a36 (深蓝黑)
关键字：#ff79c6 (粉色)
字符串：#f1fa8c (黄色)
注释：#6272a4 (蓝灰)
函数：#50fa7b (亮绿)
变量：#8be9fd (青色)

示例代码:

# Dracula 主题示例
def hello_world():
    """Hello World 示例"""
    name = "World"
    print(f"Hello, {name}!")
    
if __name__ == "__main__":
    hello_world()

方案 2: Monokai 主题 (经典)

特点:

• 🎨 鲜艳多彩
• 🌙 经典深色主题
• 💻 Sublime Text 默认
• 🔥 适合多种语言

配置:

style = 'monokai'

效果预览:

背景：#272822 (深灰)
关键字：#f92672 (粉红)
字符串：#e6db74 (淡黄)
函数：#a6e22e (亮绿)
变量：#66d9ef (淡蓝)

示例代码:

// Monokai 主题示例
function greet(name) {
    const message = `Hello, ${name}!`;
    console.log(message);
}

greet("World");

方案 3: Nord 主题 (冷色调)

特点:

• ❄️ 北极冰川配色
• 🌊 冷色调，冷静专业
• 👁️ 低饱和度，护眼
• 🎯 适合严肃技术博客

配置:

style = 'nord'

效果预览:

背景：#2e3440 (深蓝灰)
关键字：#81a1c1 (淡蓝)
字符串：#a3be8c (淡绿)
函数：#88c0d0 (青色)
变量：#d8dee9 (浅灰)

示例代码:

// Nord 主题示例
package main

import "fmt"

func main() {
    message := "Hello, Nord!"
    fmt.Println(message)
}

方案 4: Tokyo Night 主题 (日系夜景)

特点:

• 🌃 东京夜景配色
• 💜 紫色调为主
• 🎨 现代清新
• 🎯 时尚技术博客

配置:

style = 'tokyonight'

效果预览:

背景：#1a1b26 (深蓝黑)
关键字：#bb9af7 (紫色)
字符串：#9ece6a (绿色)
函数：#7aa2f7 (蓝色)
变量：#c0caf5 (浅蓝)

示例代码:

// Tokyo Night 主题示例
fn main() {
    let name = "Tokyo Night";
    println!("Hello, {}!", name);
}

方案 5: Gruvbox 主题 (复古暖色)

特点:

• 🎨 复古暖色调
• ☕ 舒适温馨
• 🌅 适合夜间阅读
• 🎯 个性化选择

配置:

style = 'gruvbox'

效果预览:

背景：#282828 (深灰)
关键字：#fb4934 (红色)
字符串：#b8bb26 (黄绿)
函数：#83a598 (青色)
变量：#d3869b (粉色)

示例代码:

// Gruvbox 主题示例
public class Main {
    public static void main(String[] args) {
        String greeting = "Hello, Gruvbox!";
        System.out.println(greeting);
    }
}

方案 6: Catppuccin Mocha 主题 (流行)

特点:

• 🐱 网红主题
• 🎨 柔和粉彩
• 🌈 多彩但柔和
• 🎯 年轻活力

配置:

style = 'catppuccin-mocha'

效果预览:

背景：#1e1e2e (深蓝)
关键字：#cba6f7 (紫色)
字符串：#a6e3a1 (绿色)
函数：#89b4fa (蓝色)
变量：#f5c2e7 (粉色)

方案 7: Ayu Dark 主题 (游戏开发)

特点:

• 🎮 游戏开发常用
• 🌊 深蓝海洋色
• 💎 宝石般配色
• 🎯 现代科技感

配置:

style = 'ayu-dark'

效果预览:

背景：#0f1419 (深蓝黑)
关键字：#ff7772 (珊瑚红)
字符串：#b8cc52 (橄榄绿)
函数：#36a3d9 (天蓝)
变量：#e6e1cf (米白)

方案 8: Solarized Dark 主题 (护眼)

特点:

• 👁️ 科学配色
• 🌙 低对比度
• 📚 长时间阅读
• 🎯 学术研究

配置:

style = 'solarized-dark'

效果预览:

背景：#002b36 (深蓝)
关键字：#268bd2 (蓝色)
字符串：#2aa198 (青色)
函数：#859900 (绿色)
变量：#93a1a1 (灰蓝)

📊 主题对比表

🔧 实施步骤

步骤 1: 备份当前配置

# 备份 hugo.toml
cp hugo.toml hugo.toml.backup

步骤 2: 修改 hugo.toml

编辑 hugo.toml 文件：

[markup]
  [markup.highlight]
    codeFences = true
    lineNos = false
    style = 'dracula'  # 选择你喜欢的主题

步骤 3: 测试验证

# 清理并重新构建
hugo --cleanDestinationDir

# 本地测试
hugo server -D -F

步骤 4: 查看效果

访问 http://localhost:1313/ 查看代码块效果

步骤 5: 部署上线

# 生产环境构建
hugo --gc --minify

🎯 选择建议

最佳选择：Dracula 或 Tokyo Night

理由:

1. ✅ 专为深色模式设计
2. ✅ 高对比度，文字清晰
3. ✅ 配色现代，符合审美
4. ✅ 社区活跃，持续维护
5. ✅ 多种语言支持良好

保守选择：Monokai

理由:

1. ✅ 经典主题，久经考验
2. ✅ 大多数人都熟悉
3. ✅ 配色鲜艳，层次分明
4. ✅ 适合多种编程语言

个性选择：Gruvbox

理由:

1. ✅ 复古暖色调，独特风格
2. ✅ 护眼舒适
3. ✅ 适合长时间阅读
4. ✅ 个性化博客首选

护眼选择：Solarized Dark

理由:

1. ✅ 科学配色方案
2. ✅ 低对比度设计
3. ✅ 适合长时间阅读
4. ✅ 学术研究首选

⚠️ 注意事项

1. 主题名称必须小写: dracula ✅ 正确，Dracula ❌ 错误
2. 修改后需要重启 Hugo 服务器: Ctrl+C 然后重新运行
3. 清理缓存: 使用 hugo --cleanDestinationDir
4. 检查拼写: 错误的主题名会导致构建失败
5. 深色模式适配: 确保 CSS 中的代码块背景色与主题匹配

🎨 深色模式适配

如果启用了深色模式，需要在 CSS 中适配代码块背景：

/* 浅色模式 */
:root {
  --code-bg: 255 255 255;
  --code-top-bg: 240 240 240;
}

/* 深色模式 */
[data-theme="dark"] {
  --code-bg: 30 30 30;
  --code-top-bg: 45 45 45;
}

/* 代码块背景 */
.markdown .code-block,
.markdown div.highlight {
  background-color: rgb(var(--code-bg));
}

📝 快速测试命令

# 测试 Dracula 主题
sed -i 's/style = .*/style = '\''dracula'\''/' hugo.toml
hugo server -D -F

# 测试 Monokai 主题
sed -i 's/style = .*/style = '\''monokai'\''/' hugo.toml
hugo server -D -F

# 测试 Nord 主题
sed -i 's/style = .*/style = '\''nord'\''/' hugo.toml
hugo server -D -F

# 测试 Tokyo Night 主题
sed -i 's/style = .*/style = '\''tokyonight'\''/' hugo.toml
hugo server -D -F

🔍 查看所有可用主题

访问 Chroma Style Gallery 可以预览所有主题的 effect。

📚 参考资源

• Hugo Syntax Highlighting
• Chroma Style Gallery
• Dracula Theme Official
• Tokyo Night Theme
• Monokai Official
• Nord Theme
• Gruvbox Theme
• Catppuccin Theme
• Ayu Theme
• Solarized Theme

小结

Hugo Chroma 提供了 36 种 代码高亮主题，包括：

• ✅ 26 种浅色主题 - 适合明亮环境
• ✅ 17 种深色主题 - 适合昏暗环境，推荐使用
• ✅ 简单配置 - 只需修改 hugo.toml
• ✅ 即时生效 - 重启 Hugo 服务器即可

推荐主题:

1. 🥇 Dracula - 现代、高对比度
2. 🥈 Tokyo Night - 时尚、紫色调
3. 🥉 Monokai - 经典、鲜艳
4. 🏅 Nord - 冷色调、专业
5. 🏅 Gruvbox - 复古、暖色

选择适合你的主题，让代码块更加美观吧！

上一篇： Hugo 博客写作指南（五）：YAML 和 TOML 中的引号使用规则

系列文章：

• Hugo 博客写作指南（一）：Front Matter 基础属性详解
• Hugo 博客写作指南（二）：hugo.toml 配置详解
• Hugo 博客写作指南（三）：Markdown 基础用法详解
• Hugo 博客写作指南（四）：ChangAn 主题特色功能详解
• Hugo 博客写作指南（五）：YAML 和 TOML 中的引号使用规则

相关资源：

• Hugo 官方文档
• Chroma Style Gallery