V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lyc575757
V2EX  ›  分享创造

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

  •  
  •   lyc575757 · 91 天前 · 1307 次点击
    这是一个创建于 91 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vitepress 有一个代码组功能,可以允许用户对多个代码块进行分组并切换:

    vitepress-plugin-group-icons 是一个插件,可以为代码组自动补充图标,增强文档的可读性。

    内置图标

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

    自定义图标

    你可以使用所有 iconify 或者本地的 svg 文件进行自定义图标展示。

    案例展示

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

    开始使用

    请访问文档地址查看详细的使用教程。

    GitHub 仓库

    欢迎大家使用此插件并反馈🥳

    9 条回复    2024-09-05 16:57:04 +08:00
    Ziuc
        1
    Ziuc  
       91 天前
    赞👍🏻
    mydebug
        2
    mydebug  
       91 天前
    来得正好,之前一直搜代码组是怎么写的没搜到,在这碰见了
    dufu1991
        3
    dufu1991  
       91 天前
    来得正好,之前我的项目中有这个需求,本来想着自己写一个,没时间,有你这个正好。
    dufu1991
        4
    dufu1991  
       91 天前
    只支持 vitepress 吗?
    lyc575757
        5
    lyc575757  
    OP
       91 天前
    @dufu1991 #4 目前是的 还有其他 SSG 框架有类似的需求吗
    dufu1991
        6
    dufu1991  
       91 天前
    @lyc575757 我这个是 Vite 项目,使用 hljs 高亮代码,想实现你这个效果,看来得自己写了。
    lyc575757
        7
    lyc575757  
    OP
       91 天前
    @dufu1991 #6 其实这个项目生成图标的大部分逻辑也是一个 Vite 插件,可以参考一下源代码里的 vite.ts 文件。
    dufu1991
        8
    dufu1991  
       91 天前
    @lyc575757 #7 OK
    dufu1991
        9
    dufu1991  
       89 天前   ❤️ 1
    看了一下,你这个逻辑我这边没法复用,我自己写了个基于 Tailwind 的纯 CSS 方案,实现这种代码组且带有 icon 的效果,已经完全满足我的需求,感谢。https://stdf.design/#/guide
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1517 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:18 · PVG 01:18 · LAX 09:18 · JFK 12:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.