VScode的代码截图插件CodeSnap

原创已于 2022-08-07 17:15:19 修改 · 1.7w 阅读

37 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vscode

于 2022-08-06 23:00:52 首次发布

前端专栏收录该内容

11 篇文章

订阅专栏

CodeSnap是一款VS Code插件，它使用户能够轻松地为代码块截取美观的屏幕截图。插件支持快速保存、复制到剪贴板、显示行号等特性，并且高度可配置，允许自定义背景颜色、阴影、边距、圆角等。通过settings.json文件，用户可以调整包括背景透明度、窗口控制显示、行号显示在内的多种设置，以定制屏幕截图的外观。

CodeSnap : 在 VS Code 中为您的代码截取漂亮的屏幕截图！

插件名：CodeSnap
官方地址：CodeSnap - Visual Studio Marketplace
特征：
- 快速保存代码的屏幕截图
- 将屏幕截图复制到剪贴板
- 显示行号
- 许多其他配置选项
用法：选中需要截取的代码块，然后右键点击 CodeSnap 即可

CodeSnap想更改相关配置如下可以在settings.json中添加相关配置

CodeSnap是高度可配置的, 以下是可以更改的设置列表，以调整屏幕截图的外观

配置	值	说明
codesnap.backgroundColor	十六进制颜色值	代码段容器边缘的背景色。可以是任何有效的CSS颜色。
codesnap.boxShadow	默认值：rgba(0,0,0,0.55) 0px 20px 68px	代码段的CSS框阴影。可以是任何有效的CSS框阴影
codesnap.containerPadding	整数，默认值:3em，也可以使用px	代码段容器边缘的填充。可以是任何有效的CSS填充
codesnap.roundedCorners	布尔值默认为：true	圆角配置用于配置边缘内部代码块边缘是否是圆角或方形角
codesnap.showWindowControls	布尔值默认为：true	显示或隐藏OSX样式窗囗按钮的布尔值。
codesnap.showWindowTitle	布尔值默认为：false	显示或隐藏窗囗标题栏上的文件夹或文件名。
codesnap.showLineNumbers	布尔值默认为：true	显示或隐藏行号的布尔值
codesnap.realLineNumbers	布尔值默认为：false	从文件的实际行号开始的布尔值，而不是1。
codesnap.transparentBackground	布尔值默认为：false	用于在拍摄屏幕快照时使用透明背景。
codesnap.target	值：window[不显示边缘容器] container[显示边缘容器]	意思就是是否要显示外部的边缘容器

//codesnap代码截图配置

"codesnap.backgroundColor":"#f2f2f2", //截图代码容器边缘颜色

"codesnap.boxShadow": "5px 5px 60px 0px #888888", //阴影设置

"codesnap.containerPadding":"3em",

"codesnap.roundedCorners":true,

"codesnap.showWindowControls":true,

"codesnap.showWindowTitle":false,

"codesnap.showLineNumbers":true,

"codesnap.realLineNumbers":false,

"codesnap.transparentBackground":false,

"codesnap.target":"container"