MDX file - text formatting tags

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

console.log('hello, world')

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