Markdown 语法全示例

这篇用来检查主题对各种 Markdown 元素的渲染效果。如果你看到下面哪一块样式有问题，就该回去调 CSS 了。

一、标题层级

下面是 H2 到 H4 的视觉对比（H1 已经被文章标题用了）。

这是二级标题（H2）

这是三级标题（H3）

这是四级标题（H4）

二、文字强调与行内元素

普通段落，这一段是加粗文字，这一段是斜体，同时加粗与斜体，这一段被划掉了，这是一段行内代码。

还可以这样：使用 Cmd + K 召唤搜索；按 Esc 关闭弹窗。

行内的链接像这样：访问 Hugo 官网 ，外部链接默认会在当前标签打开。

带 title 属性的链接：悬停看 tooltip。

自动链接：https://example.com

三、列表

无序列表

• 第一项
• 第二项
  • 嵌套项 A
  • 嵌套项 B
    • 再深一层
• 第三项

有序列表

1. 准备食材
2. 烧水
3. 下面
   1. 一分钟后加调料
   2. 两分钟后关火
4. 出锅

任务列表

• 写完主题骨架
• 加暗色模式
• 加图片 lightbox
• 接入评论系统
• 部署到 Cloudflare Pages

四、引用与嵌套引用

写作是一种把混乱整理成清晰的方式。

多段引用：

第一段引言，讲述某个观点。

第二段引言，补充说明。

这是嵌套的引用，用来表示二次引用。 可以继续写。

五、代码

行内：使用 git rebase -i HEAD~3 来交互式合并最近三个提交。

带语言标签的代码块——

Python：

from dataclasses import dataclass

@dataclass
class Post:
    title: str
    tags: list[str]

    def has_tag(self, name: str) -> bool:
        """判断文章是否包含某个标签"""
        return name.lower() in (t.lower() for t in self.tags)


if __name__ == "__main__":
    p = Post(title="Hello", tags=["Hugo", "Markdown"])
    print(p.has_tag("hugo"))  # True

Rust：

use std::collections::HashMap;

/// 统计字符串中每个字符出现的次数
fn char_count(s: &str) -> HashMap<char, usize> {
    let mut map = HashMap::new();
    for c in s.chars() {
        *map.entry(c).or_insert(0) += 1;
    }
    map
}

fn main() {
    let counts = char_count("hello, world");
    println!("{:?}", counts);
}

JavaScript：

// 简单的防抖函数
const debounce = (fn, wait = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
};

const onResize = debounce(() => {
  console.log("window size:", window.innerWidth);
}, 200);

window.addEventListener("resize", onResize);

Shell：

# 启动 Hugo 开发服务器并指定端口
hugo server --port 1313 --bind 127.0.0.1

无语言标签的纯文本块：

+-----------+      +-----------+
|  Browser  | ---> |   Hugo    |
+-----------+      +-----------+
                         |
                         v
                   +-----------+
                   |  静态文件  |
                   +-----------+

六、表格

带对齐方式的表格：

七、图片

单张图片：

带 title 的图片（悬停可看说明）：

八、分割线

上面是一段。

下面是一段。分割线在视觉上隔开两个不相关的段落。

九、HTML 行内元素

支持 CSS 和 HTML 这种带 tooltip 的缩写。

支持上标和下标：水的化学式是 H₂O，能量公式是 E = mc²。

这是一段高亮文本，用来强调重点。

十、复杂组合

重要提醒： 下面是一段嵌套了多种元素的引用。

1. 第一步，安装依赖

   brew install hugo
   

2. 第二步，初始化项目

   hugo new site my-blog
   

3. 第三步，开始写作 ✍️

到此结束。如果上面所有元素的样式都让你觉得顺眼，那这个主题的基础排版就算合格了。下次再来挑刺。