CodeSnap 是 VSCode 中最稳定、样式可控的代码截图插件,直接调用渲染引擎保留主题色、字体、行号等,右键即可复制为 PNG 到剪贴板;需正确配置中文字体与语言模式,不支持水印或圆角等额外样式。

用 CodeSnap 插件一键截取带样式的代码图
VSCode 本身不支持导出代码为图片,但 CodeSnap 是目前最稳定、样式可控、无需外部依赖的解决方案。它直接调用 VSCode 渲染引擎,保留主题色、字体、行号、折叠状态和光标位置,截图即所见。
安装后右键编辑器任意位置 → “Copy CodeSnap”,就会把当前文件(或选中区域)按当前主题渲染成 PNG 剪贴板图像,粘贴到微信、飞书、Notion 里就是高清图。
- 必须启用
"codesnap.copyToClipboard"配置项(默认开启) - 若截图无高亮,检查当前文件语言模式是否正确(如
.py文件不能被识别为plaintext) - 不支持自定义背景圆角或阴影——这是刻意设计,避免导出图与实际编辑体验割裂
导出带标题栏和文件名的分享图:用 Polacode 替代方案
Polacode 已停止维护,但它的核心能力(添加文件路径、语言标识、顶部标题栏)仍被部分用户需要。可改用轻量替代插件 Code Image,它支持:
- 自动在图顶部显示
filename.py • Python标题栏(可关闭) - 导出时保留当前缩放比例(
editor.zoomLevel生效) - 支持设置固定宽度(如
800px),避免长行换行错乱 - 注意:若启用了
fontLigatures: true,某些连字字体(如 Fira Code)在图中可能显示异常,建议临时关闭再截图
中文注释/变量名乱码?检查字体嵌入配置
截图中中文显示为方块或字母,不是主题问题,而是插件未正确嵌入中文字体。以 CodeSnap 为例,需手动指定系统已有中文字体:
"codesnap.fontFamily": "'Fira Code', 'Microsoft YaHei', 'PingFang SC', monospace"
顺序很重要:CodeSnap 只取第一个能完整覆盖 Unicode 范围的字体。如果 Microsoft YaHei 排在最后,而 Fira Code 缺少中文 glyph,就会 fallback 失败。
- Mac 用户推荐用
'SF Mono', 'PingFang SC' - Windows 用户确认
Microsoft YaHei或SimSun已安装(可在记事本中验证) - Linux 用户需确保已安装 Noto Sans CJK 或 wqy-microhei
想加 Logo 或水印?得用外部工具二次处理
所有 VSCode 截图插件都**不提供水印、Logo、边框、社交平台模板(如 Twitter 卡片尺寸)功能**——这不是遗漏,而是边界清晰的设计选择。它们只做一件事:忠实地把编辑器画面转成图。
真有品牌露出需求,建议导出后用命令行快速叠加:
# 安装 ImageMagick 后一行搞定(macOS/Linux) convert code.png -gravity southeast -pointsize 12 -fill gray -annotate +10+10 "myapp.dev" code-marked.png
强行让插件支持水印,反而会增加配置复杂度、拖慢截图速度、且难以适配不同 DPI 屏幕。留白给专业图像工具,才是更可持续的做法。
真正容易被忽略的是:截图前务必关闭所有浮动面板(终端、大纲、搜索侧边栏),否则它们会意外入镜——CodeSnap 截的是整个编辑器视图,不是仅代码区。











