vitepress Sync code group selection

Is your feature request related to a problem? Please describe.

In many cases, developers will provide code groups for multiple programming languages at the same time. I hope that after the user switches one, other code groups can automatically follow, and it is best to be persistent.

https://github.com/vuejs/vitepress/issues/2773, a solution is proposed here, but I don't think it's good enough

Only supports tab, but code group needs it more
This is a very commonly used feature, I think it should be officially supported, not by a plugin

Describe the solution you'd like

::: code-group

```js [config.js] :js <-- key const config = { // ... }

export default config ```

```ts [config.ts] :ts import type { UserConfig } from 'vitepress'

const config: UserConfig = { // ... }

export default config ```

:::

Describe alternatives you've considered

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Read the Contributing Guidelines.
[X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

Sep 13 '23 06:09 re-ovo

Only supports tab, but code group needs it more.

Can you elaborate more on this point.

Sep 25 '23 18:09 brc-dd

Only supports tab, but code group needs it more.

Can you elaborate more on this point.

Will using tabs give me the same appearance as code groups? I noticed that the code block on your site has a white background

Sep 26 '23 01:09 re-ovo

+1 from me. I was excited to use code groups, but find them useless without synchronisation.

@re-ovo FYI: I added the following styles to make tabs look more like code groups:

.plugin-tabs--content {
    padding: 0px !important;
}

.plugin-tabs--content div[class*='language-'] {
    background-color: var(--vp-code-block-bg) !important;
    border-radius: 0 !important;
}