CODEWITHSUNDEEP
docusaurusmdxjs
angelcervera
angelcervera

Reputation: 4177

Markdown content in tabs using Docusaurus v2

I try to add markdown code inside a Tab, as explain the documentation.

The name file name has .mdx extension.

Here its content:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs
    defaultValue="javascript"
    values={[
        {label: 'Javascript', value: 'javascript'},
        {label: 'Other', value: 'other'},
    ]}>
    <TabItem value="javascript">

```jsx
Formated code here
```

    </TabItem>
    <TabItem value="other">This is an orange 🍊</TabItem>
</Tabs>

But I'm getting this error:

SyntaxError: /home/angelcc/projects/simplex/osm4scala/website/docs/example.mdx: Expected corresponding JSX closing tag for <TabItem> (21:0)

  19 | <TabItem value="other">This is an orange 🍊</TabItem>
  20 | `}</code></pre>
> 21 | </Tabs>
     | ^
  22 |     </MDXLayout>
  23 |   )
  24 | };

No idea what I am doing wrong.

Versions:

"@docusaurus/core": "2.0.0-alpha.72",
"@docusaurus/preset-classic": "2.0.0-alpha.72",
"@mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"

npm 6.12.1
node v12.13.1

Any suggestion?

Upvotes: 12

Views: 4471

Answers (2)

Jad Khoury
Jad Khoury

Reputation: 41

For me removing the spaces was not enough. So I did the following:

```mdx-code-block
<Tabs
    defaultValue="javascript"
    values={[
        {label: 'Javascript', value: 'javascript'},
        {label: 'Other', value: 'other'},
    ]}>
<TabItem value="javascript">
```

```jsx
Formated code here
```

```mdx-code-block
</TabItem>
<TabItem value="other">This is an orange</TabItem>
</Tabs>
```

Upvotes: 2

Maheymus
Maheymus

Reputation: 146

You should delete spaces before tags <TabItem> and </TabItem>. I don't know why, but it's work. it should be like this:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs
    defaultValue="javascript"
    values={[
        {label: 'Javascript', value: 'javascript'},
        {label: 'Other', value: 'other'},
    ]}>
<TabItem value="javascript">

    ```jsx
    Formated code here
    ```

</TabItem>
<TabItem value="other">This is an orange</TabItem>
</Tabs>

Upvotes: 13

Related Questions