Markdown

MDX

借助 Nextra，您在 content 目录下的所有 .mdx 文件将使用 MDX 进行渲染，它是一种支持 React 组件的高级 Markdown 格式。

例如，您可以在 MDX 文件中导入并使用 React 组件，如下所示：

MDX


## Hello MDX
 
import { useState } from 'react'
 
export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      {children}
      {count}
    </button>
  )
}
 
<Counter>**Clicks**: </Counter>

生成：

除了基本的 MDX 之外，Nextra 还内置了一些高级 Markdown 功能。

GitHub Flavored Markdown

GFM 是 Markdown 的扩展，由 GitHub 创建，它添加了对删除线、任务列表、表格等的支持。

删除线

~~已删除~~

Markdown


~~removed~~

任务列表

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

Markdown


- [x] 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~~ |

自动链接

访问 https://nextjs.org。


Visit https://nextjs.org。

自定义标题 ID

您可以使用格式 ## 我的标题 [#custom-id] 指定自定义标题 ID。例如：

Markdown


## Long heading about Nextra [#about-nextra]

在此示例中，#about-nextra 将用作标题链接，替换默认的 #long-heading-about-nextra。