代码高亮与 Markdown 进阶排版

本主题内置 Hugo Chroma 代码高亮：Atom One Dark 深色配色、行号、长行横向滚动与一键复制。

代码块用法

三个反引号 + 语言名即可，语法高亮由 Chroma 自动完成：

1package main
2
3import "fmt"
4
5func main() {
6    // 支持 Go/Python/JS/TOML/Bash 等 100+ 语言
7    fmt.Println("Hello, Period!")
8}

需要高亮指定行时，用 highlight 短代码 + hl_lines（行号从 1 计）：

1
1func add(a, b int) int {
2    return a + b   // ← 这一行会被背景高亮
3}

Bash 示例（注意行号会自动生成）：

1hugo server -D
2hugo --minify && npx pagefind --site public

每个代码块右上角有复制按钮（悬停高亮），点击即复制全文。

高亮配置

1[markup.highlight]
2  codeFences = true
3  noClasses = false        # 使用 Chroma 类名（配合主题内置 chroma.css）
4  lineNos = true           # 行号
5  lineNumbersInTable = false
6  style = "onedark"        # 与 themes/period/assets/css/chroma.css 对应
7  tabWidth = 4

换配色风格：运行 hugo gen chromastyles --style=<风格名>（如 github、monokai、 friendly），把输出覆盖到 themes/period/assets/css/chroma.css，再同步修改 markup.highlight.style 即可；换成浅色风格时记得同步调整 themes/period/assets/scss/_base.scss 里 .highlight 块的深色适配（边框/复制按钮配色）。

Markdown 进阶排版

表格

脚注

脚注¹自动渲染为编号引用，点击正文编号可跳转到文末。

任务列表

• 安装 Hugo extended
• 运行 hugo server
• 配置 Giscus 评论
• 部署上线

定义列表

设计令牌（Design Token）

颜色、字体、间距等视觉属性的命名变量，集中定义在 _variables.scss。

断点（Breakpoint）

响应式布局的切换宽度，本主题为 600 / 900 / 1100px。

引用

好的代码高亮应该隐身于代码之后——只提供对比度，不抢走注意力。

—— 主题设计手记

原始 HTML

markup.goldmark.renderer.unsafe = true 已开启，可直接嵌入 HTML：

常见问题