Markdown Comprehensive Example

2018-04-26

2025-10-05

lolifamily

这是一篇全面展示 Markdown 语法特性的示例文章，涵盖了基础语法、GFM 扩展、数学公式、代码高亮等所有功能。

文本格式化

基础样式

这是一段普通文本。你可以使用 粗体文本、斜体文本、粗斜体文本 来强调重要内容。

如果需要标记删除的内容，可以使用 ~~删除线~~。

你还可以使用 行内代码 来标记代码片段或特殊术语。

上标和下标

水分子的化学式是 H₂O，而爱因斯坦的质能方程是 E=mc²。

高亮标记

这是一段包含高亮文本的内容。

标题层级

三级标题

四级标题

五级标题

六级标题

列表

无序列表

列表项 1
列表项 2
- 嵌套列表项 2.1
- 嵌套列表项 2.2
  - 更深层嵌套 2.2.1
列表项 3

有序列表

第一项
第二项
1. 子项 2.1
2. 子项 2.2
第三项

任务列表

已完成的任务
另一个已完成的任务
未完成的任务
待办事项

引用块

这是一个简单的引用块。
可以包含多个段落。

引用块也可以嵌套：
这是嵌套的引用内容。
甚至可以多层嵌套。

提示：引用块中也可以使用其他 Markdown 语法。
1
console.log('甚至可以包含代码块');

NOTE
Highlights information that users should take into account, even when skimming.
TIP
Optional information to help a user be more successful.
End of NOTE block.

Custom Important Title
Crucial information necessary for users to succeed.

WARNING
Critical content demanding immediate user attention due to potential risks.

CAUTION
Negative potential consequences of an action.

链接和图片

链接

这是一个行内链接。

这是一个带标题的链接。

这是一个引用式链接链接文本。

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

图片

2022-10-06-10-59-44

使用 ImageWrapper 组件：

使用 PictureWrapper 组件：

表格

基础表格

列 1	列 2	列 3
数据 1	数据 2	数据 3
数据 4	数据 5	数据 6

对齐表格

左对齐	居中对齐	右对齐
文本	文本	文本
更长的文本内容	更长的文本内容	更长的文本内容

复杂表格

功能	支持情况	说明
基础 Markdown	✅	完全支持
GFM 扩展	✅	完全支持
数学公式	✅	MathJax 渲染
代码高亮	✅	Expressive Code

代码块

行内代码

使用 const variable = 'value' 定义常量。

基础代码块

1
纯文本代码块
2
没有语法高亮

JavaScript 代码

1
// 这是一个 JavaScript 示例
2
function fibonacci(n) {
3
  if (n <= 1) return n;
4
  return fibonacci(n - 1) + fibonacci(n - 2);
5
}
6

7
const result = fibonacci(10);
8
console.log(`第 10 个斐波那契数是: ${result}`);

TypeScript 代码

1
// TypeScript 类型系统示例
2
interface User {
3
  id: number;
4
  name: string;
5
  email: string;
6
  role: 'admin' | 'user';
7
}
8

9
class UserService {
10
  private users: User[] = [];
11

12
  addUser(user: User): void {
13
    this.users.push(user);
14
  }
15

16
  findUserById(id: number): User | undefined {
17
    return this.users.find(u => u.id === id);
18
  }
19
}

Python 代码

1
# Python 装饰器和生成器示例
2
from functools import wraps
3
from typing import Iterator
4

5
def timer(func):
6
    @wraps(func)
7
    def wrapper(*args, **kwargs):
8
        import time
9
        start = time.time()
10
        result = func(*args, **kwargs)
11
        end = time.time()
12
        print(f"{func.__name__} 执行时间: {end - start:.4f}s")
13
        return result
14
    return wrapper
15

16
@timer
17
def fibonacci_generator(n: int) -> Iterator[int]:
18
    """生成前 n 个斐波那契数"""
19
    a, b = 0, 1
20
    for _ in range(n):
21
        yield a
22
        a, b = b, a + b
23

24
# 使用生成器
25
for num in fibonacci_generator(10):
26
    print(num, end=' ')

