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

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

前言

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

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

使用 VSCode 插件生成漂亮的代码截图_第1张图片


一、获取 CodeSnap 插件

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

使用 VSCode 插件生成漂亮的代码截图_第2张图片

二、使用 CodeSnap 插件

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

使用 VSCode 插件生成漂亮的代码截图_第3张图片

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

使用 VSCode 插件生成漂亮的代码截图_第4张图片

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

使用 VSCode 插件生成漂亮的代码截图_第5张图片

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号