docs: enhance code block & code group

[yuyinws]

This PR introduces vitepress-plugin-group-icons to enhance the document's readability.

This plugin is very popular on vitepress's ecosystem. It has used by Vue, Vite, Vitepress, Vitest, Rolldown and so on...

Screenshot

Summary by CodeRabbit

• New Features

  • Enabled group icon support across the docs site, including integrated Markdown and build-time plugins.
  • Injected global icon CSS to display labeled icons in code blocks.

• Documentation

  • Standardized code block labels with file annotations across guides (including Chinese translations) for clearer examples.
  • Enhanced code fences with language and icon metadata for configuration snippets.
  • Replaced inline comments with inline fence labels to improve readability and consistency.

• Chores

  • Added a new docs dependency to support group icon rendering.

[netlify]

✅ Deploy Preview for vue-router ready!

Name	Link
🔨 Latest commit	31fb3fa
🔍 Latest deploy log	https://app.netlify.com/projects/vue-router/deploys/68e675860a8fbc0008a5b603
😎 Deploy Preview	https://deploy-preview-2521--vue-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 (no change from production) Accessibility: 100 (no change from production) Best Practices: 92 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

Introduces vitepress-plugin-group-icons into the docs: adds markdown and Vite plugins in shared config, imports virtual CSS in the theme, and updates multiple English and Chinese guides to use labeled code fences and file annotations. Adds the dependency in packages/docs/package.json. No runtime logic changes to examples.

Changes

Cohort / File(s)	Summary
Docs plugin integration packages/docs/.vitepress/config/shared.ts	Adds group icons support: imports from vitepress-plugin-group-icons, applies md.use(groupIconMdPlugin) in markdown.config, and registers vite plugin via vite.plugins.
Theme CSS injection packages/docs/.vitepress/theme/index.ts	Imports virtual:group-icons.css to include global styles for group icons.
Docs dependency packages/docs/package.json	Adds dependency: vitepress-plugin-group-icons.
EN docs formatting labels packages/docs/guide/advanced/lazy-loading.md, packages/docs/guide/advanced/navigation-guards.md, packages/docs/guide/essentials/history-mode.md, packages/docs/guide/essentials/named-views.md, packages/docs/guide/essentials/nested-routes.md, packages/docs/guide/essentials/passing-props.md, packages/docs/guide/index.md	Converts inline comments to code-fence annotations (e.g., [filename], icons), adjusts fence language tags; content unchanged.
ZH docs formatting labels packages/docs/zh/guide/advanced/lazy-loading.md, packages/docs/zh/guide/advanced/navigation-guards.md, packages/docs/zh/guide/essentials/history-mode.md, packages/docs/zh/guide/essentials/named-views.md, packages/docs/zh/guide/essentials/nested-routes.md, packages/docs/zh/guide/essentials/passing-props.md, packages/docs/zh/guide/index.md	Mirrors EN updates: adds file annotations and fence metadata; no content or logic changes.

Sequence Diagram(s)

sequenceDiagram autonumber participant Dev as VitePress (Dev/Build) participant VP as .vitepress/config (shared.ts) participant MD as Markdown Parser participant Vite as Vite participant GI as group-icons Plugin participant Theme as Theme (index.ts) Dev->>VP: Load shared config VP->>MD: markdown.config(md.use(groupIconMdPlugin)) VP->>Vite: vite.plugins += groupIconVitePlugin() Note over MD,GI: New/changed integration: group icon transforms applied Dev->>Theme: Import virtual:group-icons.css Vite->>GI: Initialize plugin hooks MD->>GI: Parse & transform group icon syntax GI-->>MD: Inject processed tokens Theme-->>Dev: Global CSS for icons available Dev-->>Dev: Render docs with annotated code fences and icons 

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nibbled notes and fenced the code,
With icons grouped along the road.
A sprinkle of CSS—so sleek!
VitePress plugins hide-and-seek.
Hop, hop—docs now neatly tagged,
My whiskers twitch: “well-flagged!” 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly identifies the scope of the changes by noting documentation updates focused on enhancing code blocks and code groups, which aligns directly with the introduction of group icon support and code fence annotations in the PR. It is concise, clear, and specific enough for a reviewer to understand the primary change at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/docs/.vitepress/config/shared.ts (1)

