Markdown基本用法

1. 标题测试#

2. 二级标题 H2#

2.1. 三级标题 H3#

2.1.1 四级标题 H4#

2.1.1.1 五级标题 H5#

2.1.1.1.1 六级标题 H6#

3. 段落与文本样式#

这是一个普通段落，用于测试正文的字体、字号、行高、段间距与最大宽度。通常一篇博客文章会包含大量连续文本，因此这里特意写得稍微长一点，用来观察阅读体验是否舒适。

这是第二个段落。你可以检查段落之间的留白是否合适，以及中英文混排时的显示效果，例如： Hello World ，今天我们来测试一下 Markdown 渲染效果。

粗体文本、斜体文本、粗斜体文本、~~删除线文本~~、高亮文本。

你还可以测试键盘按键样式：Ctrl + C，以及缩写样式： HTML 、 CSS 、 JavaScript 。

4. 分割线#

上面是一条分割线。

上面是另一种写法。

上面是第三种写法。

5. 引用块#

这是一级引用。

引用块中可以包含多行文字，用于测试左侧边框、背景色、字体颜色与内边距。

这是另一段引用。

这里是二级嵌套引用。

这里是三级嵌套引用。

6. 列表#

6.1. 无序列表#

第一项
第二项
- 二级子项 A
- 二级子项 B
  - 三级子项 B-1
  - 三级子项 B-2
第三项

6.2. 有序列表#

第一步
第二步
第三步
1. 子步骤 3.1
2. 子步骤 3.2

6.3. 任务列表#

完成博客初始化
配置 Markdown 渲染器
调整代码高亮主题
优化移动端样式

7. 链接#

这是一个普通链接：GitHub

这是带标题的链接：OpenAI 官网

这是脚注式链接：Markdown Guide

8. 图片#

下面是一张普通图片：

示例图片

9. 行内代码#

这是一个行内代码示例：const theme = "blog";

你还可以测试命令行片段：npm install、pnpm dev、git commit -m "init"。

测试中英文混排下的行内代码：请执行 npm run build 之后再部署站点。

10. 代码块#

10.1. JavaScript#

1
function greet(name) {
2
  console.log(`Hello, ${name}!`);
3
}
4

5
greet("Reo");

10.2. TypeScript#

1
interface Post {
2
  title: string;
3
  date: string;
4
  tags: string[];
5
}
6

7
const post: Post = {
8
  title: "Markdown 测试",
9
  date: "2026-05-02",
10
  tags: ["markdown", "blog", "test"]
11
};
12

13
console.log(post);

10.3. Python#

1
def fibonacci(n):
2
    a, b = 0, 1
3
    result = []
4
    for _ in range(n):
5
        result.append(a)
6
        a, b = b, a + b
7
    return result
8

9
print(fibonacci(10))

10.4. Bash#

#!/usr/bin/env bash

echo "Start build..."
pnpm install
pnpm build
echo "Done."

10.5. JSON#

1
{
2
  "title": "My Blog",
3
  "theme": "minimal",
4
  "darkMode": true
5
}

11. 表格#

功能	说明	状态
标题渲染	测试 H1-H6 样式	完成
列表样式	测试缩进与间距	完成
代码高亮	测试不同语言代码块	进行中
数学公式	测试 LaTeX 支持	待确认

11.1. 对齐#

左对齐	居中对齐	右对齐
text	text	text
apple	banana	123

12. 数学公式 / LaTeX 支持#

如果你的博客启用了数学公式支持，可以测试以下内容。

12.1. 行内公式#

这是一个行内公式： $E = mc^2$ ，用于测试公式与正文基线是否对齐。

再来一个：当 $a^2 + b^2 = c^2$ 时，这是勾股定理。

12.2. 块级公式#

f(x) = \int_{-\infty}^{+\infty} \hat{f}(\xi)e^{2\pi i \xi x} d\xi

\frac{d}{dx}\left( \int_{a}^{x} f(t)\,dt \right) = f(x)

\mathrm{softmax}(x_i) = \frac{e^{x_i}}{\sum_{j=1}^{n} e^{x_j}}

矩阵示例：

A = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix}

13. 脚注#

这里有一个脚注示例¹，还有第二个脚注²。

14. 折叠块#

点击展开查看内容

这里是折叠块中的内容。

可以放列表
可以放代码
可以放说明文字

1
console.log("Hello from details!");

15. HTML 混排#

这是一个 HTML 容器，用于测试自定义块样式。

这是一段灰色的 HTML 文本。

16. 特殊字符#

© & < >
* # - _
中文标点：，。！？【】（）《》
English punctuation: , . ! ? [ ] ( )

17. 长段落阅读#

在设计博客主题时，最容易被忽略的是长文本阅读体验。一个优秀的博客排版，不仅要让标题清晰、代码美观、图片协调，还需要让用户在阅读连续数百字甚至数千字内容时依旧感到轻松。因此，这里特意加入一段稍长的文字，用来测试正文的宽度、对齐方式、段落留白、字体渲染、夜间模式以及移动端显示效果。如果你的博客支持目录悬浮、回到顶部、代码复制按钮、图片缩放、脚注跳转等功能，也可以顺带一并验证它们是否工作正常。

18. 引用 + 列表 + 代码混合#

在写技术博客时，经常会出现下面这种混合结构：

先说明背景

再给出步骤

最后附上代码

示例命令：
Terminal window
git clone https://github.com/example/project.git
cd project
pnpm install
pnpm dev

这是第一个脚注内容。 ↩
这是第二个脚注内容，用于测试脚注区域样式。 ↩

最近更新： 2026年5月2日 08:00