docs: add vitepress-plugin-group-icons

docs/.vitepress/config.mts

@@ -4,6 +4,7 @@ import type { VoidZeroThemeConfig } from '@voidzero-dev/vitepress-theme';
 import { extendConfig } from '@voidzero-dev/vitepress-theme/config';
 import { defineConfig, type HeadConfig } from 'vitepress';
 import { withMermaid } from 'vitepress-plugin-mermaid';
+import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 const taskRunnerGuideItems = [
   {
@@ -122,6 +123,13 @@ export default extendConfig(
             { find: /^dayjs$/, replacement: 'dayjs/esm' },
           ],
         },
+        plugins: [
+          groupIconVitePlugin({
+            customIcon: {
+              tsdown: 'https://tsdown.dev/tsdown.svg'
+            }
+          })
+        ],
       },
       themeConfig: {
         variant: 'viteplus' as VoidZeroThemeConfig['variant'],
@@ -238,6 +246,11 @@ export default extendConfig(
 
         return [...ogInfo, canonicalUrlEntry];
       },
+      markdown: {
+        config(md) {
+          md.use(groupIconMdPlugin)
+        },
+      },
     }),
   ),
 );

docs/.vitepress/theme/index.ts

@@ -4,6 +4,7 @@ import type { Theme } from 'vitepress';
 
 import Layout from './Layout.vue';
 import './styles.css';
+import 'virtual:group-icons.css'
 
 export default {
   extends: BaseTheme,

docs/guide/check.md

@@ -30,7 +30,7 @@ vp check --no-fmt --no-lint # Type-check only (requires `typeCheck` enabled).
 
 Recommended base `lint` config:
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/guide/commit-hooks.md

@@ -38,7 +38,7 @@ vp staged --fail-on-changes
 
 Define staged-file checks in the `staged` block in `vite.config.ts`:
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/guide/fmt.md

@@ -22,15 +22,15 @@ Put formatting configuration directly in the `fmt` block in `vite.config.ts` so
 
 For editors, point the formatter config path at `./vite.config.ts` so format-on-save uses the same `fmt` block:
 
-```json
+```json [.vscode/settings.json]
 {
   "oxc.fmt.configPath": "./vite.config.ts"
 }
 ```
 
 For the upstream formatter behavior and configuration reference, see the [Oxfmt docs](https://oxc.rs/docs/guide/usage/formatter.html).
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/guide/ide-integration.md

@@ -13,17 +13,13 @@ When you create or migrate a project, Vite+ prompts whether you want editor conf
 
 You can also manually set up the VS Code config:
 
-`.vscode/extensions.json`
-
-```json
+```json [.vscode/extensions.json]
 {
   "recommendations": ["VoidZero.vite-plus-extension-pack"]
 }
 ```
 
-`.vscode/settings.json`
-
-```json
+```json [.vscode/settings.json]
 {
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "oxc.fmt.configPath": "./vite.config.ts",
@@ -39,7 +35,7 @@ This gives the project a shared default formatter and enables Oxc-powered fix ac
 
 To let the VS Code NPM Scripts panel run scripts through `vp`, add the following to your `.vscode/settings.json`:
 
-```json
+```json [.vscode/settings.json]
 {
   "npm.scriptRunner": "vp"
 }
@@ -55,9 +51,7 @@ When you create or migrate a project, Vite+ prompts you to choose whether you wa
 
 You can also manually set up the Zed config:
 
-`.zed/settings.json`
-
-```json
+```json [.zed/settings.json]
 {
   "lsp": {
     "oxlint": {

docs/guide/lint.md

@@ -22,7 +22,7 @@ Put lint configuration directly in the `lint` block in `vite.config.ts` so all y
 
 For the upstream rule set, options, and compatibility details, see the [Oxlint docs](https://oxc.rs/docs/guide/usage/linter.html).
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/guide/migrate.md

@@ -114,17 +114,17 @@ const { page } = await import('vite-plus/test/browser/context');
 
 If your project uses a `tsdown.config.ts`, move its options into the `pack` block in `vite.config.ts`:
 
-```ts
-// before — tsdown.config.ts
+```ts [tsdown.config.ts] {4-6}
 import { defineConfig } from 'tsdown';
 
 export default defineConfig({
   entry: ['src/index.ts'],
   dts: true,
   format: ['esm', 'cjs'],
 });
+```
 
-// after — vite.config.ts
+```ts [vite.config.ts] {4-8}
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({
@@ -144,8 +144,7 @@ Vite+ replaces lint-staged with its own `staged` block in `vite.config.ts`. Only
 
 Move your lint-staged rules into the `staged` block:
 
-```ts
-// vite.config.ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/guide/pack.md

@@ -29,7 +29,7 @@ Use it for:
 - [watch mode](https://tsdown.dev/options/watch-mode)
 - [standalone executables](https://tsdown.dev/options/exe#executable)
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({
@@ -47,7 +47,7 @@ export default defineConfig({
 
 Use this when you want to ship a CLI or other Node-based tool as a native executable that runs without requiring Node.js to be installed separately.
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/guide/run.md

@@ -71,7 +71,7 @@ $ node compile-legacy-app.js ✗ cache miss: 'legacy/index.js' modified, executi
 
 Vite Task automatically tracks which files your command uses. You can define tasks directly in `vite.config.ts` to enable caching by default or control which files and environment variables affect cache behavior.
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({
@@ -239,7 +239,7 @@ Flags also work inside nested scripts. For example, `vp run -r build` inside a s
 ::: info
 A common monorepo pattern is a root script that runs a task recursively:
 
-```json [package.json (root)]
+```json [package.json (root) ~vscode-icons:file-type-node~]
 {
   "scripts": {
     "build": "vp run -r build"

docs/guide/test.md

@@ -22,7 +22,7 @@ Unlike Vitest on its own, `vp test` does not stay in watch mode by default. Use
 
 Put test configuration directly in the `test` block in `vite.config.ts` so all your configuration stays in one place. We do not recommend using `vitest.config.ts` with Vite+.
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite-plus';
 
 export default defineConfig({

docs/package.json

@@ -12,6 +12,7 @@
     "mermaid": "^11.13.0",
     "reka-ui": "^2.7.0",
     "typewriter-effect": "^2.22.0",
+    "vitepress-plugin-group-icons": "^1.7.5",
     "vitepress-plugin-mermaid": "^2.0.17",
     "vue": "^3.5.27",
     "vue3-carousel": "^0.16.0"