171-173: LGTM! Vite plugin properly configured.

The Vite plugin is correctly added to enable icon resolution and the virtual CSS module export. This is the recommended integration pattern for vitepress-plugin-group-icons.

If you need to support additional custom icons beyond the built-in mappings (for tools/frameworks specific to this project), consider using the customIcon option:

vite: { plugins: [ groupIconVitePlugin({ customIcon: { // Add custom mappings if needed // example: 'logos:example' } }) ], }

Based on learnings

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bb3b721 and 31fb3fa.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (17)

• packages/docs/.vitepress/config/shared.ts (3 hunks)
• packages/docs/.vitepress/theme/index.ts (1 hunks)
• packages/docs/guide/advanced/lazy-loading.md (1 hunks)
• packages/docs/guide/advanced/navigation-guards.md (1 hunks)
• packages/docs/guide/essentials/history-mode.md (4 hunks)
• packages/docs/guide/essentials/named-views.md (1 hunks)
• packages/docs/guide/essentials/nested-routes.md (2 hunks)
• packages/docs/guide/essentials/passing-props.md (1 hunks)
• packages/docs/guide/index.md (1 hunks)
• packages/docs/package.json (1 hunks)
• packages/docs/zh/guide/advanced/lazy-loading.md (1 hunks)
• packages/docs/zh/guide/advanced/navigation-guards.md (1 hunks)
• packages/docs/zh/guide/essentials/history-mode.md (4 hunks)
• packages/docs/zh/guide/essentials/named-views.md (1 hunks)
• packages/docs/zh/guide/essentials/nested-routes.md (2 hunks)
• packages/docs/zh/guide/essentials/passing-props.md (1 hunks)
• packages/docs/zh/guide/index.md (1 hunks)

🔇 Additional comments (8)

packages/docs/zh/guide/essentials/nested-routes.md (1)

25-55: LGTM! Documentation formatting improvements.

The addition of file annotations to code fences (e.g., [App.vue], [User.vue]) enhances readability by clearly indicating which file each code example represents. These changes align with the vitepress-plugin-group-icons integration and are consistent with similar updates across the documentation.

packages/docs/zh/guide/advanced/navigation-guards.md (1)

144-155: LGTM! Consistent code fence labeling.

The addition of the [main.ts] file annotation improves documentation clarity by explicitly identifying the source file for the TypeScript example.

packages/docs/guide/essentials/passing-props.md (1)

12-18: LGTM! Clear file identification.

The [User.vue] annotation makes it immediately clear which component file is being demonstrated, improving documentation readability.

packages/docs/guide/essentials/named-views.md (1)

64-71: LGTM! Enhanced template example labeling.

The [UserSettings.vue] annotation clearly identifies the component file for the template example, maintaining consistency with other documentation updates.

packages/docs/guide/essentials/nested-routes.md (1)

25-55: LGTM! Documentation formatting enhancements.

The file annotations for code fences ([App.vue], [User.vue]) improve documentation clarity by explicitly showing which component each example belongs to. These changes are consistent with the broader documentation enhancement effort across the repository.

packages/docs/.vitepress/config/shared.ts (2)

3-6: LGTM! Correct plugin imports.

The imports of groupIconMdPlugin and groupIconVitePlugin from vitepress-plugin-group-icons are correct and follow the plugin's standard usage pattern.

Based on learnings

---

67-69: LGTM! Proper markdown plugin integration.

The markdown plugin is correctly applied via the config function, which will transform code-group blocks at markdown render time to enable icon display.

Based on learnings

packages/docs/.vitepress/theme/index.ts (1)

12-12: LGTM! Correct virtual CSS import.

The import of 'virtual:group-icons.css' is correct and necessary to include the plugin's default styles. This virtual module is provided by the groupIconVitePlugin and should be imported at the theme level as shown here.

Based on learnings

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vue-router@2521 

commit: 31fb3fa

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (bb3b721) to head (31fb3fa).

Additional details and impacted files

@@ Coverage Diff @@ ## main #2521 +/- ## ======================================= Coverage 89.61% 89.61% ======================================= Files 46 46 Lines 4103 4103 Branches 1089 1090 +1 ======================================= Hits 3677 3677 Misses 421 421 Partials 5 5 

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.