Rust 代码

1
// Rust 所有权系统示例
2
use std::collections::HashMap;
3

4
#[derive(Debug)]
5
struct User {
6
    id: u32,
7
    name: String,
8
    email: String,
9
}
10

11
impl User {
12
    fn new(id: u32, name: String, email: String) -> Self {
13
        User { id, name, email }
14
    }
15
}
16

17
fn main() {
18
    let mut users: HashMap<u32, User> = HashMap::new();
19

20
    let user = User::new(1, String::from("Alice"), String::from("[email protected]"));
21
    users.insert(user.id, user);
22

23
    if let Some(u) = users.get(&1) {
24
        println!("找到用户: {:?}", u);
25
    }
26
}

带行号和高亮的代码块

1
// 第 1 行会被高亮
2
import * as express from 'express';
3
// 第 3-5 行会被高亮
4
const app = express();
5
const PORT = process.env.PORT || 3000;
6

7
app.get('/', (req, res) => {
8
  res.send('Hello World!');
9
});
10

11
app.listen(PORT, () => {
12
  console.log(`服务器运行在端口 ${PORT}`);
13
});

带标题的代码块

1
import type { CollectionEntry } from 'astro:content';
2

3
export async function loadPosts(): Promise<CollectionEntry<'post'>[]> {
4
  const posts = await getCollection('post');
5
  return posts.filter(post => !post.data.draft);
6
}

Shell 脚本

1
#!/bin/bash
2
# 自动化构建脚本
3

4
echo "开始构建项目..."
5

6
# 安装依赖
7
pnpm install
8

9
# 运行代码检查
10
pnpm run lint
11

12
# 运行测试
13
pnpm run test
14

15
# 构建项目
16
pnpm run build
17

18
echo "构建完成！"

HTML + CSS

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>示例页面</title>
7
  <style>
8
    .container {
9
      max-width: 1200px;
10
      margin: 0 auto;
11
      padding: 2rem;
12
    }
13

14
    .card {
15
      background: white;
16
      border-radius: 8px;
17
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
18
      padding: 1.5rem;
19
    }
20
  </style>
21
</head>
22
<body>
23
  <div class="container">
24
    <div class="card">
25
      <h1>欢迎</h1>
26
      <p>这是一个示例页面。</p>
27
    </div>
28
  </div>
29
</body>
30
</html>

SQL 查询

1
-- 复杂的 SQL 查询示例
2
SELECT
3
  u.id,
4
  u.name,
5
  u.email,
6
  COUNT(p.id) as post_count,
7
  MAX(p.created_at) as last_post_date
8
FROM users u
9
LEFT JOIN posts p ON u.id = p.user_id
10
WHERE u.active = true
11
  AND u.created_at >= DATE_SUB(NOW(), INTERVAL 1 YEAR)
12
GROUP BY u.id, u.name, u.email
13
HAVING post_count > 5
14
ORDER BY post_count DESC, last_post_date DESC
15
LIMIT 10;

JSON 数据

1
{
2
  "name": "modern-blog",
3
  "version": "1.0.0",
4
  "description": "现代化的博客系统",
5
  "scripts": {
6
    "dev": "astro dev",
7
    "build": "astro build",
8
    "preview": "astro preview"
9
  },
10
  "dependencies": {
11
    "astro": "^4.0.0",
12
    "react": "^18.0.0"
13
  },
14
  "author": {
15
    "name": "Your Name",
16
    "email": "[email protected]"
17
  }
18
}

YAML 配置

1
# GitHub Actions 工作流配置
2
name: Build and Deploy
3

4
on:
5
  push:
6
    branches: [main]
7
  pull_request:
8
    branches: [main]
9

10
jobs:
11
  build:
12
    runs-on: ubuntu-latest
13

14
    steps:
15
      - name: Checkout 代码
16
        uses: actions/checkout@v3
17

18
      - name: 设置 Node.js
19
        uses: actions/setup-node@v3
20
        with:
21
          node-version: '18'
22

23
      - name: 安装 pnpm
