feat: add code-group component

[brc-dd]

fixes #728
closes #1242

Huge thanks to @VoVAllen!

TODO:

• Add docs
• Remove /test
• Check something like Line numbers don't work correctly with code group. #1594 isn't happening.

[VoVAllen]

The width of header looks a bit weird

[brc-dd]

I've actually took most of the UI from what we have in @vue/theme (vuejs/theme#50, a demo is here).

/cc @kiaking Your inputs? Should we change the UI?

[kiaking]

@brc-dd yeah I'll take this one over! I would like to adjust a just bit on tabs 👀 I'll work this on today or tomorrow 👍

[jd-solanki]

My thoughts on UI: #728 (comment)

[mancuoj]

Wow! Will this feature appear in the next release? So I don't have to use the garbage code I wrote 👀

[kiaking]

Hopefully! Sorry it's taking time but I will work on it.

[kiaking]

OK finally! I've modified the style to be:

[jd-solanki]

I love this style 😍

[MarkusKeck]

This would completely replace the need of markdown-it-codetabs which I currently use in all my vitepress projects.
Big thumbs up!

[MarkusKeck]

How can I import code snippets into codeblocks?
I just tested the newly added codeblock, but I cannot add code snippets like it is possible with single code blocks.
Can this functionality please be added into codeblocks as well, if it is not currently possible?
Codeblocks hold way more code than single code components which results in a very messy markdown if imports are not possible

[VoVAllen]

Glad to see this feature got merged!

[dmoyadev]

I have the same problem with this feature as @MarkusKeck, code snippets are not working and I think it is a core feature with large code blocks or change-prone ones, is there a workaround or something to have them working? Thanks in advance!

[MarkusKeck]

@dmoyadev I use the @include statement and have all other markup inside the code itself.
Not pretty but the best solution I came up with.
I hope this will be supported at one point. This would allow for a clean code snippet file.

::: code-group

<!--@include: ./../../../snippets/BubbleSort.java-->

:::

The code fle itself (changed the ` to ' so it gets displayed correctly)

'''java [BubbleSort.java]
package net.bitelligence.exercise.sorting;

public class BubbleSort {

    public int[] bubbleSort(int[] numbers) {

    }

}
'''