MDX file - text formatting tags

MDX, is an advanced Markdown format with React component support. With Nextra, all your .md and .mdx files under the pages directory will be rendered with MDX. For understanding advanced capabilities of MDX the linked blog post is a recommended reading.

Syntax Highlighting

Automatic syntax highlighting:

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

Renders:

console.log('hello, world')

You can also add the highlight=<line|range> modifier to highlight specific lines:

```jsx highlight=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>
}
```
 
```jsx highlight=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>
}
```
 
## Inline Code
 
You can use \`content\` to wrap inline code content like: `let x = 1`.
 
 
 
## React Components
 
React components and Markdown can be **mixed together**, for instance:
 
```markdown
> <Callout>
>   Give [**Nextra**](https://github.com/shuding/nextra) a star!
> </Callout>
```
 
Renders:
 
> <Callout>
>   Give [**Nextra**](https://github.com/shuding/nextra) a star!
> </Callout>
 
 
 
# Using React Components
You can use import and use React components inside your Markdown files like this:
 
```markdown
import { Callout } from 'nextra-theme-docs'
 
**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:
 
import { Callout } from 'nextra-theme-docs'
 
<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
**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>
</div>

Knowledge Base