PixConvert

免费在线代码截图生成器

将源代码转换为高分辨率的语法高亮截图效果图。可选择 macOS 窗口样式、主题和渐变背景。

精美的代码截图

粘贴代码,选择语言和主题,即可下载两倍屏幕尺寸的 PNG。

  • 13 种语法主题
  • 29 种语言
  • macOS、Windows、浏览器窗口框
  • 2 倍 PNG 导出

无需注册,完全在浏览器中运行。

谁在使用代码截图?

适合想在帖子、幻灯片或课程中展示清晰易读代码,又不想放杂乱编辑器截图的你。

开发者和工程师

把代码片段做成图片分享到 LinkedIn、X 或开发者论坛,颜色和间距都原样保留。信息流适合选深色主题,文档适合选浅色主题。

  • 适合社交媒体帖子的整洁代码图片
  • 用于作品集或 README 的项目亮点
  • 带 macOS 或 Windows 边框的简短代码小技巧

技术文档作者

在代码块显示效果不佳的博客文章、教程和新闻邮件中插入代码图片。统一使用同一种主题和内边距,让系列中的每张图片风格一致。

  • 用于博客文章和新闻邮件的代码图片
  • 用于视频封面或片头的代码画面
  • 用于电子书或课程页面的统一风格代码片段

教育工作者和演讲者

在幻灯片和讲义中展示清晰易读的代码。大会场可把字号调到 20 px,打印材料则使用浅色主题。

  • 会议幻灯片上醒目易读的大号代码
  • 在线课程的示例代码
  • 用于打印工作坊资料的浅色主题代码片段

支持主题、边框和背景的代码转图片工具

29 种语言、13 款主题、四种窗口样式、13 种背景加取色器,还有字号和内边距滑块。

同一段 Python 代码在 Dracula、Nord 和 GitHub Light 主题下的代码截图,每张都带有 macOS 窗口边框

用 13 款语法主题高亮代码

选好语言后,可以在 Dracula、Nord、Tokyo Night 和 GitHub Light 等主题之间切换。关键字、字符串和注释会采用主题配色,每次更改后预览都会重新绘制。

  • 29 种语言,从 Python 到 Terraform
  • 10 款深色主题和 3 款浅色主题
  • 关键字、字符串和注释分别着色
立即试用
一段 TypeScript 代码在 macOS、Windows、浏览器和无边框样式下、搭配四种背景的代码截图

为代码添加窗口边框和背景

用 macOS、Windows 或浏览器栏包裹代码片段,也可以不加边框直接显示。然后把背景设为 9 种纯色、4 种渐变或你选取的任意颜色。

  • macOS、Windows、浏览器或无边框
  • 9 种纯色、4 种渐变、自定义颜色
  • 内边距 0 到 80 px
立即试用

下载 2 倍大小的 PNG

点击“下载 PNG”会保存整张带边框的图片(含背景),尺寸为屏幕显示大小的两倍。文件名为 code-screenshot.png,如果要保存多张,请记得重命名。

字号和标签页标题

可在 11 到 20 px 之间设置代码字号,还能为窗口栏输入文件名,例如 index.ts。代码使用你设备的等宽字体。

免费、免注册、无水印

无需账号,也没有每日上限,想生成多少代码图片都可以。PNG 里只有你的代码和边框,不会添加任何标志。

编辑时预览实时重绘

对代码、主题、边框或滑块所做的更改会即时显示在预览中。计算新颜色时,图片会短暂变暗。

三步创建代码截图

1

粘贴代码。

点击“创建截图”,把代码片段粘贴到代码框中,并从列表里选择它的语言。这里没有自动检测,所以请选择与代码相符的语言。

2

设置图片样式。

选择主题、窗口样式和背景,再拖动字号和内边距滑块。如果想在窗口栏显示文件名,可以添加标签页标题。

3

下载 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 只记录页面访问,不会记录你的代码。