From ac247d8ae8dff169ba8d451be1040f6cf6cac972 Mon Sep 17 00:00:00 2001
From: sea <45450994+warmthsea@users.noreply.github.com>
Date: Tue, 14 Jan 2025 20:40:30 +0800
Subject: [PATCH] docs: add code file-title and icon (#19638)

* docs: add code file-title and icon

* chore: update deps
---
 docs/.vitepress/config/plugins.ts |  2 ++
 docs/.vitepress/config/vite.ts    |  2 ++
 docs/.vitepress/theme/index.ts    |  1 +
 docs/en-US/guide/dark-mode.md     | 12 ++++-------
 docs/en-US/guide/dev-guide.md     |  4 +---
 docs/en-US/guide/i18n.md          |  4 ++--
 docs/en-US/guide/namespace.md     |  8 +++-----
 docs/en-US/guide/quickstart.md    | 34 ++++++++++++-------------------
 docs/en-US/guide/ssr.md           | 16 +++++++--------
 docs/en-US/guide/theming.md       | 11 ++++------
 docs/en-US/guide/transitions.md   |  2 +-
 docs/package.json                 |  3 ++-
 pnpm-lock.yaml                    | 28 +++++++++++++++++++++++++
 13 files changed, 71 insertions(+), 56 deletions(-)

diff --git a/docs/.vitepress/config/plugins.ts b/docs/.vitepress/config/plugins.ts
index 60ecf4a175..63924fb0a5 100644
--- a/docs/.vitepress/config/plugins.ts
+++ b/docs/.vitepress/config/plugins.ts
@@ -1,4 +1,5 @@
 import mdContainer from 'markdown-it-container'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 import externalLinkIcon from '../plugins/external-link-icon'
 import tableWrapper from '../plugins/table-wrapper'
 import tooltip from '../plugins/tooltip'
@@ -16,4 +17,5 @@ export const mdPlugin = (md: MarkdownRenderer) => {
   md.use(tag)
   md.use(mdContainer, 'demo', createDemoContainer(md))
   md.use(ApiTableContainer)
+  md.use(groupIconMdPlugin as unknown as (md: MarkdownRenderer) => void)
 }
diff --git a/docs/.vitepress/config/vite.ts b/docs/.vitepress/config/vite.ts
index e9f170bd65..ed4722ccb7 100644
--- a/docs/.vitepress/config/vite.ts
+++ b/docs/.vitepress/config/vite.ts
@@ -8,6 +8,7 @@ import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import { loadEnv } from 'vitepress'
+import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 import {
   docPackage,
   epPackage,
@@ -100,6 +101,7 @@ export const getViteConfig = ({ mode }: { mode: string }): ViteConfig => {
       UnoCSS(),
       MarkdownTransform(),
       Inspect(),
+      groupIconVitePlugin(),
       env.HTTPS ? (mkcert() as Plugin) : undefined,
     ],
     optimizeDeps: {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index dc68c02357..5de23987e0 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -8,6 +8,7 @@ import { define } from '../utils/types'
 import 'uno.css'
 import './style.css'
 import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
+import 'virtual:group-icons.css'
 import type { Theme } from 'vitepress'
 
 export default define<Theme>({
diff --git a/docs/en-US/guide/dark-mode.md b/docs/en-US/guide/dark-mode.md
index 667abbb510..bcc71a0bc2 100644
--- a/docs/en-US/guide/dark-mode.md
+++ b/docs/en-US/guide/dark-mode.md
@@ -26,8 +26,7 @@ First you can create a switch to toggle `dark` class of html.
 
 Then, you can quickly enable it with just one line of code to import CSS in your entry.
 
-```ts
-// main.ts
+```ts [main.ts]
 // if you just want to import css
 import 'element-plus/theme-chalk/dark/css-vars.css'
 ```
@@ -51,8 +50,7 @@ html.dark {
 
 Import it after styles of Element Plus:
 
-```ts
-// main.ts
+```ts [main.ts]
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import './styles/dark/css-vars.css'
 ```
@@ -63,8 +61,7 @@ If you use scss, you can also import scss file to compile.
 
 > You can refer [Theming](./theming.md) to get more info.
 
-```scss
-// styles/element/index.scss
+```scss [styles/element/index.scss]
 /*just override what you need*/
 @forward 'element-plus/theme-chalk/src/dark/var.scss' with (
   $bg-color: (
@@ -75,8 +72,7 @@ If you use scss, you can also import scss file to compile.
 );
 ```
 
-```ts
-// main.ts
+```ts [main.ts]
 import './styles/element/index.scss'
 
 // or just want to import scss?
diff --git a/docs/en-US/guide/dev-guide.md b/docs/en-US/guide/dev-guide.md
index 6c59be62e5..1b425ef63c 100644
--- a/docs/en-US/guide/dev-guide.md
+++ b/docs/en-US/guide/dev-guide.md
@@ -39,9 +39,7 @@ will start the local development environment.
 
 2. Add your component into `play/src/App.vue`
 
-> App.vue
-
-```vue
+```vue [App.vue]
 <template>
   <ComponentYouAreDeveloping />
 </template>
diff --git a/docs/en-US/guide/i18n.md b/docs/en-US/guide/i18n.md
index cce102a957..00e8ff50d6 100644
--- a/docs/en-US/guide/i18n.md
+++ b/docs/en-US/guide/i18n.md
@@ -12,7 +12,7 @@ languages, you can get you answer by keep reading.
 
 Element Plus provides global configurations
 
-```ts
+```ts [main.ts]
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
@@ -26,7 +26,7 @@ app.use(ElementPlus, {
 Element Plus also provides a Vue component [ConfigProvider](/en-US/component/config-provider)
 for globally configuring locale and other settings.
 
-```vue
+```vue [App.vue]
 <template>
   <el-config-provider :locale="zhCn">
     <app />
diff --git a/docs/en-US/guide/namespace.md b/docs/en-US/guide/namespace.md
index 7a29fea716..d502434901 100644
--- a/docs/en-US/guide/namespace.md
+++ b/docs/en-US/guide/namespace.md
@@ -24,8 +24,7 @@ You must set `ElConfigProvider` and scss `$namespace` at the same time.
 
 Use `ElConfigProvider` wrap your root component.
 
-```vue
-<!-- App.vue -->
+```vue [App.vue]
 <template>
   <el-config-provider namespace="ep">
     <!-- ... -->
@@ -37,8 +36,7 @@ Use `ElConfigProvider` wrap your root component.
 
 Create `styles/element/index.scss`:
 
-```scss
-// styles/element/index.scss
+```scss [styles/element/index.scss]
 // we can add this to custom namespace, default is 'el'
 @forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
   $namespace: 'ep'
@@ -50,7 +48,7 @@ Import `styles/element/index.scss` in `vite.config.ts`:
 
 > The same is true for webpack, which needs to be set in `preprocessorOptions`.
 
-```ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig({
diff --git a/docs/en-US/guide/quickstart.md b/docs/en-US/guide/quickstart.md
index 3c20f0da60..b9c2ca9111 100644
--- a/docs/en-US/guide/quickstart.md
+++ b/docs/en-US/guide/quickstart.md
@@ -13,8 +13,7 @@ This section describes how to use Element Plus in your project.
 
 If you don’t care about the bundle size so much, it’s more convenient to use full import.
 
-```ts
-// main.ts
+```ts [main.ts]
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -30,8 +29,7 @@ app.mount('#app')
 
 If you use volar, please add the global component type definition to `compilerOptions.types` in `tsconfig.json`.
 
-```json
-// tsconfig.json
+```json [tsconfig.json]
 {
   "compilerOptions": {
     // ...
@@ -56,8 +54,7 @@ Then add the code below into your `Vite` or `Webpack` config file.
 
 ##### Vite
 
-```ts
-// vite.config.ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
@@ -79,8 +76,7 @@ export default defineConfig({
 
 ##### Webpack
 
-```js
-// webpack.config.js
+```js [webpack.config.js]
 const AutoImport = require('unplugin-auto-import/webpack')
 const Components = require('unplugin-vue-components/webpack')
 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
@@ -110,8 +106,7 @@ npm install -D @element-plus/nuxt
 
 Then add the code below into your config file.
 
-```ts
-// nuxt.config.ts
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@element-plus/nuxt'],
 })
@@ -127,22 +122,19 @@ functionalities based on ES Module.
 But you need install [unplugin-element-plus](https://github.com/element-plus/unplugin-element-plus) for style import.
 And refer to the [docs](https://github.com/element-plus/unplugin-element-plus#readme) for how to configure it.
 
-> App.vue
-
-```html
+```vue [App.vue]
 <template>
   <el-button>I am ElButton</el-button>
 </template>
 <script>
-  import { ElButton } from 'element-plus'
-  export default {
-    components: { ElButton },
-  }
+import { ElButton } from 'element-plus'
+export default {
+  components: { ElButton },
+}
 </script>
 ```
 
-```ts
-// vite.config.ts
+```ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import ElementPlus from 'unplugin-element-plus/vite'
 
@@ -168,7 +160,7 @@ popup components, the default value for `zIndex` is `2000`.
 
 Full import:
 
-```ts
+```ts [main.ts]
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import App from './App.vue'
@@ -179,7 +171,7 @@ app.use(ElementPlus, { size: 'small', zIndex: 3000 })
 
 On-demand:
 
-```vue
+```vue [App.vue]
 <template>
   <el-config-provider :size="size" :z-index="zIndex">
     <app />
diff --git a/docs/en-US/guide/ssr.md b/docs/en-US/guide/ssr.md
index 63a03ca537..6d143bbfa0 100644
--- a/docs/en-US/guide/ssr.md
+++ b/docs/en-US/guide/ssr.md
@@ -18,8 +18,8 @@ For Nuxt users, we provide a [Nuxt module](https://github.com/element-plus/eleme
 The provided value is used to generate the unique ID in Element Plus.
 Because the different IDs are prone to hydrate errors in SSR, in order to ensure that the server side and client side generate the same ID, we need to inject the `ID_injection_key` into Vue.
 
-```ts
-// src/main.js (irrelevant code omitted)
+```ts [main.ts]
+// irrelevant code omitted
 import { createApp } from 'vue'
 import { ID_INJECTION_KEY } from 'element-plus'
 import App from './App.vue'
@@ -35,8 +35,8 @@ app.provide(ID_INJECTION_KEY, {
 
 When you using SSR for development, you may encounter hydration errors caused by `z-index`. In this case, we recommend injecting an initial value to avoid such errors.
 
-```ts
-// src/main.js (irrelevant code omitted)
+```ts [main.ts]
+// irrelevant code omitted
 import { createApp } from 'vue'
 import { ZINDEX_INJECTION_KEY } from 'element-plus'
 import App from './App.vue'
@@ -110,8 +110,8 @@ If you modify the [Namespace](./namespace.md) or `append-to` attribute, you need
 
 :::
 
-```js
-// src/entry-server.js (irrelevant code omitted)
+```js [src/entry-server.js]
+// irrelevant code omitted
 import { renderToString } from 'vue/server-renderer'
 import { createApp } from './main'
 
@@ -136,8 +136,8 @@ function renderTeleports(teleports) {
 }
 ```
 
-```js
-// server.js or prerender.js (irrelevant code omitted)
+```js [server.js or prerender.js]
+// irrelevant code omitted
 const [appHtml, preloadLinks, teleports] = await render(url, manifest)
 
 const html = template
diff --git a/docs/en-US/guide/theming.md b/docs/en-US/guide/theming.md
index 8472ab4c87..8bb5558bb9 100644
--- a/docs/en-US/guide/theming.md
+++ b/docs/en-US/guide/theming.md
@@ -80,8 +80,7 @@ Because the sass team said they will remove `@import` eventually.
 
 :::
 
-```scss
-// styles/element/index.scss
+```scss [styles/element/index.scss]
 /* just override what you need */
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
@@ -113,7 +112,7 @@ If they are mixed together, each hot update of `element-plus` needs to compile a
 
 :::
 
-```ts
+```ts [main.ts]
 import { createApp } from 'vue'
 import './styles/element/index.scss'
 import ElementPlus from 'element-plus'
@@ -127,7 +126,7 @@ If you are using vite, and you want to custom theme when importing on demand.
 
 Use `scss.additionalData` to compile variables with scss of every component.
 
-```ts
+```ts [vite.config.ts]
 import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -138,7 +137,6 @@ import vue from '@vitejs/plugin-vue'
 // or use unplugin-element-plus
 import ElementPlus from 'unplugin-element-plus/vite'
 
-// vite.config.ts
 export default defineConfig({
   resolve: {
     alias: {
@@ -174,8 +172,7 @@ export default defineConfig({
 
 If you are using webpack, and you want to custom theme when importing on demand.
 
-```ts
-// webpack.config.ts
+```js [webpack.config.js]
 // use unplugin-element-plus
 
 import ElementPlus from 'unplugin-element-plus/webpack'
diff --git a/docs/en-US/guide/transitions.md b/docs/en-US/guide/transitions.md
index 42f8523c6c..d8e8e0a9e9 100644
--- a/docs/en-US/guide/transitions.md
+++ b/docs/en-US/guide/transitions.md
@@ -36,7 +36,7 @@ transitions/collapse
 
 ## On-demand import
 
-```ts
+```ts [mian.ts]
 // collapse
 import { ElCollapseTransition } from 'element-plus'
 // fade/zoom
diff --git a/docs/package.json b/docs/package.json
index 438f780155..2f16c58db8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -38,6 +38,7 @@
     "unplugin-vue-components": "^0.27.4",
     "vite-plugin-inspect": "^0.8.7",
     "vite-plugin-mkcert": "^1.17.6",
-    "vitepress": "^1.2.3"
+    "vitepress": "^1.2.3",
+    "vitepress-plugin-group-icons": "^1.3.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11512ac179..025c4d1270 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -312,6 +312,9 @@ importers:
       vitepress:
         specifier: ^1.2.3
         version: 1.2.3(@algolia/client-search@4.24.0)(@types/node@22.9.0)(@types/react@18.3.3)(async-validator@4.2.5(patch_hash=wdmp4xlpil2odxo3rasjmxbdfm))(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.79.3)(search-insights@2.15.0)(terser@5.36.0)(typescript@5.5.4)
+      vitepress-plugin-group-icons:
+        specifier: ^1.3.4
+        version: 1.3.4
 
   internal/build:
     dependencies:
@@ -1710,9 +1713,15 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@iconify-json/logos@1.2.4':
+    resolution: {integrity: sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==}
+
   '@iconify-json/ri@1.1.3':
     resolution: {integrity: sha512-YQ45kQNpuHc2bso4fDGhooWou43qy7njD/I5l7vpjcujb+P/K2BfLASbWYTTUKu6lMersuFmO8F7NdGzy6eGWw==}
 
+  '@iconify-json/vscode-icons@1.2.10':
+    resolution: {integrity: sha512-qjp/j2RcHEZkesuAT6RP8BfcuHa+oERr7K1twfsulrIHrKZlpxxBeEyFm+3evZSAOgD+sjgU5CuTYS3RfCL+Pg==}
+
   '@iconify/types@1.1.0':
     resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
 
@@ -8114,6 +8123,9 @@ packages:
       terser:
         optional: true
 
+  vitepress-plugin-group-icons@1.3.4:
+    resolution: {integrity: sha512-lykQGXyalL7hnYY7NWr5+xFqgrNBbfXk2EB+dXojJ6KSAWvt9C39BwoJQ57BP0EykmcuDr/TVEouLa3ntjJbdQ==}
+
   vitepress@1.2.3:
     resolution: {integrity: sha512-GvEsrEeNLiDE1+fuwDAYJCYLNZDAna+EtnXlPajhv/MYeTjbNK6Bvyg6NoTdO1sbwuQJ0vuJR99bOlH53bo6lg==}
     hasBin: true
@@ -9565,10 +9577,18 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@iconify-json/logos@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ri@1.1.3':
     dependencies:
       '@iconify/types': 1.1.0
 
+  '@iconify-json/vscode-icons@1.2.10':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@1.1.0': {}
 
   '@iconify/types@2.0.0': {}
@@ -17053,6 +17073,14 @@ snapshots:
       sass: 1.79.3
       terser: 5.36.0
 
+  vitepress-plugin-group-icons@1.3.4:
+    dependencies:
+      '@iconify-json/logos': 1.2.4
+      '@iconify-json/vscode-icons': 1.2.10
+      '@iconify/utils': 2.1.33
+    transitivePeerDependencies:
+      - supports-color
+
   vitepress@1.2.3(@algolia/client-search@4.24.0)(@types/node@22.9.0)(@types/react@18.3.3)(async-validator@4.2.5(patch_hash=wdmp4xlpil2odxo3rasjmxbdfm))(axios@1.7.7)(nprogress@0.2.0)(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.79.3)(search-insights@2.15.0)(terser@5.36.0)(typescript@5.5.4):
     dependencies:
       '@docsearch/css': 3.6.0