24
        uses: pnpm/action-setup@v2
25
        with:
26
          version: 8
27

28
      - name: 安装依赖
29
        run: pnpm install
30

31
      - name: 构建项目
32
        run: pnpm run build

MDX

1
import { Code } from 'astro-expressive-code/components'

数学公式

行内公式

这是一个行内公式 $𝐸 = 𝑚 𝑐 2$ ，另一个是 $𝑎 2 + 𝑏 2 = 𝑐 2$ 。

当 $𝑎 \neq 0$ 时，方程 $𝑎 𝑥 2 + 𝑏 𝑥 + 𝑐 = 0$ 的解为： $𝑥 = - 𝑏 \pm \sqrt 𝑏 2 - 4 𝑎 𝑐 2 𝑎$ 。

块级公式

𝜕 𝑓 𝜕 𝑥 = l i m ℎ \to 0 𝑓 (𝑥 + ℎ) - 𝑓 (𝑥) ℎ

\int \infty - \infty 𝑒 - 𝑥 2 𝑑 𝑥 = \sqrt 𝜋

矩阵

⎡ ⎢ ⎢ ⎣ 𝑎 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 ℎ 𝑖 ⎤ ⎥ ⎥ ⎦

多行公式

𝑓 (𝑥) = (𝑥 + 𝑎) (𝑥 + 𝑏) = 𝑥 2 + (𝑎 + 𝑏) 𝑥 + 𝑎 𝑏 = 𝑥 2 + 𝑐 𝑥 + 𝑑

分段函数

