MDX: support Markdown inside JSX blocks

According to the commonmark spec, it seems that the example below is valid MDX. However, Prettier is throwing an error.

Prettier 1.19.1 Playground link

--parser mdx

Input:

<CodeSurfer>

```js
console.log(1);
```

</CodeSurfer>

Output:

SyntaxError: Unexpected closing tag "CodeSurfer". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:1)
> 1 | <CodeSurfer>
    | ^
  2 | 
  3 | ```js
  4 | console.log(1);

Expected behavior:

If this is valid MDX it should parse it and format it without an error.

[karlhorky]

Sure, although it has been fixed actually. 🤣

Where has this been fixed? In an unreleased version of Prettier?

Ah actually, thanks to @kachkaev’s comment (https://github.com/prettier/prettier/issues/7176#issuecomment-571218217), I just tried adding "prettier": "prettier/prettier" to my devDependencies and it seems to format with all examples here! 🚀

Show gif

So it looks like this will be fixed as soon as Prettier 1.20.0 or 1.19.2 is released. 🙌

Workaround for now:

Change your version of Prettier in your package.json to "prettier": "prettier/prettier". If you’re using VS Code, this new local version will be picked up automatically by prettier-vscode.

[bsgreenb]

This issue has been solved for me via npm i -D prettier@latest