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

* feat: enhance code block & code group

* chore: fix line number

* chore: duplicate code line

Author: yuyinws

.vitepress/config.ts

@@ -5,6 +5,7 @@ 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'] = [
   {
@@ -846,6 +847,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     theme: 'github-dark',
     config(md) {
       md.use(headerPlugin)
+        .use(groupIconMdPlugin)
       // .use(textAdPlugin)
     }
   },
@@ -874,6 +876,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

@@ -23,6 +23,7 @@
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.7.5",
     "typescript": "^5.6.3",
+    "vitepress-plugin-group-icons": "^1.5.4",
     "vue-tsc": "^2.1.6"
   },
   "packageManager": "[email protected]"