Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code blocks inside JSX tags disrupt highlighting #22

Open
Josh-Cena opened this issue Oct 4, 2021 · 8 comments
Open

Code blocks inside JSX tags disrupt highlighting #22

Josh-Cena opened this issue Oct 4, 2021 · 8 comments

Comments

@Josh-Cena
Copy link

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
Copy link
Author

/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
Copy link

favna commented Oct 23, 2021

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

image

@Josh-Cena
Copy link
Author

@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
Copy link

favna commented Oct 23, 2021

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
Copy link
Author

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
Copy link

pomber commented Oct 25, 2021

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
Copy link
Author

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants