Feature request: change all group codes at once :tada:

[jcleneveu-stancer]

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

I am trying to implement a global code group switch on the web page.

For instance, if somebody selects "Python" or "PHP", it changes all the code groups on the whole pages to "Python" or "PHP". This would be the equivalent to https://github.com/padarom/vuepress-plugin-code-switcher for vitepress.

Describe the solution you'd like

The API could look like:

## First group

::: code-group:synchronized:group-id

´´´shell [Shell]
Shell test #1
´´´

´´´python [Python]
Python test #1
´´´

:::

## Second group

::: code-group:synchronized:group-id

´´´shell [Shell]
Shell test #2
´´´

´´´python [Python]
Python test #2
´´´

:::

• ::: code-group standalone would not be synchronized
• ::: code-group:synchronized would be synchronized with all other groups with a default ID
• ::: code-group:synchronized:group-id would be synchronized with all other groups that matches the same ID

Describe alternatives you've considered

A plugin to do this could also work, but it may definitely be part of the core features of vitepress.

Additional context

Thank you for this amazing project :heart:

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.

[brc-dd]

Try https://vitepress-plugins.sapphi.red/tabs/

[jcleneveu-stancer]

@brc-dd Thanks a lot for the quick answer :pray: ! I was not aware that this plugin existed. I will take a look and try. From what I'm reading, it should definitely solve my issue.

Still, on the long-run though, it would be quite nice to have this feature embedded into core vitepress code blocks, to avoid:

1. The need of installing a plugin
2. The need of creatings tabs instead of code-block when a sync is wanted

Not a big deal, but it can still be interesting to consider.

Thanks a lot :+1:

Do you want me to close the issue, or let it open?

[brc-dd]

Close this if it works for you. There might be slight styles difference, but from what I see, you could use tabs everywhere. No need to use code-block.

Also, regarding it's installation instructions, you might need to do something like this for theme:

export default {
  extends: Theme, // instead of ...Theme
  enhanceApp({ app }) {
    enhanceAppWithTabs(app)
  }
}

[jcleneveu-stancer]

Nice, thanks a lot !