Markdown
MDX
With Nextra, all your .mdx
files under the pages directory will be rendered
with MDX (opens in a new tab), 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:
Besides basic MDX, Nextra also has some advanced Markdown features built-in.
GitHub Flavored Markdown
GFM (opens in a new tab) is an extension of Markdown, created by GitHub, that adds support for strikethrough, task lists, tables, and more.
Strikethrough
removed
~~removed~~
Task List
- 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 |
| 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.
Custom Heading Id
You can specify custom heading id using the format ## My heading [#custom-id]
.
For example:
## Long heading about Nextra [#about-nextra]
In this example, #about-nextra
will be used as the heading link, replacing the
default #long-heading-about-nextra
.
Extended Syntax Highlighting
Check out the Syntax Highlighting section for more information: