Vitepress 代码块显示 icon 方案

创建: 2025.02.03 22:26:06   字数: 0   图片: 0

标签: 博客, 插件, 解决方案, 教程

安装

pnpm

pnpm add -D vitepress-plugin-group-icons

npm

npm install vitepress-plugin-group-icons -D

yarn

yarn add vitepress-plugin-group-icons -D

bun

bun vitepress-plugin-group-icons -d

配置

首先配置 Vitepress 的核心配置文件 📄:.vitepress/config.mts

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(groupIconMdPlugin) 
    },
  },
  vite: {
    plugins: [
      groupIconVitePlugin() 
    ],
  }
})

再配置 Vitepress 的主题配置文件 📄:.vitepress/theme/index.ts

.vitepress/theme/index.ts

import Theme from 'vitepress/theme'
import 'virtual:group-icons.css'

export default Theme

使用

代码块图标

输入

example.md

::: code-group

```sh [npm]
npm install vitepress-plugin-group-icons
```

```sh [yarn]
yarn add vitepress-plugin-group-icons
```

```sh [pnpm]
pnpm add vitepress-plugin-group-icons
```

```sh [bun]
bun add vitepress-plugin-group-icons
```

:::

输出

npm

npm install vitepress-plugin-group-icons

yarn

yarn add vitepress-plugin-group-icons

pnpm

pnpm add vitepress-plugin-group-icons

bun

bun add vitepress-plugin-group-icons

含标题代码块组

输入

example.md

```js [vite.config.js]
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})
```

输出

vite.config.js

import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

分不清图标和标题?

对于 代码块图标 ，是我们指定使用的包管理器如 pnpm 、文件后缀如 .ts 等的名称后，显示出来的对应图标。

对于 含标题代码块组 ，是我们指定文件名如 example.md 后，显示出来标题 example.md。

图标字典汇总

包管理器

index.js

// package manager
"pnpm": "vscode-icons:file-type-light-pnpm",
"npm": "vscode-icons:file-type-npm",
"yarn": "vscode-icons:file-type-yarn",
"bun": "vscode-icons:file-type-bun",
"deno": "vscode-icons:file-type-light-deno",
"pip": "vscode-icons:file-type-pip", 

效果如下

pnpm

demo

npm

demo

yarn

demo

bun

demo

deno

demo

pip

demo

框架

index.js

// frameworks
"vue": "vscode-icons:file-type-vue",
"svelte": "vscode-icons:file-type-svelte",
"angular": "vscode-icons:file-type-angular",
"react": "vscode-icons:file-type-reactjs",
"next": "vscode-icons:file-type-light-next",
"nuxt": "vscode-icons:file-type-nuxt",
"solid": "logos:solidjs-icon",
"astro": "vscode-icons:file-type-light-astro",
"docker":"vscode-icons:file-type-docker2", 

效果如下

Vue

demo

Svelte

demo

angular

demo

react

demo

next

demo

nuxt

demo

solid

demo

astro

demo

docker

demo

打包器

index.js

// bundlers
"rollup": "vscode-icons:file-type-rollup",
"webpack": "vscode-icons:file-type-webpack",
"vite": "vscode-icons:file-type-vite",
"esbuild": "vscode-icons:file-type-esbuild",

效果如下

rollup

demo

webpack

demo

vite

demo

esbuild

demo

配置文件

index.js

// configuration files
"package.json": "vscode-icons:file-type-node",
"tsconfig.json": "vscode-icons:file-type-tsconfig",
".npmrc": "vscode-icons:file-type-npm",
".editorconfig": "vscode-icons:file-type-editorconfig",
".eslintrc": "vscode-icons:file-type-eslint",
".eslintignore": "vscode-icons:file-type-eslint",
"eslint.config": "vscode-icons:file-type-eslint",
".gitignore": "vscode-icons:file-type-git",
".gitattributes": "vscode-icons:file-type-git",
".env": "vscode-icons:file-type-dotenv",
".env.example": "vscode-icons:file-type-dotenv",
".vscode": "vscode-icons:file-type-vscode",
"tailwind.config": "vscode-icons:file-type-tailwind",
"uno.config": "vscode-icons:file-type-unocss",
"unocss.config": "vscode-icons:file-type-unocss",
".oxlintrc": "vscode-icons:file-type-oxlint",

package.json

demo

tsconfig.json

demo

.npmrc

demo

.editorconfig

demo

.eslintrc

demo

.eslintignore

demo

eslint.config

demo

.gitignore

demo

.gitattributes

demo

.env

demo

.env.example

demo

.vscode

demo

tailwind.config

demo

uno.config

demo

unocss.config

demo

.oxlintrc

demo

文件扩展名

index.js

// filename extensions
".ts": "vscode-icons:file-type-typescript",
".mts":"vscode-icons:file-type-typescript", 
".tsx": "vscode-icons:file-type-typescript",
".mjs": "vscode-icons:file-type-js",
".cjs": "vscode-icons:file-type-js",
".json": "vscode-icons:file-type-json",
".js": "vscode-icons:file-type-js",
".jsx": "vscode-icons:file-type-js",
".md": "vscode-icons:file-type-markdown",
".py": "vscode-icons:file-type-python",
".cpp":"vscode-icons:file-type-cpp", 
".ico": "vscode-icons:file-type-favicon",
".html": "vscode-icons:file-type-html",
".css": "vscode-icons:file-type-css",
".yml": "vscode-icons:file-type-light-yaml",
".yaml": "vscode-icons:file-type-light-yaml",

.ts

demo

.mts

demo

.tsx

demo

.mjs

demo

.cjs

demo

.json

demo

.js

demo

.jsx

demo

.md

demo

.py

demo

.cpp

demo

.ico

demo

.html

demo

.css

demo

.yml

demo

.yaml

demo

命令行

index.js

// bash
"git":"vscode-icons:file-type-git", 
"powershell":"vscode-icons:file-type-powershell", 
"shell":"vscode-icons:file-type-shell", 

git

demo

powershell

demo

shell

demo

---

示例代码高亮行含义？

上述高亮示例代码是我针对个人需求，补充了插件库中所缺失的图标配置，内容如下

config.mts

groupIconVitePlugin({
	customIcon: {
		pip: "vscode-icons:file-type-pip",
		docker: "vscode-icons:file-type-docker2",
		".mts":"vscode-icons:file-type-typescript",
		".cpp": "vscode-icons:file-type-cpp",
		git: "vscode-icons:file-type-git",
		powershell: "vscode-icons:file-type-powershell",
		shell: "vscode-icons:file-type-shell"
	},
}),

如何客制化需求？见下文。

自定义图标

你可以从 vscode-icons、本地 SVG 文件或者外部 URL 链接进行图标自定义操作。

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { groupIconMdPlugin, groupIconVitePlugin, localIconLoader } from 'vitepress-plugin-group-icons'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(groupIconMdPlugin)
    },
  },
  vite: {
    plugins: [
      groupIconVitePlugin({
        customIcon: {
          '.mdx': 'vscode-icons:file-type-light-mdx',
          'babel': 'vscode-icons:file-type-babel',
          'ryanjoy': localIconLoader(import.meta.url, '../public/RyanJoy.svg'),
          'unplugin': 'https://unplugin.unjs.io/logo_light.svg',
        },
      })
    ],
  }
})

foo.mdx

demo

Babel

demo

RyanJoy

demo

Unplugin

demo

贡献者

RyanJoy

页面历史

最后编辑于 大约 2 个月前

查看完整历史

bea3639-docs:format

4a6f88f-docs(icon plugin):content modify

52f871c-docs(vitepress代码块icon.md):new document