引言

Markdown 和 Mdx 解析通过 unified 以及其他 remark 和 rehype 包提供支持。next-mdx-remote 允许我们以更灵活的方式解析 .mdx 和 .md 文件，而无需触动 webpack。

使用了 GitHub 风格的 Markdown。mdx-prism 为代码块提供语法高亮功能。以下是整体效果的演示。

以下 Markdown 速查表改编自：https://guides.github.com/features/mastering-markdown/

什么是 Markdown？

Markdown 是一种在 Web 上为文本设置样式的方法。你可以控制文档的显示；将文字格式化为加粗或斜体、添加图片以及创建列表只是我们可以使用 Markdown 做的几件事。大多数情况下，Markdown 只是普通文本，加上了一些非字母字符，如 # 或 *。

语法指南

以下是 Markdown 语法的概述，你可以在 GitHub.com 的任何地方或你自己的文本文件中使用它。

标题

# 这是 h1 标签

## 这是 h2 标签

#### 这是 h4 标签

这是 h1 标签

这是 h2 标签

这是 h4 标签

强调

_此文本将是斜体_

**此文本将是粗体**

_你 **可以** 组合它们_

此文本将是斜体

此文本将是粗体

你可以组合它们

列表

无序列表

- 项目 1
- 项目 2
  - 项目 2a
  - 项目 2b

项目 1
项目 2
- 项目 2a
- 项目 2b

有序列表

1. 项目 1
1. 项目 2
1. 项目 3
   1. 项目 3a
   1. 项目 3b

项目 1
项目 2
项目 3
1. 项目 3a
2. 项目 3b

图片

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
格式: ![替代文本](url)

GitHub Logo

链接

http://github.com - 自动识别！
[GitHub](http://github.com)

http://github.com - 自动识别！ GitHub

引用

正如 Kanye West 所说：

> 我们生活在未来，所以
> 现在就是我们的过去。

正如 Kanye West 所说：

我们生活在未来，所以现在就是我们的过去。

行内代码

我认为你应该在这里使用
`<addr>` 元素。

我认为你应该在这里使用 <addr> 元素。

语法高亮

以下是一个关于如何使用 GitHub 风格 Markdown 进行语法高亮的示例：

```js:fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

这是它的外观——带有样式的代码标题和漂亮的着色！

fancyAlert.js

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}

脚注

这是一个简单的脚注[^1]。后面还有一些额外的文本。

[^1]: 我的引用。

这是一个简单的脚注¹。后面还有一些额外的文本。

任务列表

- [x] 需要列表语法（支持任何无序或有序列表）
- [x] 这是一个完整的项目
- [ ] 这是一个不完整的项目

需要列表语法（支持任何无序或有序列表）
这是一个完整的项目
这是一个不完整的项目

表格

你可以通过组合一系列单词并使用连字符 -（用于第一行）进行分隔，然后使用竖线 | 分隔每个列来创建表格：

| 第一标题                | 第二标题                |
| --------------------------- | ---------------------------- |
| 单元格 1 的内容         | 单元格 2 的内容          |
| 第一列的内容         | 第二列的内容          |

第一标题	第二标题
单元格 1 的内容	单元格 2 的内容
第一列的内容	第二列的内容

删除线

任何用两个波浪号包裹的单词（如 ~~这样~~）都会显示为~~删除线~~。

Footnotes

我的引用。 ↩