Markdown
MDX
使用Nextra，pages目录下的所有.mdx文件都将使用MDX (opens in a new tab)进行渲染，这是一种具有React组件支持的高级Markdown格式。
例如，你可以在Markdown文件中像这样导入和使用React组件：
Markdown
## Hello MDX
import { useState } from 'react'
export function Counter({ children }) {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
{children}
{count}
</button>
)
}
<Counter>**Clicks**: </Counter>代码效果:
除了基本的MDX，Nextra还内置了一些高级Markdown功能。
GitHub Flavored Markdown：GFM
GFM (opens in a new tab) 是Markdown的扩展，由GitHub创建，添加了支持删除线、任务列表、表格等功能。
删除线
removed
Markdown
~~removed~~任务列表
Markdown
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media效果：
- Write the press release
- Update the website
- Contact the media
表格
Markdown
| Syntax | Description | Test Text |
| :------------ | :---------: | ----------: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Strikethrough | | ~~Text~~ |效果：
| Syntax | Description | Test Text |
|---|---|---|
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Strikethrough |
自动链接
效果：
Visit https://nextjs.org (opens in a new tab).
代码：
Visit https://nextjs.org.自定义标题 ID
你可以使用格式 ## 我的标题 [#custom-id] 来指定自定义的标题 ID。
例如：
代码：
Markdown
## Long heading about Nextra [#about-nextra]在这个例子中，#about-nextra 将被用作标题链接，取代默认的 #long-heading-about-nextra。
扩展的语法高亮
查看语法高亮部分获取更多信息：