Markdown

MDX

With Nextra, all your .mdx files under the content directory will be rendered with MDX , it’s an advanced Markdown format with React component support.

For example, you can use import and use React components inside your MDX files like this:

## 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  是一个由 GitHub 创建的 Markdown 扩展， 增加了对删除线（ strikethrough）、任务列表（task lists）、表格（tables）等功能的支持。

删除线（ strikethrough）

removed

~~removed~~

任务列表（task lists）

• Write the press release
• Update the website
• Contact the media

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

表格（tables）

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

自动转连接（Autolinks）

Visit https://nextjs.org .

Visit https://nextjs.org.

自定义标题的 Id

您可以使用 ## My heading [#custom-id] 格式来自定义标题的 id。 例如：

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

In this example, #about-nextra will be used as the heading link, replacing the default #long-heading-about-nextra.