使用 VSCode 插件生成漂亮的代码截图

发布时间：2023-09-29 15:30

前言

写技术文章时，不少人会在文章中附带一些代码的截图，以便更直观地描述自己的想法。

在此之前，我都是使用微信或QQ完成代码截图，由于页面的缩略问题，一些代码截图文字较大，一些代码截图文字较小，十分不美观优雅。一次偶然的机会，看到别人使用 VSCode 的 CodeSnap 插件，可以生成非常漂亮的代码截图，一下子就被种草了，需要的小伙伴可以 Mark 一下！

打开 VSCode 的扩展页面，输入关键字 “CodeSnap ” 搜索 CodeSnap 插件安装即可。

CodeSnap 插件安装成功后，在代码编辑页面点击鼠标右键，在弹出来的选项内就可以看到有 CodeSnap 选项。

选中你想要截图的代码，然后点击鼠标右键，在弹出的选项中选择 CodeSnap 选项，就会看到页面右边已经生成了代码截图的预览图。

如果你想保存这张截图到本地目录的话，点击一下代码截图上方的彩虹色圈圈，就会弹出对话框，让你选择截图保存的路径。

如果你并不想保存该截图，只是想将该截图复制粘贴到你的文章中，那么只需要点击一下截图，然后 Ctrl+C 即可完成复制，然后在你想粘贴代码截图的地方 Ctrl+V 即可。