From 3641e70c30a1bac2b5c515242e2ea2f399d86c91 Mon Sep 17 00:00:00 2001 From: juji Date: Sun, 2 Nov 2025 23:00:19 +0700 Subject: [PATCH] docs: add named code groups to all languages (pending translation) --- docs/es/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/fa/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/ja/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/ko/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/pt/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/ru/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ docs/zh/guide/markdown.md | 96 +++++++++++++++++++++++++++++++++++++++ 7 files changed, 672 insertions(+) diff --git a/docs/es/guide/markdown.md b/docs/es/guide/markdown.md index ebbd0d5e..cc3fb4ae 100644 --- a/docs/es/guide/markdown.md +++ b/docs/es/guide/markdown.md @@ -756,6 +756,102 @@ También puede [importar _snippets_ de código](#import-code-snippets) en grupos ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## Inclusión de Archivo Markdown {#markdown-file-inclusion} Puede incluir un archivo markdown en otro archvo markdown, incluso anidado. diff --git a/docs/fa/guide/markdown.md b/docs/fa/guide/markdown.md index 4e17bd31..3a5a3b08 100644 --- a/docs/fa/guide/markdown.md +++ b/docs/fa/guide/markdown.md @@ -707,6 +707,102 @@ export default config <<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [قطعه با منطقه] ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## ادغام فایل‌های Markdown {#markdown-file-inclusion} می‌توانید یک فایل Markdown را در یک فایل Markdown دیگر، حتی در صورت وجود تو در تو، وارد کنید. diff --git a/docs/ja/guide/markdown.md b/docs/ja/guide/markdown.md index 966ce72c..df1bcba9 100644 --- a/docs/ja/guide/markdown.md +++ b/docs/ja/guide/markdown.md @@ -781,6 +781,102 @@ export default { ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## Markdown ファイルのインクルード {#markdown-file-inclusion} ある Markdown ファイルの中に、別の Markdown ファイルを取り込めます（入れ子も可能）。 diff --git a/docs/ko/guide/markdown.md b/docs/ko/guide/markdown.md index f2003ca6..9de8cf83 100644 --- a/docs/ko/guide/markdown.md +++ b/docs/ko/guide/markdown.md @@ -754,6 +754,102 @@ export default config ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## 마크다운 파일 포함 {#markdown-file-inclusion} 마크다운 파일을 다른 마크다운 파일에 포함시킬 수 있으며, 중첩도 가능합니다. diff --git a/docs/pt/guide/markdown.md b/docs/pt/guide/markdown.md index c4186270..f38ffb7a 100644 --- a/docs/pt/guide/markdown.md +++ b/docs/pt/guide/markdown.md @@ -754,6 +754,102 @@ Você também pode [importar _snippets_ de código](#import-code-snippets) em gr ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## Inclusão de Arquivo Markdown {#markdown-file-inclusion} Você pode incluir um arquivo markdown em outro arquivo markdown, mesmo aninhado. diff --git a/docs/ru/guide/markdown.md b/docs/ru/guide/markdown.md index 2bd1a5c1..445b20fd 100644 --- a/docs/ru/guide/markdown.md +++ b/docs/ru/guide/markdown.md @@ -778,6 +778,102 @@ export default config ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## Включение файла Markdown {#markdown-file-inclusion} Вы можете включить файл Markdown в другой файл Markdown, даже вложенный. diff --git a/docs/zh/guide/markdown.md b/docs/zh/guide/markdown.md index a401774c..18aaaa47 100644 --- a/docs/zh/guide/markdown.md +++ b/docs/zh/guide/markdown.md @@ -754,6 +754,102 @@ export default config ::: + +### Named Code Groups + +You can name code groups to synchronize tab selections across multiple groups. When you have multiple code groups with the same name on a page, selecting a tab in one will automatically select the corresponding tab in all other groups with the same name. + +**Input** + +````md +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + + + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: +```` + +When you click on a tab (e.g., "pnpm") in one group, all other groups with `group-name=package-managers` will automatically switch to the same tab. + +**Output** + +::: code-group group-name=package-managers + +```bash [npm] +npm install vitepress +``` + +```bash [pnpm] +pnpm add vitepress +``` + +```bash [yarn] +yarn add vitepress +``` + +::: + +::: code-group group-name=package-managers + +```bash [npm] +npm run docs +``` + +```bash [pnpm] +pnpm run docs +``` + +```bash [yarn] +yarn docs +``` + +::: + +::: tip +Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`. +::: + +The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed. + +Valid examples: +- `group-name=installs` +- `group-name=install-methods` +- `group-name=install_methods` +- `group-name=installMethods` + +::: tip +This feature is especially useful in documentation where you show the same tool (like package managers or programming languages) in multiple places, providing a consistent experience for users. +::: + + ## 包含 markdown 文件 {#markdown-file-inclusion} 可以像这样在一个 markdown 文件中包含另一个 markdown 文件，甚至是内嵌的。