中文文档
Markdown

Markdown

MDX

Nextra 将 pages 目录下所有带有 .mdx 扩展名的文件使用 MDX (opens in a new tab) 进行渲染。MDX 是一个支持 React 组件的 升级版 Markdown 格式。

例如,您可以在 Markdown 文件中导入(import)并使用 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 (opens in a new tab) 是一个由 GitHub 创建的 Markdown 扩展, 增加了对删除线( strikethrough)、任务列表(task lists)、表格(tables)等功能的支持。

删除线( strikethrough)

removed

Markdown
~~removed~~

任务列表(task lists)

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

表格(tables)

SyntaxDescriptionTest Text
HeaderTitleHere's this
ParagraphTextAnd more
StrikethroughText
Markdown
| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

自动转连接(Autolinks)

Visit https://nextjs.org (opens in a new tab).

Visit https://nextjs.org.

自定义标题的 Id

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

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

在上面的示例中,#about-nextra 将被用作标题链接,取代 默认的 #long-heading-about-nextra

经过扩充的语法高亮功能

查看语法高亮章节以了解更多信息: