vscode-mdx icon indicating copy to clipboard operation
vscode-mdx copied to clipboard

Code blocks inside JSX tags disrupt highlighting

Open Josh-Cena opened this issue 4 years ago • 8 comments

Two repros:

<Code>

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

</Code>

image

<details>

```bash
website/<locale>/docs
```

</details>

# Title

image

Josh-Cena avatar Oct 04 '21 14:10 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

Josh-Cena avatar Oct 17 '21 11:10 Josh-Cena

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

image

favna avatar Oct 23 '21 14:10 favna

@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

Josh-Cena avatar Oct 23 '21 14:10 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.

favna avatar Oct 23 '21 21:10 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.

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.

Josh-Cena avatar Oct 24 '21 00:10 Josh-Cena

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.

pomber avatar Oct 25 '21 10:10 pomber

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 avatar Oct 25 '21 11:10 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

Josh-Cena avatar Oct 25 '21 11:10 Josh-Cena