Code Tabs do not allow HMTL comments within code blocks

[Glavin001]

🐛 Bug Report

Language-specific Code Tabs creates a new tab for HTML comments within code blocks.

Related to:

• [Enhancement] Improved code blocks #103
• feat: code block tab #1063
• Document specifying beautifier config file, use Docusaurus tabs for code Unibeautify/website#211

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Use the following Markdown: https://gist.github.com/Glavin001/88acfd445ecdd013b129a412fd180b75
2. Run Docusaurus and view page.

Expected behavior

Should have HTML tab:

Actual Behavior

Should have HTML tab and not have a tab for the HTML comment:

Reproducible Demo

See Unibeautify/website#211 (comment)

[fiennyangeln]

I think this is due to our syntax choice for the CodeTabs and can be fixed by changing the syntax. However, we need to think of what syntax to use such that it doesn't overlap with any language syntax. E.g adding DOCUSAURUS in the syntax?

[endiliey]

@fiennyangeln That's a very easy and clean fix. Another fix is to not include those on codeblocks as part of tab.

Sometimes I wonder if these kind of feature should've best been left as a markdown parser plugin.

Wanna send a PR ? 😄

[yangshun]

I found a Remarkable plugin that does something similar - https://www.npmjs.com/package/remarkable-codegroup

[fiennyangeln]

yeah but it requires jQuery and bootstrap as mentioned here and here so idk if it's ok to use it. What do you all think?

[DiegoFelipe]

I'm not using comments in html but I got the same problem if I put a comment like this:

<!--- a comment ---!>

into a markdown file, docusaurus don't work anymore after this comment, If I remove the comment it works again.

@update

It actually bugs if you put an url in a comment, I just removed the link from the comment and it worked!

@update2

It's actually so weird, sometimes it works with comment and sometimes don't, And if I put two comments in a md file it only hides the first comment...