docs: add code file-title and icon (#19638)

* docs: add code file-title and icon

* chore: update deps

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)
 }

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: {

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>({

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?

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>

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 />

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({

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 />

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

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'

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

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"
   }
 }

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