CodeSnap是VSCode专用截图插件，支持一键生成带主题配色、行号、阴影和圆角的高质量代码图；操作含安装启用、基础截图、高级自定义、批量捕获及导出设置五步。
如果您希望在文档、博客或社交媒体中展示代码片段，但又不满足于简单的文本复制粘贴，则可能是由于缺乏专业级的代码高亮与排版效果。CodeSnap 是一款专为 VSCode 设计的截图插件，可一键生成带主题配色、行号、阴影和圆角的高质量代码图片。以下是使用该插件创建美观代码截图的具体操作方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用 CodeSnap 插件
CodeSnap 必须先在 VSCode 扩展市场中安装，并确保其处于启用状态，才能调用截图功能。未安装时所有快捷键和命令均不可用。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 CodeSnap，找到由 adpyke 发布的官方插件。
3、点击“安装”按钮，安装完成后点击“重新加载”或手动重启 VSCode。
二、基础截图：选中代码后快捷键触发
该方法适用于快速截取当前编辑器中已选中的任意代码块，自动应用默认主题与边框样式，无需额外配置。
1、在编辑器中用鼠标或键盘（Shift+方向键）选中目标代码段。
2、按下快捷键 Cmd+Shift+P 调出命令面板。
3、输入 CodeSnap: Take Snapshot 并回车执行。
4、截图将自动生成并保存至项目根目录下的 .codesnap 文件夹，同时在右侧预览窗口中显示。
三、高级截图：自定义主题与布局参数
CodeSnap 支持通过命令面板调用带参数的截图命令，可分别控制字体大小、背景透明度、是否显示文件名、是否添加阴影等视觉属性。
1、按下 Cmd+Shift+P 打开命令面板。
2、输入并选择 CodeSnap: Take Snapshot with Options。
3、在弹出的输入框中依次填写：fontSize=14、showFilename=true、dropShadow=true、backgroundOpacity=0.95。
4、确认后插件将按所设参数渲染截图，并保存至默认路径。
四、批量截图：对多个文件或区域连续捕获
当需为同一项目中的多个源文件生成风格统一的代码图时，可借助插件的多光标支持与文件遍历能力实现高效批量处理。
1、在资源管理器中按住 Cmd 键，依次点击选中多个 .js 或 .py 文件标签。
2、右键任意一个已激活的编辑器标签，选择 CodeSnap: Snap All Open Editors。
3、插件将为每个打开的编辑器标签生成一张独立截图，全部保存至 .codesnap 目录下，文件名含原始文件名与时间戳。
五、导出格式与路径自定义
CodeSnap 默认导出 PNG 格式，但可通过修改用户设置更改保存位置、格式类型及文件命名规则，以适配不同发布场景需求。
1、按下 Cmd+, 打开设置界面，切换到“JSON”编辑模式（右上角图标）。
2、在 settings.json 中添加如下字段：
"codesnap.exportFormat": "png",
"codesnap.exportPath": "./screenshots/",
"codesnap.fileNameTemplate": "${fileName}-${date}-${time}"
3、保存文件后，后续所有截图将按新路径与模板命名规则输出。
