精美 MDX

contents 目录下的所有 .md 和 .mdx 文件都将使用 MDX 渲染， 这是一种支持 React 组件的高级 Markdown 格式。

标题

渲染效果：

你好，这是 h1 中的 标题

你好，这是 h2 中的 标题

你好，这是一个非常非常非常非常非常非常非常非常长的 h2 标题

你好，这是 h3 中的 标题

你好，这是一个非常非常非常非常非常非常非常非常长的 h3 标题

你好，这是 h4 中的 标题

你好，这是 h5 中的 标题

你好，这是 h6 中的 标题

列表

无序列表

渲染效果：

• 使用 +、- 或 * 开始一行来创建列表。
• 通过缩进 2 个空格来创建子列表：
  • 更改标记字符会强制开始新列表：
    • Ac tristique libero volutpat at.
    • Facilisis in pretium nisl aliquet.
    • Nulla volutpat aliquam velit.
• 非常简单！

有序列表

顺序编号：

渲染效果：

1. Lorem ipsum dolor sit amet:
   1. Lorem ipsum dolor sit amet:
      1. Lorem ipsum dolor sit amet.
      2. Consectetur adipiscing elit.
      3. Integer molestie lorem at massa.
   2. Consectetur adipiscing elit:
      1. Lorem ipsum dolor sit amet.
   3. Integer molestie lorem at massa:
      1. Lorem ipsum dolor sit amet.
      2. Consectetur adipiscing elit.
2. Consectetur adipiscing elit:
   1. Lorem ipsum dolor sit amet:
      1. Lorem ipsum dolor sit amet.
      2. Consectetur adipiscing elit.
   2. Consectetur adipiscing elit:
      1. Lorem ipsum dolor sit amet.
      2. Consectetur adipiscing elit.
      3. Integer molestie lorem at massa.
3. Integer molestie lorem at massa:
   1. Lorem ipsum dolor sit amet.
   2. Consectetur adipiscing elit.
   3. Integer molestie lorem at massa.

相同编号：

渲染效果：

1. 你可以将所有数字保持为 1.：
   1. Lorem ipsum dolor sit amet:
      1. Lorem ipsum dolor sit amet.
      2. Lorem ipsum dolor sit amet.
      3. Lorem ipsum dolor sit amet.
   2. Lorem ipsum dolor sit amet:
      1. Lorem ipsum dolor sit amet.
   3. Lorem ipsum dolor sit amet:
      1. Lorem ipsum dolor sit amet.
      2. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet:
   1. Lorem ipsum dolor sit amet.
   2. Lorem ipsum dolor sit amet.
   3. Lorem ipsum dolor sit amet.

从偏移量开始编号：

渲染效果：

108. 108 编号列表。
109. 1 编号列表。
110. 1 编号列表。

任务列表

渲染效果：

• 撰写新闻稿。
• 更新网站。
• 联系媒体。

水平分割线

渲染效果：

---

渲染效果：

---

渲染效果：

---

强调

粗体

渲染效果：

这是粗体文本。

这是粗体文本。

斜体

渲染效果：

这是斜体文本。

这是斜体文本。

删除线

渲染效果：

这是删除线文本。

这是删除线文本。

引用

嵌套引用

渲染效果：

引用也可以嵌套...

...通过在彼此旁边使用额外的大于号...

...或在箭头之间使用空格。

连续引用

渲染效果：

引用也可以继续... ...继续... ...继续继续...

长引用

渲染效果：

引用可以非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...非常非常非常非常非常非常非常非常长...

表格

基础表格

a	b	c	d
10	200	3600	48000
200	10	48000	3600
3600	48000	10	200
48000	3600	200	10

选项	描述
data	提供将传递到模板中的数据文件的路径。
engine	用于处理模板的引擎。Handlebars 是默认引擎。
ext	用于目标文件的扩展名。

左对齐表格

选项	描述
data	提供将传递到模板中的数据文件的路径。
engine	用于处理模板的引擎。Handlebars 是默认引擎。
ext	用于目标文件的扩展名。

居中对齐表格

选项	描述
data	提供将传递到模板中的数据文件的路径。
engine	用于处理模板的引擎。Handlebars 是默认引擎。
ext	用于目标文件的扩展名。

右对齐表格

选项	描述
data	提供将传递到模板中的数据文件的路径。
engine	用于处理模板的引擎。Handlebars 是默认引擎。
ext	用于目标文件的扩展名。

代码

内联 代码。

代码块"围栏"：

语法高亮：

链接

基础链接

渲染效果：

链接文本。

带标题的链接。

自动链接

自动转换的链接：

• www.example.com: www.example.com。
• https://example.com: https://example.com。
• contact@example.com: contact@example.com。

脚注

渲染效果（脚注在文档末尾渲染）：

一个注释¹。

另一个注释²。

还有一个注释³。

图片

本地图片

渲染效果：

No Image Available

远程图片

渲染效果：

No Image Available

错误图片

渲染效果：

No Image Available

图片标题

渲染效果：

No Image AvailableThe Stormtroopocat

图片脚注

像链接一样，图片也有脚注样式语法：

在文档后面定义 URL 位置的引用：

渲染效果：

No Image AvailableThe Dojocat

JSX

JSX 元素

渲染效果：

JSX 标题 2

HTML 是一种可爱的语言。

这里是 JSX 中的 markdown！

我可以在 JSX 旁边编写 Markdown！

JavaScript 表达式

渲染效果：

两个 🍰 是：6.283185307179586。

渲染效果：

谁会猜到？！

MDX 注释

不渲染任何内容。

Git

• 提交 4c5361e: 4c5361e。
• 提交（fork）foo@4c5361e: foo@4c5361e。
• 提交（项目）remarkjs/remark@e1aa9f6: remarkjs/remark@e1aa9f6。
• Issue 或 PR（#）#1: #1。
• Issue 或 PR（GH-）GH-100: GH-100。
• Issue 或 PR（fork）foo#1: foo#1。
• Issue 或 PR（项目）remarkjs/remark#1: remarkjs/remark#1。
• 提及 @sabertazimi: @sabertazimi。

Emoji

点赞 :+1: 👍，点踩 :-1: 👎。

家庭 :family_man_man_boy_boy: 👨‍👨‍👦‍👦。

一些国旗 :cn:, :us:, :ru:, :uk:, :fr: 🇨🇳, 🇺🇸, 🇷🇺, 🇬🇧, 🇫🇷。

庆祝 :tada: 🎉，闪光 :sparkles: ✨，火箭 :rocket: 🚀。

Bug :bug: 🐛，扳手 :wrench: 🔧，闪电 :zap: ⚡。

数学公式

行内数学公式

这是一个数学公式 $\sqrt{a^2 + b^2}$ $\sqrt{a^2 + b^2}$。

这是另一个数学公式 $c = \pm\sqrt{a^2 + b^2}$ $c = \pm\sqrt{a^2 + b^2}$。

块级数学公式

$$L = \frac{1}{2} \rho v^2 S C_L$$ $$\def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array}$$ $$\begin{equation} \begin{split} a &= b + c \\ &= e + f \end{split} \end{equation}$$ $$\begin{align} a &= b + c \\ d + e &= f \end{align}$$ $$\begin{alignat}{2} 10 &x + &3 &y = 2 \\ 3 &x + &13 &y = 4 \end{alignat}$$

提示框

绿色提示框

渲染效果：

蓝色提示框

渲染效果：

黄色提示框

渲染效果：

红色提示框

渲染效果：

带标题的提示框

渲染效果：

渲染效果：

嵌套提示框

渲染效果：

MDX 组件

渲染效果：

MDX 按钮 MDX 默认按钮

---

渲染效果：

MDX 轮廓按钮 MDX 次要按钮 MDX 链接按钮

---

渲染效果：

MDX 危险按钮 MDX 幽灵按钮

Footnotes

1. 大注释。 ↩

2. 小注释。 ↩

3. 最小注释。 ↩