import { compileMdx } from 'nextra/compile' import { Callout } from 'nextra/components' import { MDXRemote } from 'nextra/mdx-remote'

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:

export async function Demo() { const mdx = `import { Callout } from 'nextra/components'

Markdown With React Components

Generates:

${mdx}`) return <MDXRemote compiledSource={rawJs} components={{ Callout }} /> }

Headings

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

Automatic syntax highlighting

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

Renders:

console.log('hello, world')

You can also add the {line|range} modifier to highlight specific lines:

```jsx {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:

<Callout>Give Nextra a star!</Callout>