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

@@ -6,6 +6,7 @@ import llmstxt from 'vitepress-plugin-llms'
 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'] = [
   {
@@ -757,6 +758,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     theme: 'github-dark',
     config(md) {
       md.use(headerPlugin)
+        .use(groupIconMdPlugin)
       // .use(textAdPlugin)
     }
   },
@@ -808,6 +810,12 @@ Vue.js - The Progressive JavaScript Framework
 ## Table of Contents
 
 {toc}`
+      }) as Plugin,
+      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",
     "vitepress-plugin-llms": "^0.0.8",
     "vue-tsc": "^2.1.6"
   },