feat: Support code group in Markdown

[VoVAllen]

Signed-off-by: Jinjing.Zhou allenzhou@tensorchord.ai

fixes #728

I made a new page to test it and found I still need to manually import the SFC. How can I enable this SFC by default? @brc-dd

Need suggestion on the color pattern

Change: Originally the upper-right side will show the code language. Now it will show title specified by user, if not will be the language itself.

demo: https://deploy-preview-1242--vitepress-docs.netlify.app/guide/test

[Sepush]

this feature pretty cool

[rainbowatcher]

it's looks like doesn't work well on mobile

[VoVAllen]

The current color pattern doesn't seem good. Any suggestion is welcomed

[meteorlxy]

As code-group is a theme-specific feature, I wonder if we should put it into the core, including:

• The markdown container plugin
• The markdown preWrapper plugin

An ideal way is to only support it in the default theme. 🤔

[VoVAllen]

@meteorlxy The prewrapper change should work for all themes. Is it fine to keep it for all themes?

For the container part, does it break anything if that is not implemented by other themes? (transform ::code-group in to <CodeGroup></CodeGroup>)

[VoVAllen]

Ping @meteorlxy @brc-dd

[brc-dd]

For the container part, does it break anything if that is not implemented by other themes? (transform ::code-group in to <CodeGroup></CodeGroup>)

Not unless they are using ::code-group in their markdown files, in that case they would need to register a global component CodeGroup.

Just a thought - this likely can be done in pure HTML/CSS without need of any Vue component. (make md plugin render something like radio input + pre, then use :checked). I'll give that a try, otherwise we'd go ahead with this PR.

[VoVAllen]

@brc-dd I see what you mean (like https://codepen.io/xboxyan/pen/oMxmxm). It seems viable in this scenario, with lots of tricks in CSS selector. Seems dynamic CSS generation is needed here. Is this a good option?

[brc-dd]

Seems dynamic CSS generation is needed here.

Not quite. In your example too the CSS is static (its independent of those tab IDs).

Is this a good option?

Perhaps. I'm not sure yet. This would prevent the need of defining a custom component, so this will be helpful to developers writing a custom theme. It would sort of become a markdown feature instead of theme one (they can customize using CSS vars). Also, there are already certain markdown-it plugins that do that, so it wouldn't be hard to implement. My only concern is with a11y. That would need investigation.

[VoVAllen]

Actually I think we can avoid using SFC, but doesn't have to be pure CSS. We can still use js for simplicity. WDYT? @brc-dd

[brc-dd]

Yeah that would work too. We are injecting JS for copy code stuff too so that it works across custom themes.

[VoVAllen]

I've updated the code to implement this without SFC. Please take a look @brc-dd . Thanks!
demo: https://deploy-preview-1242--vitepress-docs.netlify.app/guide/test

[VoVAllen]

@brc-dd Does current implementation work? If so I can fix the docs so that we can merge it

[VoVAllen]

Also suggestion on color pattern is welcomed

[brc-dd]

Does current implementation work?

Yeah, I'm working on some refinements. Hopefully, will get this merged this weekend (month 😓).

[brc-dd]

Can you guys review #1560 and see if there are any issues (especially with UI)? Here is the deploy preview: https://deploy-preview-1560--vitepress-docs.netlify.app/test