# MDX code blocks test document

## Some basic markdown

text

[link](https://facebook.com)

**bold**

![image](https://facebook.com/favicon.ico)

## Some basic MDX

import XYZ from 'xyz';

<XYZ abc="1" def={[1, '42', {hello: 'world'}]} style={{color: 'red'}}>
  <span>Test</span>
</XYZ>

## Some basic MDX code block

```mdx-code-block
import Avatar from 'avatar';

<Avatar style={{color: 'red'}}>
  <div>Sebastien Lorber</div>
</Avatar>
```

## Some complex MDX with nested code blocks

<Tabs
  defaultValue="bash"
  values={[
    { label: 'Bash', value: 'bash' },
    { label: 'Windows', value: 'windows' },
    { label: 'PowerShell', value: 'powershell' }
]}>
  <TabItem value="bash">

```bash
GIT_USER=<GITHUB_USERNAME> yarn deploy
```

  </TabItem>
  <TabItem value="windows">

    ```batch
    cmd /C "set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy"
    ```

  </TabItem>
  <TabItem value="powershell">

```powershell
cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'
```

  </TabItem>
</Tabs>

## Some complex MDX code block with nested code blocks

````mdx-code-block
<Tabs
  defaultValue="bash"
  values={[
    { label: 'Bash', value: 'bash' },
    { label: 'Windows', value: 'windows' },
    { label: 'PowerShell', value: 'powershell' }
]}>
<TabItem value="bash">

```bash
GIT_USER=<GITHUB_USERNAME> yarn deploy
```

</TabItem>
<TabItem value="windows">

```batch
cmd /C "set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy"
```

</TabItem>
<TabItem value="powershell">

```powershell
cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'
```

</TabItem>
</Tabs>
````
