分享一个连DeepSeek都说“颜值高”的代码截图工具
作为一名程序员，我经常上各大社区闲逛，看看别人写的文章，当看到别人写的文章既有技术含量又美观的时候，心里是各种羡慕，心想什么时候我能写出这种文章来就好了，不过羡慕归羡慕，自己从没行动过。几个月前因为牙痛经常去看牙医，医生总爱在给我看牙时在旁边说像你这年纪牙齿怎么怎么样，才发现原来自己已经是个老掉牙的程序员，再不写就真的写不动了，最终下了决心来写，但开始写之后，一直有个小问题困扰着我：怎么把代码截图弄得好看一点？
直接截屏吧，白底黑字，背景杂乱，放到文章里显得很突兀，读者体验不好。用一些在线的代码美化工具，要么步骤繁琐，要么生成的图片带着去不掉的水印，要么风格千篇一律，没有辨识度。
最后，我干脆自己动手做了一个小工具，专治这个“小麻烦”。用了两个月，感觉非常顺手，今天就把这个工具和我的使用心得分享给大家。
1. 我的“变态”需求
在找工具的过程中，我发现自己有几个“非分之想”：
- 必须快：我写文章最怕打断思路。如果为了做一张截图，要打开一个复杂的设计软件，或者点来点去设置半天，我就完全不想用了。
- 风格要能“自定义”：我希望我博客里的代码图能有统一的风格，比如固定的背景色、内边距和圆角，形成自己的小品牌。而不是每次生成都像别人的图。
- 导出要高清：现在很多平台对图片清晰度要求高，导出糊成一团的工具直接淘汰。
- 最好能去掉水印（或者水印别太夸张）。
2. 我的解决方案：CodeSnap
试了一圈现有工具后，我索性按照自己的需求，写了一个网页工具，叫CodeSnap。部署好后，还特意发给DeepSeek网址，让它评价一下，原以为它在功能上会说一大通，结果它给出的结论是：“高颜值”，好吧，那我就发出来让大家看看它是长什么样子：
它的使用方法简单到令人发指：
粘贴代码：在右边的代码框里，直接粘贴你要展示的代码。
实时调整：在左边的面板里，你可以像调滤镜一样，随意调整：
- 主题：深色、浅色、多种高亮风格，还可以自定义，看心情和文章风格切换。
- 字体：可以选择喜欢的字体，调整字体大小。
- 尺寸：可以随意调整窗口大小和内边距大小。
- 水印：可以去掉水印，或者自定义水印，甚至可以移动水印的位置。
- 卡片：提供流行的卡片模板，一键嵌入，省时省力。
关键点是“实时”。你在这边调整，右边的代码图立刻跟着变，所见即所得，非常直观。
3. 我最喜欢的几个用法
- 让代码“呼吸”：适当的内边距和圆角，能让代码块看起来不那么拥挤，像有了“呼吸感”。
- 用“渐变背景”区分模块：当一篇文章里有多个代码块时，我会给它们用上同色系但深浅不同的渐变背景，视觉上更清晰。
- 一键导出高清图：选择 2x 导出，生成的图片在 Retina 屏幕上看也足够细腻。
- 保存/加载设置：当自己设计出一套喜欢的风格的时候，或需要做一些重复的工作的时候，把设置保存起来，下次用的时候直接加载。
4. 其它实用功能
- 截图转代码：有时候需要提取图片上的代码，于是又增加代码提取功能。
- 代码对比：有时候需要比较两段代码的截图，于是又加了这个功能，支持上传图片比较和输入代码比较。
- 生成动画：有时候需要动画显示代码的修改过程，干脆又加多这个功能。
5. 它对我的帮助
用了 CodeSnap 之后，我写文章的效率确实提升了一点。最明显的感觉是，我不再纠结于“怎么把代码放上去”，而是能更专注于“怎么把代码逻辑讲清楚”。这种“工具服务于创造”的感觉，是我最喜欢的。
6. 一点小私心
因为是自己做的工具，所以还在不断改进中。我把地址贴在这里，如果你也有和我类似的“截图小烦恼”，欢迎来试试，也欢迎给我提意见。
工具地址：toolion.cn/codesnap/
如果你觉得好用，或者有什么功能希望加上去，随时在文章下面留言，或者通过工具里的反馈通道告诉我。独立开发者的乐趣之一，就是能听到真实用户的声音。
作者：ZANE
链接：https://juejin.cn/post/7657456528342417460
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。