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

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

With next/image:

Image
<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.