CodeSnap插件:VS Code代码截图工具,助开发者生成高颜值语法高亮代码图片
后来用 CodeSnap,选了 “Monokai” 主题(就是那种黑底粉字的经典代码主题),把字体调到 14 号,勾选 “显示行号”,再点击面板上的 “拍照” 按钮,图片直接复制到剪贴板,粘贴到文章里一看,黑底衬托着粉色的关键字,行号清清楚楚,连读者都在评论区问 “你这代码图用啥做的?比如截一段 Python 代码,背景白花花的,字体还小,发出去别人得眯着眼看,重点代码也没突出 —— 小索奇之前就
你写技术文章或者发朋友圈分享代码的时候,是不是总觉得默认截图不好看?比如截一段 Python 代码,背景白花花的,字体还小,发出去别人得眯着眼看,重点代码也没突出 —— 小索奇之前就犯过这愁,直到在 Github 上发现了 CodeSnap,这个专门用来生成美观代码截图的工具,地址是https://github.com/kufii/CodeSnap,现在每次发代码图都靠它,颜值直接拉满。
其实 CodeSnap 是 VS Code 的一个插件,不用单独下载软件,在 VS Code 的插件市场搜 “CodeSnap” 就能安装,特别方便。它最核心的功能就是把代码块转换成带语法高亮、自定义主题的图片,而且操作超简单,你想想看,打开你要截图的代码文件,比如一段 Java 的 Stream 流处理代码,右键点击 “CodeSnap”,屏幕上就会弹出调整面板,能改主题、字体大小、是否显示行号,甚至能调背景色的透明度。
我之前写一篇关于 “Python 列表推导式优化” 的文章,要截一段嵌套的推导式代码,一开始用系统自带的截图工具,截出来的代码字又小又模糊,关键的 if 判断条件还不显眼。后来用 CodeSnap,选了 “Monokai” 主题(就是那种黑底粉字的经典代码主题),把字体调到 14 号,勾选 “显示行号”,再点击面板上的 “拍照” 按钮,图片直接复制到剪贴板,粘贴到文章里一看,黑底衬托着粉色的关键字,行号清清楚楚,连读者都在评论区问 “你这代码图用啥做的?”,别提多省心了。
它支持的语言也特别全,不光是 Java、Python 这些后端语言,前端的 JavaScript、Vue、React 代码,甚至是 Go、Rust 这类偏底层的语言,都能精准识别语法高亮。小索奇之前帮同事截一段 Rust 的生命周期代码,本来担心小众语言支持不好,结果 CodeSnap 不仅正确高亮了 &'a 这类生命周期标记,连注释都和代码区分开了,比我预期的还好用。
不过有个小缺点得跟你说清楚,它一次只能截一个代码块,要是你想截一整个文件的长代码,得分成好几次截,不像有些工具能滚动截图。但话说回来,日常分享代码的时候,谁会截一整个文件啊?大多是截关键的几行逻辑,所以这个缺点基本不影响使用。另外它生成的图片格式是 PNG,清晰度够高,发文章、发朋友圈都不会模糊,这点比很多在线截图工具强 —— 有些在线工具生成的 JPG 图,放大后字会发虚,CodeSnap 就不会。
你平时分享代码的时候,有没有遇到过截图不好看的问题?是将就用系统截图,还是已经有自己的小工具了?要是还没找到合适的,不妨去 VS Code 插件市场搜搜 CodeSnap,或者直接去它的 Github 主页看看使用教程,亲测能让你的代码图颜值提升一个档次。评论区跟我说说,你用它截的第一张代码图是哪种语言的呗?
我是【即兴小索奇】,点击关注,后台回复 领取,获取更多相关资源
更多推荐
所有评论(0)