feat: allow sync code group with a shared key

docs/en/guide/getting-started.md

@@ -15,7 +15,7 @@ You can try VitePress directly in your browser on [StackBlitz](https://vitepress
 
 VitePress can be used on its own, or be installed into an existing project. In both cases, you can install it with:
 
-::: code-group
+::: code-group :package-manager
 
 ```sh [npm]
 $ npm add -D vitepress
@@ -49,7 +49,7 @@ VitePress is an ESM-only package. Don't use `require()` to import it, and make s
 
 VitePress ships with a command line setup wizard that will help you scaffold a basic project. After installation, start the wizard by running:
 
-::: code-group
+::: code-group :package-manager
 
 ```sh [npm]
 $ npx vitepress init
@@ -144,7 +144,7 @@ The tool should have also injected the following npm scripts to your `package.js
 
 The `docs:dev` script will start a local dev server with instant hot updates. Run it with the following command:
 
-::: code-group
+::: code-group :package-manager
 
 ```sh [npm]
 $ npm run docs:dev
@@ -166,7 +166,7 @@ $ bun run docs:dev
 
 Instead of npm scripts, you can also invoke VitePress directly with:
 
-::: code-group
+::: code-group :package-manager
 
 ```sh [npm]
 $ npx vitepress dev docs

docs/en/guide/markdown.md

@@ -776,6 +776,82 @@ You can also [import snippets](#import-code-snippets) in code groups:
 
 :::
 
+### Code Group Synchronization
+
+Code groups can be synchronized across the page using a key. When you click on a tab in one code group, all other code groups with the same key will automatically switch to the corresponding tab. The selected tab is also reflected in the URL as a query parameter.
+
+**Input**
+
+````md
+::: code-group :package-manager
+
+```bash [npm]
+npm install vitepress
+```
+
+```bash [yarn]
+yarn add vitepress
+```
+
+```bash [pnpm]
+pnpm add vitepress
+```
+
+:::
+
+::: code-group :package-manager
+
+```bash [npm]
+npm run dev
+```
+
+```bash [yarn]
+yarn dev
+```
+
+```bash [pnpm]
+pnpm dev
+```
+
+:::
+````
+
+**Output**
+
+::: code-group :package-manager
+
+```bash [npm]
+npm install vitepress
+```
+
+```bash [yarn]
+yarn add vitepress
+```
+
+```bash [pnpm]
+pnpm add vitepress
+```
+
+:::
+
+::: code-group :package-manager
+
+```bash [npm]
+npm run dev
+```
+
+```bash [yarn]
+yarn dev
+```
+
+```bash [pnpm]
+pnpm dev
+```
+
+:::
+
+When you select a tab (e.g., "pnpm"), both code groups will switch to show the pnpm version, and the URL will update to include `?package-manager=pnpm`. This makes it easy to share links that preserve the user's tab selection.
+
 ## Markdown File Inclusion
 
 You can include a markdown file in another markdown file, even nested.