msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

refactor: rename group-name parameter to name

Browse Source
pull/5012/head
juji 4 weeks ago
parent f1f7d880ae
commit 88726b3ec4
10 changed files with 88 additions and 88 deletions
Show Stats Download Patch File Download Diff File

10
__tests__/e2e/markdown-extensions/index.md
Unescape View File

@ -175,7 +175,7 @@ export default config
### Group Name Basic
::: code-group group-name=installs
::: code-group name=installs
```bash [npm]
npm install vitepress
@ -189,7 +189,7 @@ pnpm add vitepress
### Group Name Second Instance (Same Name for Sync Test)
::: code-group group-name=installs
::: code-group name=installs
```bash [npm]
npm run docs
@ -203,7 +203,7 @@ pnpm run docs
### Group Name with Hyphens and Underscores
::: code-group group-name=install_methods-v2
::: code-group name=install_methods-v2
```bash [npm]
npm install vitepress@next
@ -217,7 +217,7 @@ pnpm add vitepress@next
### Group Name with Spaces (Should be Rejected)
::: code-group group-name="install methods"
::: code-group name="install methods"
```bash [npm]
npm install vitepress
@ -231,7 +231,7 @@ yarn add vitepress
### Group Name with Invalid Characters (Should be Rejected)
::: code-group group-name=install@methods!
::: code-group name=install@methods!
```bash [npm]
npm install vitepress

24
docs/en/guide/markdown.md
Unescape View File

@ -783,7 +783,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -801,7 +801,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -818,11 +818,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -838,7 +838,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -855,20 +855,20 @@ yarn docs
:::
::: tip
Try clicking different tabs above! Notice how both code groups switch together because they share the same `group-name`.
Try clicking different tabs above! Notice how both code groups switch together because they share the same `name`.
:::
::: info
Your tab selection is automatically saved to localStorage. When you return to the page, your preferred tab for each group-name will be automatically selected.
Your tab selection is automatically saved to localStorage. When you return to the page, your preferred tab for each name will be automatically selected.
:::
The `group-name` parameter accepts only alphanumeric characters, hyphens, and underscores. No whitespace is allowed.
The `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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/es/guide/markdown.md
Unescape View File

@ -764,7 +764,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -782,7 +782,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -799,11 +799,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -819,7 +819,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -846,10 +846,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/fa/guide/markdown.md
Unescape View File

@ -715,7 +715,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -733,7 +733,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -750,11 +750,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -770,7 +770,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -797,10 +797,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/ja/guide/markdown.md
Unescape View File

@ -789,7 +789,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -807,7 +807,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -824,11 +824,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -844,7 +844,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -871,10 +871,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/ko/guide/markdown.md
Unescape View File

@ -762,7 +762,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -780,7 +780,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -797,11 +797,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -817,7 +817,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -844,10 +844,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/pt/guide/markdown.md
Unescape View File

@ -762,7 +762,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -780,7 +780,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -797,11 +797,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -817,7 +817,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -844,10 +844,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/ru/guide/markdown.md
Unescape View File

@ -786,7 +786,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -804,7 +804,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -821,11 +821,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -841,7 +841,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -868,10 +868,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

18
docs/zh/guide/markdown.md
Unescape View File

@ -762,7 +762,7 @@ You can name code groups to synchronize tab selections across multiple groups. W
**Input**
````md
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -780,7 +780,7 @@ yarn add vitepress
<!-- Later in the same domain: -->
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -797,11 +797,11 @@ 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.
When you click on a tab (e.g., "pnpm") in one group, all other groups with `name=package-managers` will automatically switch to the same tab.
**Output**
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm install vitepress
@ -817,7 +817,7 @@ yarn add vitepress
:::
::: code-group group-name=package-managers
::: code-group name=package-managers
```bash [npm]
npm run docs
@ -844,10 +844,10 @@ Your tab selection is automatically saved to localStorage. When you return to th
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`
- `name=installs`
- `name=install-methods`
- `name=install_methods`
- `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.

16
src/node/markdown/plugins/containers.ts
Unescape View File

@ -67,18 +67,18 @@ function createCodeGroup(md: MarkdownItAsync): ContainerArgs {
const token = tokens[idx]
const info = token.info.trim()
// Extract group-name parameter
const groupNameMatch = info.match(/group-name=(\S+)/)
let groupName = groupNameMatch ? groupNameMatch[1] : null
// Extract name parameter
const nameMatch = info.match(/name=(\S+)/)
let name = nameMatch ? nameMatch[1] : null
// Validate: only allow alphanumeric, hyphens, and underscores
if (groupName && !/^[a-zA-Z0-9_-]+$/.test(groupName)) {
groupName = null
if (name && !/^[a-zA-Z0-9_-]+$/.test(name)) {
name = null
}
// Build data attribute
const groupNameAttr = groupName
? ` data-group-name="${md.utils.escapeHtml(groupName)}"`
const nameAttr = name
? ` data-group-name="${md.utils.escapeHtml(name)}"`
: ''
let tabs = ''
@ -112,7 +112,7 @@ function createCodeGroup(md: MarkdownItAsync): ContainerArgs {
}
}
return `<div class="vp-code-group"${groupNameAttr}><div class="tabs">${tabs}</div><div class="blocks">\n`
return `<div class="vp-code-group"${nameAttr}><div class="tabs">${tabs}</div><div class="blocks">\n`
}
return `</div></div>\n`
}

Write Preview
Loading…
Cancel
Save