免费在线代码截图生成器
将源代码转换为高分辨率的语法高亮截图效果图。可选择 macOS 窗口样式、主题和渐变背景。
精美的代码截图
粘贴代码,选择语言和主题,即可下载两倍屏幕尺寸的 PNG。
- 13 种语法主题
- 29 种语言
- macOS、Windows、浏览器窗口框
- 2 倍 PNG 导出
无需注册,完全在浏览器中运行。
谁在使用代码截图?
适合想在帖子、幻灯片或课程中展示清晰易读代码,又不想放杂乱编辑器截图的你。
开发者和工程师
把代码片段做成图片分享到 LinkedIn、X 或开发者论坛,颜色和间距都原样保留。信息流适合选深色主题,文档适合选浅色主题。
- 适合社交媒体帖子的整洁代码图片
- 用于作品集或 README 的项目亮点
- 带 macOS 或 Windows 边框的简短代码小技巧
技术文档作者
在代码块显示效果不佳的博客文章、教程和新闻邮件中插入代码图片。统一使用同一种主题和内边距,让系列中的每张图片风格一致。
- 用于博客文章和新闻邮件的代码图片
- 用于视频封面或片头的代码画面
- 用于电子书或课程页面的统一风格代码片段
教育工作者和演讲者
在幻灯片和讲义中展示清晰易读的代码。大会场可把字号调到 20 px,打印材料则使用浅色主题。
- 会议幻灯片上醒目易读的大号代码
- 在线课程的示例代码
- 用于打印工作坊资料的浅色主题代码片段
支持主题、边框和背景的代码转图片工具
29 种语言、13 款主题、四种窗口样式、13 种背景加取色器,还有字号和内边距滑块。

用 13 款语法主题高亮代码
选好语言后,可以在 Dracula、Nord、Tokyo Night 和 GitHub Light 等主题之间切换。关键字、字符串和注释会采用主题配色,每次更改后预览都会重新绘制。
- 29 种语言,从 Python 到 Terraform
- 10 款深色主题和 3 款浅色主题
- 关键字、字符串和注释分别着色

为代码添加窗口边框和背景
用 macOS、Windows 或浏览器栏包裹代码片段,也可以不加边框直接显示。然后把背景设为 9 种纯色、4 种渐变或你选取的任意颜色。
- macOS、Windows、浏览器或无边框
- 9 种纯色、4 种渐变、自定义颜色
- 内边距 0 到 80 px
下载 2 倍大小的 PNG
点击“下载 PNG”会保存整张带边框的图片(含背景),尺寸为屏幕显示大小的两倍。文件名为 code-screenshot.png,如果要保存多张,请记得重命名。
字号和标签页标题
可在 11 到 20 px 之间设置代码字号,还能为窗口栏输入文件名,例如 index.ts。代码使用你设备的等宽字体。
免费、免注册、无水印
无需账号,也没有每日上限,想生成多少代码图片都可以。PNG 里只有你的代码和边框,不会添加任何标志。
编辑时预览实时重绘
对代码、主题、边框或滑块所做的更改会即时显示在预览中。计算新颜色时,图片会短暂变暗。
三步创建代码截图
粘贴代码。
点击“创建截图”,把代码片段粘贴到代码框中,并从列表里选择它的语言。这里没有自动检测,所以请选择与代码相符的语言。
设置图片样式。
选择主题、窗口样式和背景,再拖动字号和内边距滑块。如果想在窗口栏显示文件名,可以添加标签页标题。
下载 PNG。
确认预览后,点击“下载 PNG”。你会得到 code-screenshot.png,尺寸是预览的两倍,可直接用于帖子、文档或幻灯片。
常见问题
关于语言、主题、行号、背景以及所下载 PNG 的解答。
如何把代码变成图片?
打开编辑器,粘贴代码片段并选择语言。选好主题、窗口边框和背景后,点击“下载 PNG”。图片会以 code-screenshot.png 为文件名保存到你的设备,尺寸是预览的两倍,可直接发布或放进幻灯片。
可以高亮哪些编程语言?
共有 29 种可选:TypeScript、JavaScript、Python、Rust、Go、Java、Kotlin、Swift、C、C++、C#、Ruby、PHP、HTML、CSS、SCSS、JSON、YAML、TOML、Bash、shell、SQL、GraphQL、Markdown、Dockerfile、Terraform、Vue、JSX 和 TSX。列表中显示的是简短标识,所以 C++ 显示为 cpp,C# 显示为 csharp。
有哪些语法主题可用?
共有 13 款主题。10 款深色:Vitesse Dark、GitHub Dark、Dracula、Nord、One Dark Pro、Monokai、Catppuccin Mocha、Tokyo Night、Min Dark 和 Solarized Dark。3 款浅色:Vitesse Light、GitHub Light 和 Solarized Light。编辑器默认使用 Vitesse Dark。
代码图片中可以显示行号吗?
目前还不行。编辑器里有“显示行号”选框,但它暂时不会添加行号,所以 PNG 中没有行号。如果想让读者看某一行,可以在文字中引用该行,或在代码里加一条简短注释。
下载的 PNG 尺寸是多少?
PNG 的宽和高都是带边框预览的两倍。边框在屏幕上至少 400 px 宽,所以文件至少 800 px 宽。行越长、字号越大或内边距越多,图片就越大。
可以使用透明背景或自定义背景吗?
可以使用自定义颜色,但不能使用透明背景。你可以选择 9 种纯色或 4 种渐变之一,也可以打开取色器选取任意纯色。取色器无法生成渐变,也没有透明选项,所以窗口周围的区域始终有颜色。
各种窗口样式是什么样的?
macOS 样式会绘制红、黄、绿三个圆点。Windows 样式在左侧显示标签页标题,右侧是最小化、最大化和关闭图标。浏览器样式会加上前进、后退箭头和地址栏。无边框样式只在背景上显示代码。
给代码截图需要安装 VS Code 扩展吗?
不需要。从 VS Code、PyCharm 或任何其他编辑器中复制代码,粘贴到这里即可。普通屏幕截图还会带上标签页、侧边栏和你自己的配色设置,而这个工具只绘制代码片段本身,并采用你选择的主题和边框。
为什么我的代码颜色不对?
请先检查“语言”菜单。工具不会自动猜测语言,所以把 Python 代码设成 TypeScript 就会得到错误的颜色。请选择与你的代码片段相符的语言。如果高亮失败,代码会以单一颜色的纯文本显示,而不是弹出错误提示。
可以更改代码字体吗?
可以调整字号,但不能更换字体。滑块范围是 11 到 20 px。代码使用你设备自带的等宽字体,所以同一段代码在 Mac 和 Windows 上生成时,外观可能略有不同。
代码截图工具免费吗?我的代码会被发送到别处吗?
是的,完全免费,无需账号,没有水印,也没有每日次数限制。你的代码绝不会发送到服务器;图片在你的设备上绘制并保存。在线网站上,Google Analytics 只记录页面访问,不会记录你的代码。