markdown.mdx

Markdown

MDX

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

For example, you can use import and use React components inside your Markdown files like this:

## 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>

Generates:

import { useState } from 'react' import { Shadow } from '@components/utils/shadow'

export function Counter({ children }) { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>{children}{count} }

Hello MDX

**Clicks**:

Besides basic MDX, Nextra also has some advanced Markdown features built-in.

GitHub Flavored Markdown

GFM is an extension of Markdown, created by GitHub, that adds support for strikethrough, task lists, tables, and more.

Strikethrough

removed

~~removed~~

Task List

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

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

Table

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more
Strikethrough		Text

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

Autolinks

Visit https://nextjs.org.

Visit https://nextjs.org.

Extended Syntax Highlighting

Nextra supports automatic syntax highlighting:

console.log('hello, world')

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

Inlined syntax highlighting is also supported let x = 1{:jsx} via:

Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:

(todo: line number and copy)

Read more about the syntax highlighting in the next section: