feat: enhance code block & code group (#2594)

Author: jay-es

.vitepress/config.ts

@@ -2,9 +2,11 @@ import fs from 'fs'
 import path from 'path'
 import { defineConfigWithTheme, type HeadConfig } from 'vitepress'
 import type { Config as ThemeConfig } from '@vue/theme'
+
 import baseConfig from '@vue/theme/config'
 import { headerPlugin } from './headerMdPlugin'
 // import { textAdPlugin } from './textAdMdPlugin'
+import { groupIconMdPlugin,groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 const nav: ThemeConfig['nav'] = [
   {
@@ -790,6 +792,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     theme: 'github-dark',
     config(md) {
       md.use(headerPlugin)
+        .use(groupIconMdPlugin)
       // .use(textAdPlugin)
     }
   },
@@ -818,6 +821,14 @@ export default defineConfigWithTheme<ThemeConfig>({
     },
     json: {
       stringify: true
-    }
+    },
+    plugins: [
+      groupIconVitePlugin({
+        customIcon: {
+          cypress: 'vscode-icons:file-type-cypress',
+          'testing library': 'logos:testing-library'
+        }
+      }) as Plugin
+    ]
   }
 })

.vitepress/theme/index.ts

@@ -14,6 +14,9 @@ import ScrimbaLink from './components/ScrimbaLink.vue'
 // import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
 
+import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
+import 'virtual:group-icons.css'
+
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     // @ts-ignore

.vitepress/theme/styles/index.css

@@ -4,3 +4,4 @@
 @import "./inline-demo.css";
 @import "./utilities.css";
 @import "./style-guide.css";
+@import "./vars.css";

.vitepress/theme/styles/vars.css

@@ -0,0 +1,16 @@
+:root {
+  --vp-code-tab-active-bar-color: var(--vt-c-green);
+  --vp-code-tab-active-text-color: var(--vt-c-text-inverse-1);
+  --vp-code-tab-text-color: var(--vt-c-text-inverse-2);
+  --vp-code-tab-hover-text-color: var(--vt-c-text-inverse-1);
+  --vp-code-tab-bg: #292d3ef0;
+  --vp-code-block-bg: #292d3ef0;
+}
+
+.dark {
+  --vp-code-tab-text-color: var(--vt-c-text-2);
+  --vp-code-tab-hover-text-color: var(--vt-c-text-1);
+  --vp-code-tab-active-text-color: var(--vt-c-text-1);
+  --vp-code-tab-bg: var(--vt-c-black-mute);
+  --vp-code-block-bg: var(--vt-c-black-mute);
+}

package.json

@@ -30,6 +30,7 @@
     "textlint-filter-rule-comments": "^1.2.2",
     "textlint-rule-preset-vuejs-jp": "github:vuejs-jp/textlint-rule-preset-vuejs-jp",
     "typescript": "^5.6.3",
+    "vitepress-plugin-group-icons": "^1.5.4",
     "vue-tsc": "^2.1.6"
   },
   "gitHooks": {