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)。
欢迎大家使用此插件并反馈🥳 |
|