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)
Syntax | Description | Test Text |
---|---|---|
Header | Title | Here's this |
Paragraph | Text | And more |
Strikethrough |
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
。
经过扩充的语法高亮功能
查看语法高亮章节以了解更多信息: