From 2bccb422ca0ec5a65ac7f11853be028f71cddc0b Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Fri, 8 Aug 2025 22:49:49 +0200
Subject: [PATCH] docs: add Code Group Synchronization

---
 docs/en/guide/markdown.md                | 76 ++++++++++++++++++++++++
 src/client/app/composables/codeGroups.ts |  5 ++
 2 files changed, 81 insertions(+)

diff --git a/docs/en/guide/markdown.md b/docs/en/guide/markdown.md
index 89d826d5..27fc972e 100644
--- a/docs/en/guide/markdown.md
+++ b/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.
diff --git a/src/client/app/composables/codeGroups.ts b/src/client/app/composables/codeGroups.ts
index 07adc983..84614df8 100644
--- a/src/client/app/composables/codeGroups.ts
+++ b/src/client/app/composables/codeGroups.ts
@@ -87,6 +87,11 @@ function activateTab(group: HTMLElement, input: HTMLInputElement): boolean {
   const blocks = group.querySelector('.blocks')
   if (!blocks) return false
 
+  // Update radio input checked state
+  inputs.forEach((radioInput, i) => {
+    radioInput.checked = i === index
+  })
+
   // Remove active class from all blocks and add to the target block
   Array.from(blocks.children).forEach((child, i) => {
     child.classList.toggle('active', i === index)