MDX

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

You can use import and use React components inside your Markdown files like this:

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>

Generates:

Heading#

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#

List#

1. one
2. two
3. three

• one
• two
• three

Task List#

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

Renders

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

Syntax Highlighting#

Automatica syntax highlighting:

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

Renders:

console.log('hello, world')

You can also add the highlight=<line|range> modifier to highlight specific lines:

```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>
}

Inline Code#

You can use `content` to wrap inline code content like: let x = 1.

Blockquote#

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

Nested quotes:

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.

Table#

React Components#

React components and Markdown can be mixed together, for instance:

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

Renders:

💡

Give Nextra a star!