Markdown and React

You can write normal .md files or the more powerful .mdx format.

Use MDX to import and use React components inside your Markdown file:

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:

Markdown With React Components

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.

List

  1. one
  2. two
  3. three
  • one
  • two
  • three

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

Code Highlighting

Code highlighting with focused lines using

```jsx highlight=2,3
function App() {
// these 2 lines will be highlighted
return <App>My JSX Code</App>
}
```
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: let x = 1.
Multiple lines: 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

And 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

SyntaxDescriptionTest Text
HeaderTitleHere's this
ParagraphTextAnd more
StrikethroughText

With next/image:

Image
Nextra
<Image src="/og.png" alt="Nextra" width={1536/2} height={768/2} layout="intrinsic"/>

Task List

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

Click the "Edit this page on GitHub" link below to see the code.