Vitepress 有一个[代码组]( https://vitepress.dev/zh/guide/markdown#code-groups)功能,可以允许用户对多个代码块进行分组并切换:

![]( https://i.imgur.com/OXAuRB8.png)

[vitepress-plugin-group-icons]( https://github.com/yuyinws/vitepress-plugin-group-icons) 是一个插件,可以为代码组自动补充图标,增强文档的可读性。

## 内置图标

包含常见的前端包管理器,框架,配置文件等

![]( https://i.imgur.com/qratqxs.png)

## 自定义图标

你可以使用所有 [iconify]( https://icones.js.org/) 或者本地的 svg 文件进行自定义图标展示。

![]( https://i.imgur.com/VSIorUz.png)


## 案例展示

已经有许多开源项目的 Vitepress 文档在使用此插件:

- [Hono]( https://hono.dev/docs/#quick-start)

- [UnoCSS]( https://unocss.dev/guide/style-reset#installation)

- [Vue Macros]( https://vue-macros.dev/guide/getting-started.html#installation)

- [Rolldown]( https://rolldown.rs/contrib-guide/setup-the-project)

- [Unplugin]( https://unplugin.unjs.io/guide/#install-package)

- [Unplugin Turbo Console]( https://utc.yuy1n.io/guide/getting-started.html#install)

- [...]( https://github.com/yuyinws/vitepress-plugin-group-icons/network/dependents)

## 开始使用

请访问[文档地址]( https://vp.yuy1n.io/)查看详细的使用教程。

[GitHub 仓库]( https://github.com/yuyinws/vitepress-plugin-group-icons)。

欢迎大家使用此插件并反馈🥳
举报· 90 次点击
登录 注册 站外分享
3 条回复  
Ziuc 小成 2024-9-3 12:56:22
赞👍🏻
mydebug 小成 2024-9-3 15:36:40

给你的 Vitepress 文档自动补充代码组图标 [vitepress-plugin-group-icons]

来得正好,之前一直搜代码组是怎么写的没搜到,在这碰见了
dufu1991 小成 2024-9-3 15:48:12

给你的 Vitepress 文档自动补充代码组图标 [vitepress-plugin-group-icons]

来得正好,之前我的项目中有这个需求,本来想着自己写一个,没时间,有你这个正好。
返回顶部