Codeblocks inside tabs doesn't work

[MarvinSzyperski]

🐛 Bug Report

Codeblocks with ``` does not work inside a JSX . Even with a 1:1 copied Text from the docusaurus doc

Have you read the Contributing Guidelines on issues?

Yes, just read it.

To Reproduce

1. Create a mdx file and paste the code from https://v2.docusaurus.io/docs/2.0.0-alpha.69/markdown-features#multi-language-support-code-blocks

2. start docusaurus

Expected behavior

Docusaurus should compile normaly and show the code like it does the docs site.

Actual Behavior

Docusaurus compiles with error and the site shows an error aswell.

The same error appears on the browser. I just set up a new docusaurus on the latest version and did the same. Same error.

It seems like a closing tag of TabItem is commented out/ inside a string. When not using codeblocks but normal text or other markdown (with a newline), the error still appears.

Your Environment

• Docusaurus version used: 2.0.0-alpha.69
• Environment name and version: Node 14.9.0
• Operating system and version (desktop or mobile): Windows 10 (desktop)

Reproducible Demo

(Paste the link to an example repo, including a siteConfig.js, and exact instructions to reproduce the issue.) https://github.com/MarvinSzyperski/docus

I really don't know what a siteConfig.js does, sorry.

I found a mdx issue similar to that, with the same error: https://github.com/mdx-js/mdx/issues/1239

[slorber]

Hi,

The MDX parser is quite sensitive to formatting, for example white spaces are important.

I can't help you more because you do not give here. the exact content of your markdown file, and the setup/testx.mdx file is not present in your repro either.

But it works for me:

[slorber]

You can validate your mdx content against the mdx parser here to debug issues: https://mdxjs.com/playground

[MarvinSzyperski]

Oh that was my bad the setup/test.mdx file is from the old project, on the repo its under docs/doc.mdx.

Anyway with the playgroud i realized that my IDE changed the indents when pasted and the MDX parser couldnt handle that. It would be nice to mention this somewhere. Now that I changed my IDE to 2 spaces indents it just works fine.

[slorber]

It would be nice to mention this somewhere.

Totally agree, but I'm not sure where exactly.

If you have any suggestion please submit a doc PR.

Closing as you were able to find a solution

[antonygibbs]

Hi,

The MDX parser is quite sensitive to formatting, for example white spaces are important.

I can't help you more because you do not give here. the exact content of your markdown file, and the setup/testx.mdx file is not present in your repro either.

But it works for me:

@slorber Can you please share how you acheived this? I and trying to do the same to no avail...

[armano2]

formatting is important for mdx files

your example:

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

<Tabs
    defaultValue="js"
    values={[
        { label: 'JavaScript', value: 'js', },
        { label: 'Python', value: 'py', },
        { label: 'Java', value: 'java', },
    ]
    }>
    <TabItem value="js">

        ```js
        function helloWorld() {
        console.log('Hello, world!');
    }

</TabItem>
<TabItem value="py">

    ```py
    def hello_world():
    print 'Hello, world!'
    ```

</TabItem>
<TabItem value="java">

    ```java
    class HelloWorld {
    public static void main(String args[]) {
    System.out.println("Hello, World");
}
}
    ```

</TabItem>

and what you want to have is

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

<Tabs
  defaultValue="js"
  values={[
      { label: 'JavaScript', value: 'js', },
      { label: 'Python', value: 'py', },
      { label: 'Java', value: 'java', },
  ]}
>
<TabItem value="js">

```js
function helloWorld() {
  console.log('Hello, world!');
}

```py def hello_world(): print 'Hello, world!' ``` ```java class HelloWorld { public static void main(String args[]) { System.out.println("Hello, World"); } } ```

bdw, you can use shorter syntax for this:
label property can be applied on `TabItem`, and if `defaultValue` is not present first tab is going to be chosen

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

<Tabs>
<TabItem value="js" label="JavaScript">

```js
function helloWorld() {
  console.log('Hello, world!');
}

```py def hello_world(): print 'Hello, world!' ``` ```java class HelloWorld { public static void main(String args[]) { System.out.println("Hello, World"); } } ```

[lylest]

still not working

[dupenodi]

formatting is important for mdx files

your example:

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

<Tabs
    defaultValue="js"
    values={[
        { label: 'JavaScript', value: 'js', },
        { label: 'Python', value: 'py', },
        { label: 'Java', value: 'java', },
    ]
    }>
    <TabItem value="js">

        ```js
        function helloWorld() {
        console.log('Hello, world!');
    }

</TabItem>
<TabItem value="py">

    ```py
    def hello_world():
    print 'Hello, world!'
    ```

</TabItem>
<TabItem value="java">

    ```java
    class HelloWorld {
    public static void main(String args[]) {
    System.out.println("Hello, World");
}
}
    ```

</TabItem>

and what you want to have is

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

<Tabs
  defaultValue="js"
  values={[
      { label: 'JavaScript', value: 'js', },
      { label: 'Python', value: 'py', },
      { label: 'Java', value: 'java', },
  ]}
>
<TabItem value="js">

```js
function helloWorld() {
  console.log('Hello, world!');
}

```py def hello_world(): print 'Hello, world!' ``` ```java class HelloWorld { public static void main(String args[]) { System.out.println("Hello, World"); } } ```

bdw, you can use shorter syntax for this: label property can be applied on `TabItem`, and if `defaultValue` is not present first tab is going to be chosen

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

<Tabs>
<TabItem value="js" label="JavaScript">

```js
function helloWorld() {
  console.log('Hello, world!');
}

```py def hello_world(): print 'Hello, world!' ``` ```java class HelloWorld { public static void main(String args[]) { System.out.println("Hello, World"); } } ```

you're truly a saviour!! thank godd for youuu!!!