Mdx: Unexpected HTML output in aside > details > ul

[EddyVinck]

Subject of the issue

I don't think the output for this MDX this is correct:

<aside>
  foo bar baz

  <details>
    <summary>foo bar baz</summary>

    In no particular order

    - foo
    - bar
    - baz

  </details>
</aside>

Outputs:

<aside>
  foo bar baz
  <details open="">
    <summary>foo bar baz</summary>
    <pre>
      <code>
        In no particular order

        - foo
        - bar
        - baz
      </code>
    </pre>
  </details>
</aside>

Your environment

• OS: Ubuntu 20.04
• Packages: "@mdx-js/mdx": "^1.6.19", "@mdx-js/react": "^1.6.19", "gatsby-plugin-mdx": "^1.2.25", and "@mdx-js/runtime": "1.6.19" in the codesandbox below
• Env: Node 12.6, yarn 1.21.1

Steps to reproduce

https://codesandbox.io/s/mdx-forked-tls88?file=/src/App.js

Expected behaviour

It should output <ul> and multiple <li>

<aside>
  foo bar baz
  <details open="">
    <summary>foo bar baz</summary>

    In no particular order

    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
  </details>
</aside>

I ran the expected output through https://validator.w3.org/#validate_by_input and it passed, so I'm not sure why I'm getting the unexpected output.

Actual behaviour

It should not output <pre> and <code> in this example.

[ChristianMurphy]

This works as expected, indent in markdown creates a codeblock.

not adding the indent

<aside>
foo bar baz
<details>
<summary>foo bar baz</summary>

In no particular order

- foo
- bar
- baz

</details>
</aside>

creates the output expected.

If you want to disable indented codeblocks, see https://github.com/mdx-js/mdx/issues/993

[wooorm]

To add: on the next branch of MDX, code blocks are removed, so that you can indent however you like. But, that also results in weirdness for users, because they expect MDX to work like markdown. So I’m not too sure about that.

[EddyVinck]

Thanks @ChristianMurphy, I guess I just never came across this use case before using MDX.