docs: add vitepress-plugin-group-icons (#904)

Author: yuyinws

docs/.vitepress/config.ts

@@ -1,8 +1,9 @@
 import type { DefaultTheme } from 'vitepress'
 import { bundledThemes } from 'shiki'
 import { defineConfig } from 'vitepress'
-import { withMermaid } from 'vitepress-plugin-mermaid'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 
+import { withMermaid } from 'vitepress-plugin-mermaid'
 import { version } from '../../package.json'
 import { transformerColorizedBrackets } from '../../packages/colorized-brackets/src'
 import { transformerMetaWordHighlight, transformerNotationWordHighlight, transformerRemoveNotationEscape } from '../../packages/transformers/src'
@@ -144,6 +145,9 @@ export default withMermaid(defineConfig({
     ],
     // @ts-expect-error Waits for https://github.com/vuejs/vitepress/pull/4507
     languages: ['js', 'jsx', 'ts', 'tsx'],
+    config: (md) => {
+      md.use(groupIconMdPlugin)
+    },
   },
 
   cleanUrls: true,

docs/.vitepress/theme/index.ts

@@ -11,6 +11,7 @@ import '../../../packages/vitepress-twoslash/src/style.css'
 import 'uno.css'
 import './style.css'
 import './transformers.css'
+import 'virtual:group-icons.css'
 
 // @unocss-include
 

docs/.vitepress/vite.config.ts

@@ -3,6 +3,7 @@ import UnoCSS from 'unocss/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import Tsconfig from 'vite-tsconfig-paths'
+import { groupIconVitePlugin as GroupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 export default defineConfig({
   plugins: [
@@ -22,5 +23,10 @@ export default defineConfig({
     UnoCSS(
       fileURLToPath(new URL('./uno.config.ts', import.meta.url)),
     ),
+    GroupIconVitePlugin({
+      customIcon: {
+        vitepress: 'https://vitepress.dev/vitepress-logo-mini.svg',
+      },
+    }),
   ],
 })

docs/package.json

@@ -19,6 +19,7 @@
     "unocss": "catalog:",
     "unplugin-vue-components": "catalog:",
     "vitepress": "catalog:",
+    "vitepress-plugin-group-icons": "catalog:",
     "vue": "catalog:"
   }
 }

docs/packages/cli.md

@@ -16,9 +16,27 @@ npx @shikijs/cli README.md
 
 You can also install it globally. Command aliases `@shikijs/cli`, `shiki`, `skat` are registered.
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -g @shikijs/cli
+```
+
+```sh [yarn]
+yarn global add @shikijs/cli
+```
+
+```sh [pnpm]
+pnpm add -g @shikijs/cli
+```
+
+```sh [bun]
+bun add -g @shikijs/cli
+```
+
+:::
 
+```sh
 skat src/index.ts
 ```
 

docs/packages/colorized-brackets.md

@@ -10,10 +10,26 @@ VSCode-style colorized brackets transformer for Shiki.
 
 ## Install
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -D @shikijs/colorized-brackets
 ```
 
+```sh [yarn]
+yarn add -D @shikijs/colorized-brackets
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/colorized-brackets
+```
+
+```sh [bun]
+bun add -D @shikijs/colorized-brackets
+```
+
+:::
+
 ## Usage
 
 Add to your Shiki transformers:

docs/packages/markdown-it.md

@@ -6,10 +6,26 @@
 
 ## Install
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -D @shikijs/markdown-it
 ```
 
+```sh [yarn]
+yarn add -D @shikijs/markdown-it
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/markdown-it
+```
+
+```sh [bun]
+bun add -D @shikijs/markdown-it
+```
+
+:::
+
 ## Usage
 
 ```ts twoslash

docs/packages/monaco.md

@@ -10,10 +10,26 @@ Heavily inspired by [`monaco-editor-textmate`](https://github.com/zikaari/monaco
 
 ## Install
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -D @shikijs/monaco
 ```
 
+```sh [yarn]
+yarn add -D @shikijs/monaco
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/monaco
+```
+
+```sh [bun]
+bun add -D @shikijs/monaco
+```
+
+:::
+
 ```ts
 import { shikiToMonaco } from '@shikijs/monaco'
 import * as monaco from 'monaco-editor-core'

docs/packages/rehype.md

@@ -10,10 +10,26 @@ outline: deep
 
 ## Install
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -D @shikijs/rehype
 ```
 
+```sh [yarn]
+yarn add -D @shikijs/rehype
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/rehype
+```
+
+```sh [bun]
+bun add -D @shikijs/rehype
+```
+
+:::
+
 ## Usage
 
 ```ts twoslash

docs/packages/transformers.md

@@ -10,10 +10,26 @@ Common transformers for Shiki, inspired by [shiki-processor](https://github.com/
 
 ## Install
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -D @shikijs/transformers
 ```
 
+```sh [yarn]
+yarn add -D @shikijs/transformers
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/transformers
+```
+
+```sh [bun]
+bun add -D @shikijs/transformers
+```
+
+:::
+
 ## Usage
 
 ```ts twoslash

docs/packages/twoslash.md

@@ -12,10 +12,26 @@ A Shiki transformer for [Twoslash](https://github.com/twoslashes/twoslash), prov
 
 ## Install
 
-```bash
-npm i -D @shikijs/twoslash
+::: code-group
+
+```sh [npm]
+npm install -D @shikijs/twoslash
+```
+
+```sh [yarn]
+yarn add -D @shikijs/twoslash
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/twoslash
 ```
 
+```sh [bun]
+bun add -D @shikijs/twoslash
+```
+
+:::
+
 This package is **a transformer addon** to Shiki. This means that for every integration that supports passing Shiki transformers, you can use this package.
 
 ```ts twoslash

docs/packages/vitepress.md

@@ -16,14 +16,29 @@ To enable [TypeScript Twoslash](/packages/twoslash) (type hover on code snippets
 
 ### Setup
 
-```bash
+::: code-group
+
+```sh [npm]
 npm i -D @shikijs/vitepress-twoslash
 ```
 
+```sh [yarn]
+yarn add -D @shikijs/vitepress-twoslash
+```
+
+```sh [pnpm]
+pnpm add -D @shikijs/vitepress-twoslash
+```
+
+```sh [bun]
+bun add -D @shikijs/vitepress-twoslash
+```
+
+:::
+
 In your [`.vitepress/config.ts`](https://vitepress.dev/reference/site-config):
 
-```ts
-// .vitepress/config.ts
+```ts [.vitepress/config.ts]
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash' // [!code hl]
 import { defineConfig } from 'vitepress'
 
@@ -41,9 +56,8 @@ export default defineConfig({
 
 And then in your [`.vitepress/theme/index.ts`](https://vitepress.dev/guide/custom-theme), install the Vue plugin and import the css with `@shikijs/vitepress-twoslash/styles.css`.
 
-```ts twoslash
+```ts twoslash [.vitepress/theme/index.ts]
 // @noErrors: true
-// .vitepress/theme/index.ts
 import type { EnhanceAppContext } from 'vitepress' // [!code hl]
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import Theme from 'vitepress/theme'
@@ -127,8 +141,7 @@ To speed up the build process, you can enable the file system cache for the gene
 
 In your [`.vitepress/config.ts`](https://vitepress.dev/reference/site-config):
 
-```ts
-// .vitepress/config.ts
+```ts [.vitepress/config.ts]
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs' // [!code hl]
 import { defineConfig } from 'vitepress'