MDX

使用 Nextra，pages 目录下面的所有 .md 和 .mdx 文件都会使用 MDX 来渲染，它是一个 支持 React 组件的高级 Markdown 格式。

你可以在 Markdown 文件中导入和使用 React 组件，如下所示：

import Callout from 'nextra-theme-docs/callout'
**Markdown With React Components**
<Callout emoji="✅">
  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
  It receives an MDX string and outputs a _JSX string_. It does this by parsing
  the MDX document to a syntax tree and then generates a JSX document from that tree. 
</Callout>

生成：

标题#

Hello, This Is a Title Inside h1

Hello, This Is a Title Inside h2#

Hello, This Is a Title Inside h3#

Hello, This Is a Title Inside h4#

Hello, This Is a Title Inside h5#

Hello, This Is a Title Inside h6#

列表#

1. one
2. two
3. three

• one
• two
• three

任务列表#

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

显示：

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

语法高亮#

自动语法高亮显示：

```js
console.log('hello, world')
```

显示：

console.log('hello, world')

您还可以添加 highlight=<line|range> 修饰符来高亮显示特定行：

```jsx highlight=4,6-8
import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

內联代码#

你可以使用 `content` 来包装内联代码内容，例如：let x = 1。

引用块#

Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.

— Alan Kay, A Personal Computer for Children of All Ages

嵌套引用：

Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.

— Alan Kay, A Personal Computer for Children of All Ages

This is great.

— Shu Ding.

表格#

React 组件#

React 组件和 Markdown 可以组合使用，例如：

> <Callout>
>   Give [**Nextra**](https://github.com/shuding/nextra) a star!
> </Callout>

显示：

💡

Give Nextra a star!