𝑓 (𝑥) = {𝑥 2 i f 𝑥 \geq 0 - 𝑥 2 i f 𝑥 < 0

求和与积分

𝑛 \sum 𝑖 = 1 𝑖 = 𝑛 (𝑛 + 1) 2

𝑛 \prod 𝑖 = 1 𝑖 = 𝑛!

\oint 𝐶 𝐅 \cdot 𝑑 𝐫 = \iint 𝑆 (\nabla \times 𝐅) \cdot 𝑑 𝐒

水平分隔线

脚注

这是一个包含脚注的句子¹。这是另一个脚注²。

定义列表

Term 1 : 这是术语 1 的定义。

Term 2 : 这是术语 2 的第一个定义。 : 这是术语 2 的第二个定义。

缩写

Web

是由HTML 和 CSS、JS 组成。

当你第一次看到 API 这个词时，可能会感到困惑。但随着学习的深入，你会发现 REST 和 GraphQL 都是构建 API 的常用方式。

Emoji

支持 GitHub 风格的 emoji 表情：

😄 :smile:
❤️ :heart:
🚀 :rocket:
🎉 :tada:
✨ :sparkles:
🔥 :fire:
🐛 :bug:
🎨 :art:

转义字符

如果要显示特殊字符，需要使用反斜杠转义：

*不是斜体*
[不是链接]
`不是代码`

键盘按键

按 Ctrl + C 复制，按 Ctrl + V 粘贴。

嵌套结构示例

引用块中的标题
引用块中的有序列表
第二项
嵌套的无序列表
另一项
1
// 引用块中的代码
2
const nested = true;
表格在引用块中
数据数据
$𝐸 = 𝑚 𝑐 2$ 引用块中的公式

表格	在引用块中
数据	数据

注释

总结

这篇文章展示了 Markdown 的所有主要语法特性：

文本格式化：粗体、斜体、删除线、高亮
结构元素：标题、列表、引用、表格
代码展示：行内代码、多语言代码块、语法高亮
数学公式：行内和块级 LaTeX 公式
链接和图片：各种链接和图片引用方式
扩展功能：脚注、定义列表、任务列表、Emoji

这些功能足以满足绝大多数技术写作和博客创作的需求。

源码


620 collapsed lines
1
---
2
title: Markdown Comprehensive Example
3
date: 2018-04-26
4
updated: 2025-10-05
5
sticky: -1
6
---
7

8
这是一篇全面展示 Markdown 语法特性的示例文章，涵盖了基础语法、GFM 扩展、数学公式、代码高亮等所有功能。
9

10
::more
11

12
## 文本格式化
13

14
### 基础样式
15

16
这是一段普通文本。你可以使用 **粗体文本**、*斜体文本*、***粗斜体文本*** 来强调重要内容。
17

18
如果需要标记删除的内容，可以使用 ~~删除线~~。
19

20
你还可以使用 `行内代码` 来标记代码片段或特殊术语。
21

22
### 上标和下标
23

24
水分子的化学式是 H:sub[2]O，而爱因斯坦的质能方程是 E=mc:sup[2]。
25

26
### 高亮标记
27

28
这是一段包含 :mark[高亮文本] 的内容。
29

30
## 标题层级
31

32
### 三级标题
33

34
#### 四级标题
35

36
##### 五级标题
37

38
###### 六级标题
39

40
## 列表
41

42
### 无序列表
43

44
- 列表项 1
45
- 列表项 2
46
  - 嵌套列表项 2.1
47
  - 嵌套列表项 2.2
48
    - 更深层嵌套 2.2.1
49
- 列表项 3
50

51
### 有序列表
52

53
1. 第一项
54
2. 第二项
55
   1. 子项 2.1
56
   2. 子项 2.2
57
3. 第三项
58

59
### 任务列表
60

61
- [x] 已完成的任务
62
- [x] 另一个已完成的任务
63
- [ ] 未完成的任务
64
- [ ] 待办事项
65

66
## 引用块
67

68
> 这是一个简单的引用块。
69
>
70
> 可以包含多个段落。
71

72
> 引用块也可以嵌套：
73
>
74
> > 这是嵌套的引用内容。
75
> >
76
> > > 甚至可以多层嵌套。
77

78
> **提示**：引用块中也可以使用其他 Markdown 语法。
79
>
80
> ```javascript
81
> console.log('甚至可以包含代码块');
82
> ```
83

84
::::note
85
Highlights information that users should take into account, even when skimming.
86

87
:::tip
88
Optional information to help a user be more successful.
89
:::
90

91
End of NOTE block.
92
::::
93

94
:::important[Custom Important Title]
95
Crucial information necessary for users to succeed.
96
:::
97

98
:::warning
99
Critical content demanding immediate user attention due to potential risks.
100
:::
101

102
:::caution
103
Negative potential consequences of an action.
104
:::
105

106
## 链接和图片
107

108
### 链接
109

110
这是一个 [行内链接](https://example.com)。
111

112
这是一个 [带标题的链接](https://example.com "链接标题")。
113

114
这是一个引用式链接 [链接文本][ref]。
115

116
[ref]: https://example.com "引用链接"
117

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

120
### 图片
121

122
![2022-10-06-10-59-44](@/assets/SKY_20221006_225944_.jpg)
123

124
使用 `ImageWrapper` 组件：
125

126
import Image from '@/components/ImageWrapper.astro';
127
import imageTest from '@/assets/SKY_20220916_203140_.jpg';
128

129
<Image src={imageTest} alt="2022-09-16-20-31-40" title="小号awa" />
130

131
使用 `PictureWrapper` 组件：
132

133
import Picture from '@/components/PictureWrapper.astro';
134
import pictureTest from '@/assets/SKY_20220929_004429_.jpg';
135

136
<Picture
137
  src={pictureTest}
138
  alt="2022-09-29-00-44-29"
139
  title="重生路"
140
  formats={['avif']}
141
  fallbackFormat="webp"
142
/>
143

144
## 表格
145

146
### 基础表格
147

148
| 列 1 | 列 2 | 列 3 |
149
| --- | --- | --- |
150
| 数据 1 | 数据 2 | 数据 3 |
151
| 数据 4 | 数据 5 | 数据 6 |
152

153
### 对齐表格
154

155
| 左对齐 | 居中对齐 | 右对齐 |
156
| :--- | :---: | ---: |
157
| 文本 | 文本 | 文本 |
158
| 更长的文本内容 | 更长的文本内容 | 更长的文本内容 |
159

160
### 复杂表格
161

162
| 功能 | 支持情况 | 说明 |
163
| :--- | :---: | :--- |
164
| 基础 Markdown | ✅ | 完全支持 |
165
| GFM 扩展 | ✅ | 完全支持 |
166
| 数学公式 | ✅ | MathJax 渲染 |
167
| 代码高亮 | ✅ | Expressive Code |
168

169
## 代码块
170

171
### 行内代码
172

173
使用 `const variable = 'value'` 定义常量。
174

175
### 基础代码块
176

177
```
178
纯文本代码块
179
没有语法高亮
180
```
181

182
### JavaScript 代码
183

184
```javascript
185
// 这是一个 JavaScript 示例
186
function fibonacci(n) {
187
  if (n <= 1) return n;
188
  return fibonacci(n - 1) + fibonacci(n - 2);
189
}
190

191
const result = fibonacci(10);
192
console.log(`第 10 个斐波那契数是: ${result}`);
193
```
194

195
### TypeScript 代码
196

197
```typescript
198
// TypeScript 类型系统示例
199
interface User {
200
  id: number;
201
  name: string;
202
  email: string;
203
  role: 'admin' | 'user';
204
}
205

206
class UserService {
207
  private users: User[] = [];
208

209
  addUser(user: User): void {
210
    this.users.push(user);
211
  }
212

213
  findUserById(id: number): User | undefined {
214
    return this.users.find(u => u.id === id);
215
  }
216
}
217
```
218

219
### Python 代码
220

221
```python
222
# Python 装饰器和生成器示例
223
from functools import wraps
224
from typing import Iterator
225

226
def timer(func):
227
    @wraps(func)
228
    def wrapper(*args, **kwargs):
229
        import time
230
        start = time.time()
231
        result = func(*args, **kwargs)
232
        end = time.time()
233
        print(f"{func.__name__} 执行时间: {end - start:.4f}s")
234
        return result
235
    return wrapper
236

237
@timer
238
def fibonacci_generator(n: int) -> Iterator[int]:
239
    """生成前 n 个斐波那契数"""
240
    a, b = 0, 1
241
    for _ in range(n):
242
        yield a
243
        a, b = b, a + b
244

245
# 使用生成器
246
for num in fibonacci_generator(10):
247
    print(num, end=' ')
248
```
249

250
### Rust 代码
251

252
```rust
253
// Rust 所有权系统示例
254
use std::collections::HashMap;
255

256
#[derive(Debug)]
257
struct User {
258
    id: u32,
259
    name: String,
260
    email: String,
261
}
262

263
impl User {
264
    fn new(id: u32, name: String, email: String) -> Self {
265
        User { id, name, email }
266
    }
267
}
268

269
fn main() {
270
    let mut users: HashMap<u32, User> = HashMap::new();
271

272
    let user = User::new(1, String::from("Alice"), String::from("[email protected]"));
273
    users.insert(user.id, user);
274

275
    if let Some(u) = users.get(&1) {
276
        println!("找到用户: {:?}", u);
277
    }
278
}
279
```
280

281
### 带行号和高亮的代码块
282

283
```javascript {1,3-5}
284
// 第 1 行会被高亮
285
import * as express from 'express';
286
// 第 3-5 行会被高亮
287
const app = express();
288
const PORT = process.env.PORT || 3000;
289

290
app.get('/', (req, res) => {
291
  res.send('Hello World!');
292
});
293

294
app.listen(PORT, () => {
295
  console.log(`服务器运行在端口 ${PORT}`);
296
});
297
```
298

299
### 带标题的代码块
300

301
```typescript title="src/utils/data-loader.ts"
302
import type { CollectionEntry } from 'astro:content';
303

304
export async function loadPosts(): Promise<CollectionEntry<'post'>[]> {
305
  const posts = await getCollection('post');
306
  return posts.filter(post => !post.data.draft);
307
}
308
```
309

310
### Shell 脚本
311

312
```bash
313
#!/bin/bash
314
# 自动化构建脚本
315

316
echo "开始构建项目..."
317

318
# 安装依赖
319
pnpm install
320

321
# 运行代码检查
322
pnpm run lint
323

324
# 运行测试
325
pnpm run test
326

327
# 构建项目
328
pnpm run build
329

330
echo "构建完成！"
331
```
332

333
### HTML + CSS
334

335
```html
336
<!DOCTYPE html>
337
<html lang="zh-CN">
338
<head>
339
  <meta charset="UTF-8">
340
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
341
  <title>示例页面</title>
342
  <style>
343
    .container {
344
      max-width: 1200px;
345
      margin: 0 auto;
346
      padding: 2rem;
347
    }
348

349
    .card {
350
      background: white;
351
      border-radius: 8px;
352
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
353
      padding: 1.5rem;
354
    }
355
  </style>
356
</head>
357
<body>
358
  <div class="container">
359
    <div class="card">
360
      <h1>欢迎</h1>
361
      <p>这是一个示例页面。</p>
362
    </div>
363
  </div>
364
</body>
365
</html>
366
```
367

368
### SQL 查询
369

370
```sql
371
-- 复杂的 SQL 查询示例
372
SELECT
373
  u.id,
374
  u.name,
375
  u.email,
376
  COUNT(p.id) as post_count,
377
  MAX(p.created_at) as last_post_date
378
FROM users u
379
LEFT JOIN posts p ON u.id = p.user_id
380
WHERE u.active = true
381
  AND u.created_at >= DATE_SUB(NOW(), INTERVAL 1 YEAR)
382
GROUP BY u.id, u.name, u.email
383
HAVING post_count > 5
384
ORDER BY post_count DESC, last_post_date DESC
385
LIMIT 10;
386
```
387

388
### JSON 数据
389

390
```json
391
{
392
  "name": "modern-blog",
393
  "version": "1.0.0",
394
  "description": "现代化的博客系统",
395
  "scripts": {
396
    "dev": "astro dev",
397
    "build": "astro build",
398
    "preview": "astro preview"
399
  },
400
  "dependencies": {
401
    "astro": "^4.0.0",
402
    "react": "^18.0.0"
403
  },
404
  "author": {
405
    "name": "Your Name",
406
    "email": "[email protected]"
407
  }
408
}
409
```
410

411
### YAML 配置
412

413
```yaml
414
# GitHub Actions 工作流配置
415
name: Build and Deploy
416

417
on:
418
  push:
419
    branches: [main]
420
  pull_request:
421
    branches: [main]
422

423
jobs:
424
  build:
425
    runs-on: ubuntu-latest
426

427
    steps:
428
      - name: Checkout 代码
429
        uses: actions/checkout@v3
430

431
      - name: 设置 Node.js
432
        uses: actions/setup-node@v3
433
        with:
434
          node-version: '18'
435

436
      - name: 安装 pnpm
437
        uses: pnpm/action-setup@v2
438
        with:
439
          version: 8
440

441
      - name: 安装依赖
442
        run: pnpm install
443

444
      - name: 构建项目
445
        run: pnpm run build
446
```
447

448
### MDX
449

450
import { Code } from 'astro-expressive-code/components';
451

452
<Code code="import { Code } from 'astro-expressive-code/components'" lang="mdx" />
453

454
## 数学公式
455

456
### 行内公式
457

458
这是一个行内公式 $E = mc^2$，另一个是 $a^2 + b^2 = c^2$。
459

460
当 $a \ne 0$ 时，方程 $ax^2 + bx + c = 0$ 的解为：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$。
461

462
### 块级公式
463

464
$$
465
\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}
466
$$
467

468
$$
469
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
470
$$
471

472
### 矩阵
473

474
$$
475
\begin{bmatrix}
476
a & b & c \\
477
d & e & f \\
478
g & h & i
479
\end{bmatrix}
480
$$
481

482
### 多行公式
483

484
$$
485
\begin{aligned}
486
f(x) &= (x+a)(x+b) \\
487
&= x^2 + (a+b)x + ab \\
488
&= x^2 + cx + d
489
\end{aligned}
490
$$
491

492
### 分段函数
493

494
$$
495
f(x) = \begin{cases}
496
x^2 & \text{if } x \geq 0 \\
497
-x^2 & \text{if } x < 0
498
\end{cases}
499
$$
500

501
### 求和与积分
502

503
$$
504
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
505
$$
506

507
$$
508
\prod_{i=1}^{n} i = n!
509
$$
510

511
$$
512
\oint_C \mathbf{F} \cdot d\mathbf{r} = \iint_S (\nabla \times \mathbf{F}) \cdot d\mathbf{S}
513
$$
514

515
## 水平分隔线
516

517
---
518

519
***
520

521
___
522

523
## 脚注
524

525
这是一个包含脚注的句子[^1]。这是另一个脚注[^note]。
526

527
[^1]: 这是第一个脚注的内容。
528

529
[^note]: 这是一个命名脚注，可以包含多个段落。
530

531
    甚至可以包含代码：
532

533
    ```javascript
534
    console.log('脚注中的代码');
535
    ```
536

537
## 定义列表
538

539
Term 1
540
: 这是术语 1 的定义。
541

542
Term 2
543
: 这是术语 2 的第一个定义。
544
: 这是术语 2 的第二个定义。
545

546
## 缩写
547

548
::abbr[Web]{title="World Wide Web"}
549

550
是由:abbr[HTML]{title="HyperText Markup Language"} 和 :abbr[CSS]{title="Cascading Style Sheets"}、:abbr[JS]{title="Javascript"} 组成。
551

552
当你第一次看到 :abbr[API]{title="Application Programming Interface"} 这个词时，可能会感到困惑。但随着学习的深入，你会发现 :abbr[REST]{title="Representational State Transfer"} 和 :abbr[GraphQL]{title="Graph Query Language"} 都是构建 API 的常用方式。
553

554
## Emoji
555

556
支持 GitHub 风格的 emoji 表情：
557

558
- :smile: `:smile:`
559
- :heart: `:heart:`
560
- :rocket: `:rocket:`
561
- :tada: `:tada:`
562
- :sparkles: `:sparkles:`
563
- :fire: `:fire:`
564
- :bug: `:bug:`
565
- :art: `:art:`
566

567
## 转义字符
568

569
如果要显示特殊字符，需要使用反斜杠转义：
570

571
- \*不是斜体\*
572
- \[不是链接\]
573
- \`不是代码\`
574

575
## 键盘按键
576

577
按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制，按 <kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴。
578

579
## 嵌套结构示例
580

581
> ### 引用块中的标题
582
>
583
> 1. 引用块中的有序列表
584
> 2. 第二项
585
>    - 嵌套的无序列表
586
>    - 另一项
587
>
588
> ```javascript
589
> // 引用块中的代码
590
> const nested = true;
591
> ```
592
>
593
> | 表格 | 在引用块中 |
594
> | --- | --- |
595
> | 数据 | 数据 |
596
>
597
> $E = mc^2$ 引用块中的公式
598

599
## 注释
600

601
{/* 这是一个 MDX 注释，不会在页面上显示 */}
602

603
## 总结
604

605
这篇文章展示了 Markdown 的所有主要语法特性：
606

607
1. **文本格式化**：粗体、斜体、删除线、高亮
608
2. **结构元素**：标题、列表、引用、表格
609
3. **代码展示**：行内代码、多语言代码块、语法高亮
610
4. **数学公式**：行内和块级 LaTeX 公式
611
5. **链接和图片**：各种链接和图片引用方式
612
6. **扩展功能**：脚注、定义列表、任务列表、Emoji
613

614
这些功能足以满足绝大多数技术写作和博客创作的需求。
615

616
## 源码
617

618
import MarkdownExample from './markdown-example.mdx?raw';
619

620
<Code lang="mdx" code={MarkdownExample} collapse="1-999" title="markdown-example.mdx" />

这是第一个脚注的内容。 ↩
这是一个命名脚注，可以包含多个段落。
甚至可以包含代码：
```
1
console.log('脚注中的代码');
```
↩