docs: enhance code block & code group

packages/docs/.vitepress/config/shared.ts

@@ -1,5 +1,9 @@
 import { defineConfig, HeadConfig } from 'vitepress'
 import { zhSearch } from './zh'
+import {
+  groupIconMdPlugin,
+  groupIconVitePlugin,
+} from 'vitepress-plugin-group-icons'
 
 // TODO:
 // export const META_IMAGE = 'https://router.vuejs.org/social.png'
@@ -60,6 +64,9 @@ export const sharedConfig = defineConfig({
     anchor: {
       slugify,
     },
+    config: md => {
+      md.use(groupIconMdPlugin)
+    },
   },
 
   head: [
@@ -161,4 +168,7 @@ export const sharedConfig = defineConfig({
       placement: 'routervuejsorg',
     },
   },
+  vite: {
+    plugins: [groupIconVitePlugin()],
+  },
 })

packages/docs/.vitepress/theme/index.ts

@@ -9,6 +9,7 @@ import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 import status from '../translation-status.json'
 import RuleKitLink from './components/RuleKitLink.vue'
+import 'virtual:group-icons.css'
 
 const i18nLabels = {
   zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。',

packages/docs/guide/advanced/lazy-loading.md

@@ -67,8 +67,7 @@ webpack will group any async module with the same chunk name into the same async
 
 In Vite you can define the chunks under the [`rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions):
 
-```js
-// vite.config.js
+```js [vite.config.js]
 export default defineConfig({
   build: {
     rollupOptions: {

packages/docs/guide/advanced/navigation-guards.md

@@ -140,8 +140,7 @@ Learn more about navigation failures on [its guide](./navigation-failures.md).
 
 Since Vue 3.3, it is possible to use `inject()` within navigation guards. This is useful for injecting global properties like the [pinia stores](https://pinia.vuejs.org). Anything that is provided with `app.provide()` is also accessible within `router.beforeEach()`, `router.beforeResolve()`, `router.afterEach()`:
 
-```ts
-// main.ts
+```ts [main.ts]
 const app = createApp(App)
 app.provide('global', 'hello injections')
 

packages/docs/guide/essentials/history-mode.md

@@ -128,7 +128,7 @@ For Node.js/Express, consider using [connect-history-api-fallback middleware](ht
 1. Install [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite)
 2. Create a `web.config` file in the root directory of your site with the following:
 
-```xml
+```xml [web.config ~vscode-icons:file-type-xml~]
 <?xml version="1.0" encoding="UTF-8"?>
 <configuration>
   <system.webServer>
@@ -167,7 +167,7 @@ rewrite {
 
 Add this to your `firebase.json`:
 
-```json
+```json [firebase.json ~vscode-icons:file-type-firebase~]
 {
   "hosting": {
     "public": "dist",
@@ -185,7 +185,7 @@ Add this to your `firebase.json`:
 
 Create a `_redirects` file that is included with your deployed files:
 
-```
+``` [_redirects ~vscode-icons:file-type-light-netlify~]
 /* /index.html 200
 ```
 
@@ -197,7 +197,7 @@ You can read more about the syntax on [Netlify documentation](https://docs.netli
 
 Create a `vercel.json` file under the root directory of your project with the following:
 
-```json
+```json [vercel.json ~vscode-icons:file-type-light-vercel~]
 {
   "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
 }

packages/docs/guide/essentials/named-views.md

@@ -61,8 +61,7 @@ It is possible to create complex layouts using named views with nested views. Wh
 
 The `<template>` section for `UserSettings` component in the above layout would look something like this:
 
-```vue-html
-<!-- UserSettings.vue -->
+```vue-html [UserSettings.vue]
 <div>
   <h1>User Settings</h1>
   <NavBar />

packages/docs/guide/essentials/nested-routes.md

@@ -22,15 +22,13 @@ With Vue Router, you can express this relationship using nested route configurat
 
 Given the app we created in the last chapter:
 
-```vue
-<!-- App.vue -->
+```vue [App.vue]
 <template>
   <router-view />
 </template>
 ```
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div>
     User {{ $route.params.id }}
@@ -47,8 +45,7 @@ const routes = [{ path: '/user/:id', component: User }]
 
 The `<router-view>` here is a top-level `router-view`. It renders the component matched by a top level route. Similarly, a rendered component can also contain its own, nested `<router-view>`. For example, if we add one inside the `User` component's template:
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div class="user">
     <h2>User {{ $route.params.id }}</h2>

packages/docs/guide/essentials/passing-props.md

@@ -9,8 +9,7 @@ Using `$route` or `useRoute()` in your component creates a tight coupling with t
 
 Let's return to our earlier example:
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div>
     User {{ $route.params.id }}

packages/docs/guide/index.md

@@ -22,9 +22,7 @@ To introduce some of the main ideas, we're going to consider this example:
 
 Let's start by looking at the root component, `App.vue`.
 
-### App.vue
-
-```vue
+```vue [App.vue]
 <template>
   <h1>Hello App!</h1>
   <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>

packages/docs/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "simple-git": "^3.27.0",
     "vitepress": "1.5.0",
+    "vitepress-plugin-group-icons": "^1.6.1",
     "vitepress-translation-helper": "^0.2.1",
     "vue-router": "workspace:*"
   }

packages/docs/zh/guide/advanced/lazy-loading.md

@@ -67,8 +67,7 @@ webpack 会将任何一个异步模块与相同的块名称组合到相同的异
 
 在Vite中，你可以在[`rollupOptions`](https://cn.vite.dev/config/build-options.html#build-rollupoptions)下定义分块：
 
-```js
-// vite.config.js
+```js [vite.config.js]
 export default defineConfig({
   build: {
     rollupOptions: {

packages/docs/zh/guide/advanced/navigation-guards.md

@@ -141,8 +141,7 @@ router.afterEach((to, from, failure) => {
 
 从 Vue 3.3 开始，你可以在导航守卫内使用 `inject()` 方法。这在注入像 [pinia stores](https://pinia.vuejs.org) 这样的全局属性时很有用。在 `app.provide()` 中提供的所有内容都可以在 `router.beforeEach()`、`router.beforeResolve()`、`router.afterEach()` 内获取到：
 
-```ts
-// main.ts
+```ts [main.ts]
 const app = createApp(App)
 app.provide('global', 'hello injections')
 

packages/docs/zh/guide/essentials/history-mode.md

@@ -127,7 +127,7 @@ http
 1. 安装 [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite)
 2. 在网站的根目录下创建一个 `web.config` 文件，内容如下：
 
-```xml
+```xml  [web.config ~vscode-icons:file-type-xml~]
 <?xml version="1.0" encoding="UTF-8"?>
 <configuration>
   <system.webServer>
@@ -166,7 +166,7 @@ rewrite {
 
 将此添加到你的 `firebase.json` 中：
 
-```json
+```json [firebase.json ~vscode-icons:file-type-firebase~]
 {
   "hosting": {
     "public": "dist",
@@ -184,7 +184,7 @@ rewrite {
 
 创建一个 `_redirects` 文件，包含在你的部署文件中：
 
-```
+``` [_redirects ~vscode-icons:file-type-light-netlify~]
 /* /index.html 200
 ```
 
@@ -196,7 +196,7 @@ rewrite {
 
 在项目根目录创建一个`vercel.json`文件，内容如下：
 
-```json
+```json [vercel.json ~vscode-icons:file-type-json~]
 {
   "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
 }

packages/docs/zh/guide/essentials/named-views.md

@@ -59,8 +59,7 @@ const router = createRouter({
 
 `UserSettings` 组件的 `<template>` 部分应该是类似下面的这段代码:
 
-```html
-<!-- UserSettings.vue -->
+```vue-html [UserSettings.vue]
 <div>
   <h1>User Settings</h1>
   <NavBar />

packages/docs/zh/guide/essentials/nested-routes.md

@@ -22,15 +22,13 @@
 
 接着上节创建的 app ：
 
-```vue
-<!-- App.vue -->
+```vue [App.vue]
 <template>
   <router-view />
 </template>
 ```
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div>
     User {{ $route.params.id }}
@@ -47,8 +45,7 @@ const routes = [{ path: '/user/:id', component: User }]
 
 这里的 `<router-view>` 是一个顶层的 `router-view`。它渲染顶层路由匹配的组件。同样地，一个被渲染的组件也可以包含自己嵌套的 `<router-view>`。例如，如果我们在 `User` 组件的模板内添加一个 `<router-view>`：
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div class="user">
     <h2>User {{ $route.params.id }}</h2>

packages/docs/zh/guide/essentials/passing-props.md

@@ -9,8 +9,7 @@
 
 回到我们之前的示例：
 
-```vue
-<!-- User.vue -->
+```vue [User.vue]
 <template>
   <div>
     User {{ $route.params.id }}

packages/docs/zh/guide/index.md

@@ -24,9 +24,7 @@ Vue Router 基于 Vue 的组件系统构建，你可以通过配置**路由**来
 
 让我们首先来看根组件, `App.vue`。
 
-### App.vue
-
-```vue
+```vue [App.vue]
 <template>
   <h1>Hello App!</h1>
   <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>