Skills Icons: 在 Markdown 中添加技术栈图标很简单

内容分享5天前发布
0 1 0

Skills Icons: 在 Markdown 中添加技术栈图标很简单

Skills Icons: 在 Markdown 中添加技术栈图标很简单


想在自己的 GitHub 或Markdown 简历中这样展示自己的技术栈吗?我猜你是想的,由于我也想~。如果用文字写的话感觉不够形象,如果一个一个去找对应技术的图标,那工作量简直太大了。那这是怎么实现的呢?听我慢慢道来。

Skills Icons

Skills Icons: 在 Markdown 中添加技术栈图标很简单

今天和大家介绍的工具是 Skills Icons,它能够超级简单的在 Markdown 中插入技术栈的图标。它的使用方式有多简单呢?总共分三步:

1.Markdown 插入链接

[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)

Skills Icons: 在 Markdown 中添加技术栈图标很简单


此时已经展示了选择的四个图表。

2.查找你需要展示的技术栈code

Skills Icons 目前支持 160 个技术图标,包含大部分的常见技术栈。

Skills Icons: 在 Markdown 中添加技术栈图标很简单

技术栈对应的 code 可以在 Skills Icons 仓库中查询。

Skills Icons: 在 Markdown 中添加技术栈图标很简单


接下来把code放到链接的i参数上,并用英文逗号分开。例如:

[![My Skills](https://skillicons.dev/icons?i=java,kotlin,nodejs,figma&theme=light)](https://skillicons.dev)

Skills Icons: 在 Markdown 中添加技术栈图标很简单

3.调整样式

是的,Skills Icons 是可以调整样式的。Skills Icons 支持两种主体样式:light 和 dark。可以在链接后拼接 theme 参数。&theme=light

Skills Icons: 在 Markdown 中添加技术栈图标很简单

如果你擅长的技术栈比较多,Skills Icons 还支持换行展示。可以通过在链接后拼接 perline 参数指定每行展示图标的个数。 &perline=3

Skills Icons: 在 Markdown 中添加技术栈图标很简单

分享一个我生成的技术栈展示效果:

Skills Icons: 在 Markdown 中添加技术栈图标很简单

4.总结

Skills Icons 是在 Markdown 中添加技术栈图标的最简便方式。操作简单,还支持样式的调整,绝对能满足你的需求。大家快去试试看吧。

欢迎点赞、评论、转发~

Skills Icons: 在 Markdown 中添加技术栈图标很简单

© 版权声明

相关文章

1 条评论

  • 头像
    谭二九 投稿者

    收藏了,感谢分享

    无记录
    回复