Code blocks inside JSX tags disrupt highlighting

[Josh-Cena]

Two repros:

<Code>

```java
class Hi {
  public static void main(String args[]) {
    console.log("Hi");
  }
}

![image](https://user-images.githubusercontent.com/55398995/135869706-f3cf6025-47f2-4f38-85ac-3e5e69125912.png)

````jsx
<details>

```bash
website/<locale>/docs

Title

![image](https://user-images.githubusercontent.com/55398995/135869762-2480c53b-ec05-4c4a-8c1a-aed4d960d782.png)

[Josh-Cena]

/cc @silvenon If you are available to take a look at this... Doesn't look too easy to solve IMO, I don't have a solution on top of my head, so not sending a PR yet

[favna]

Commenting to follow this issue because I'm facing the problem as well:

[Josh-Cena]

@Favna If you think this has affected you significantly, you may want to wrap the entire Tabs in mdx-code-block: https://docusaurus.io/docs/i18n/crowdin#mdx-solutions This is a really useful escape hatch for multiple issues, including this one. Remember to use four backticks though

[favna]

I just tried it in 1 document, but that removes all syntax highlighting except that of headers. It's not really much better IMHO.

[Josh-Cena]

I just tried it in 1 document, but that removes all syntax highlighting except that of headers. It's not really much better IMHO.

Don't wrap the entire document, just the broken <Tabs> component. You do lose highlighting for that comp, but you still have highlighting for the rest.

[pomber]

Isn't this the same problem as #14?

I'm very interested in a solution. I know nothing about textmate grammars but let me know if I can help.

[Josh-Cena]

Yes, they are caused by the same reason, but are manifested differently and have different impacts IMO. In their case, the inline code is not getting any highlight whatsoever, while in this case, it's getting highlighted, but in a very incorrect way (the content is seen as JSX rather than MD) which prevents any succeeding text from being parsed correctly. If possible, I'd rather have the text between JSX tags treated as plain text with no highlighting at all.

[Josh-Cena]

I have some experience with textmate but considering the current status of MDX (as you mentioned in #14) and how occupied I've been recently, I would wait for a few months before forking this and releasing my own extension if I got no response XD