代码 → 图片转换器，免费

为什么使用代码 → 图片？

代码图片非常适合社交媒体分享（Twitter/X、LinkedIn）、文档、演示和没有代码格式化功能的教程。它们保留语法高亮，在任何平台上都好看。

工作原理

1. 粘贴代码：输入任意代码片段 ， JavaScript、Python、CSS、SQL、shell 命令或任何其他语言。
2. 选择主题：选择浅色、深色或高对比度的语法高亮主题。
3. 自定义外框：设置窗口风格（macOS/Windows/极简）、背景色或渐变、内边距和字号。
4. 导出：下载为 PNG 或 SVG ， 适合在 Twitter/X、LinkedIn 分享或嵌入您的文章。

为什么把代码转为图片？

以截图形式分享代码比粘贴纯文本更吸引眼球 ， 保留语法高亮，在社交媒体上一眼就能读懂。代码图片被开发者、技术讲师和内容创作者广泛用于 Twitter/X、LinkedIn、Instagram 和 YouTube 缩略图。像 Carbon（carbon.now.sh）之类的工具让这种格式流行起来。这个浏览器内的版本可以生成精美的截图，而不会把您的代码发送到外部服务器，支持所有主流语言的精准高亮，窗口样式也可自定义。

自定义选项

• 窗口样式 ， macOS「红绿灯」按钮、Windows 控件或极简纯净风
• 语法高亮主题 ， Dracula、One Dark、GitHub Light、Monokai 等
• 背景 ， 纯色、渐变或透明
• 字体 ， JetBrains Mono、Fira Code、Inconsolata 等
• 内边距与缩放 ， 适配不同社交媒体尺寸

什么是代码转图像工具?

代码转图像工具接受一段源代码片段,应用语法高亮,将其包装在风格化的窗口框架中,并导出准备好在社交媒体上分享、粘贴到幻灯片中或嵌入到博客文章头图中的 PNG(或 JPG、WebP)。结果读起来就像从漂亮的代码编辑器截屏,只是布局、主题和框架都是可重现的,分辨率对您需要的任何宽高比都是像素完美的。

语法高亮是关键字(if、function、return)获得一种颜色、字符串获得另一种、注释变暗等等的视觉风格。做好了,它能让代码在几毫秒内可扫描。用纯文本做,同样的片段读起来像一堵单色灰色的墙。经典的 Monokai 深色主题、GitHub Dark 和 Dracula 是社交媒体上分享最多的,因为它们的对比度能在图像压缩中存活下来。

这个工具完全在您的浏览器中运行,使用 highlight.js 进行语言检测,使用 html2canvas 将样式化的 DOM 光栅化为可下载的图像。您的代码永远不会离开页面。输出的 PNG 可以拖入任何推文、LinkedIn 帖子、Notion 文档或设计画布,它保持清晰,因为 html2canvas 以设备像素比渲染。

工具内部有什么

左列是控件面板:代码的文本区域、带有 16 个流行选项(JavaScript、TypeScript、Python、HTML、CSS、JSON、Bash、SQL、Java、C#、PHP、Ruby、Go、Rust、XML、YAML)的语言下拉菜单、主题选择器(Dark Monokai、Light、GitHub Dark)、带有五个渐变和三个纯色的背景选择器,以及内边距和字体大小滑块。

两个复选框切换 macOS 风格的窗口圆点(框架顶部的红、黄、绿交通灯)和行号。圆点是纯装饰,但使图像读起来像代码编辑器截图,而不是纯文本粘贴。当您在教程或错误报告中引用特定行时,行号会有所帮助。

右列是实时预览:它在所选框架、内边距和背景内渲染高亮代码。每个控件都实时更新预览。下载 PNG 按钮通过 html2canvas 以原生分辨率序列化预览并触发浏览器下载。无需往返服务器,无需上传您的代码。

历史和背景

列表打印输出(1944 年起)

1944 年的哈佛 Mark I 在连续进纸的纸张上打印程序列表,这是最早离开计算机内存的源代码工件。整个 1950 年代和 1960 年代,行式打印机在绿条纸上生产了数英里的 FORTRAN 和 COBOL。该格式是单色的,因为打印机的菊花轮只有一种字体,但这种约定保留了下来:源代码是单色的,因为此后的每个编辑器都保留了这种 80 列的遗产。

Emacs 中的实时语法高亮(1984)

Richard Stallman 的 Emacs 在 1984 年添加了 font-lock-mode,这是第一个广泛使用的实时语法高亮器。关键字以一种颜色出现,字符串以另一种,注释变暗。视觉编码通过将代码视为结构化文本加速了阅读。Vim 在 1991 年添加了语法,BBEdit 在 Mac 上在 1992 年,每个现代编辑器(VSCode、Sublime Text、JetBrains、Neovim)都建立在这一血统上。

TextMate 主题和 Monokai(2006)

Allan Odgaard 的 TextMate(2004)引入了设计师可以共享的主题文件。Wimer Hazenberg 的 Monokai 主题(2006)成为 2000 年代后期标志性的深色代码美学。Sublime Text 在 2008 年采用 Monokai 作为默认值,这些颜色(深橄榄背景上的绿色关键字、粉色字符串、蓝色函数)成为认真代码工作的视觉简写。

highlight.js 发布(2006)

Ivan Sagalaev 在 2006 年发布了 highlight.js,这是一个纯 JavaScript 语法高亮器,可自动检测语言并生成语义 HTML。它成为博客、文档站点和 Stack Overflow 的默认设置。今天它支持 190+ 种语言和 250+ 种主题。这个工具使用 highlight.js 进行底层语法着色。

Carbon 发布(2017)

Dawn Labs(Mike Fix 和 Brian Dennis)在 2017 年发布了 carbon.now.sh,这是第一个专门用于为社交媒体制作精美代码截图的浏览器工具。它添加了渐变背景、macOS 窗口装饰、可配置的内边距和一键 PNG 导出。Carbon 在 Twitter 上走红,实际上发明了这个类别。这个工具完全在您的浏览器中提供相同的核心功能集,无需 Carbon 帐户。

Ray.so、CodeSnap、Polacode(2020 年起)

Raycast 在 2020 年发布了 Ray.so,默认值比 Carbon 更干净。CodeSnap 和 Polacode(2018)将该格式作为扩展带到 VSCode,让您无需离开编辑器即可截图选定的代码。该类别已成熟,成为每个开发者内容创作工具箱的默认部分。模式(窗口圆点、渐变背景、单色字体、语法主题)已稳定为可识别的视觉流派。

实用工作流

带代码片段的 Twitter 或 X 帖子

推文中的代码图像获得相同代码作为文本粘贴的 3 到 5 倍参与度。粘贴片段,选择渐变背景(紫色或粉色在时间线中读起来最好),勾选窗口圆点,如果片段少于十行,则关闭行号。下载 PNG,拖入推文撰写器。

技术招聘的 LinkedIn 帖子

在 LinkedIn 上分享周五小贴士或代码评审见解时,风格化的代码图像会让人停止滚动。LinkedIn 图像最好在 1200 乘 627 像素的预览卡渲染;调整内边距滑块,直到导出大致填满该宽高比。深色 Monokai 主题在 LinkedIn 的蓝灰色背景下读起来很好。

博客文章头图

对于关于特定函数或模式的文章,该函数的风格化图像构成了一个很棒的 Open Graph 头图(1200 乘 630 像素)。该图像出现在 Twitter 卡片、Slack 链接预览和 Facebook 分享上。将其与文章正文中真正的、可复制粘贴的 <pre><code> 块配对,以提高可访问性。

会议幻灯片

在 Keynote 或 Google Slides 演示中,语法高亮的代码图像从显示器到投影仪都能清晰缩放。将字体大小滑块设置为 18 或 20 像素以便后排可读,选择高对比度主题(Dark Monokai 或 GitHub Dark),并使用透明背景,以便幻灯片模板透出。

GitHub README 横幅

README 以显示库的 hello-world 示例的风格化代码图像打开效果更好。该图像位于您仓库的 docs/ 文件夹中,通过 Markdown 引用。GitHub 在项目登陆页面上原生渲染该图像,在那里语法高亮的 PNG 比下面的纯文本围栏块读起来更好。

YouTube 教程缩略图或 B-roll

对于编码教程,高分辨率代码图像可作为缩略图背景或在实时屏幕段之间插入的 B-roll。以 14 到 16 像素字体大小导出,带有慷慨的内边距,然后放入编辑器并调整大小。图像在 1080p 或 4K 下保持清晰,因为 html2canvas 以设备像素比渲染。

常见陷阱

代码图像不可搜索

搜索引擎无法索引图像内的文本(目前)。如果您的博客依赖 Google 流量,请将真实代码作为 <pre><code> 块嵌入文章正文中。仅将风格化图像用作社交分享缩略图或头图,而不是代码的主要表示。

屏幕阅读器无法读取图像中的代码

使用 NVDA、JAWS 或 VoiceOver 的盲人用户在遇到代码截图时只听到「图像」,什么都没有。始终在附近提供相同的代码作为可访问文本,要么通过 alt 属性(短片段),要么通过包含完整源代码的视觉隐藏 <pre><code> 块。否则该帖子对辅助技术不可用。

读者无法从图像中复制代码

当受众想要复制并运行代码时,图像迫使他们重新输入或 OCR。Google Lens 和 macOS Live Text 的 OCR 做得相当好,但这是阻力。对于教程和操作指南,将图像(用于视觉吸引力)与可复制粘贴的文本块(用于可用性)配对。

长行换行或被切断

一个 200 字符的 SQL 查询或深度嵌套的 JSX 表达式会溢出框架。预览添加水平滚动条,但导出的 PNG 要么尴尬地换行,要么剪掉。重构片段以适合大约 80 列,或将其拆分到多个较小的代码图像中。在导出前始终预览。

浅色社交媒体背景上的深色主题

Monokai 深色图像在 Twitter 深色模式时间线上看起来很棒,但在浅色模式信息流上造成强烈对比。在深色代码框架周围添加内边距(彩色渐变背景有帮助),这样深色块就不会撞上白色页面。相反,浅色主题在深色模式信息流上需要相反的考虑。

过时的语言版本高亮

highlight.js 很好,但在前沿落后。新的 ES2024 语法(using disposable resources、装饰器)或 Rust 异步功能可能无法完美高亮。代码仍然清晰可读,但关键字可能显示为普通标识符。如果精确的前沿着色很重要,请使用不同的高亮器(Shiki、Prism)。

隐私和数据处理

所有高亮和光栅化都在您的浏览器中进行。highlight.js 在本地解析您的代码,html2canvas 将渲染的 DOM 序列化为 PNG,下载通过 blob URL 触发。我们不将您的源代码传输到任何服务器,不记录输入,也不存储输出。

页面加载后(包括 highlight.js 和 html2canvas CDN 文件),该工具可以离线工作。您可以从网络断开连接并截取专有代码、内部 API 示例或任何不应触及第三方服务的片段。CDN 库一次性加载并在本地缓存。

什么时候不使用代码转图像工具

生产博客代码块

在操作指南文章的正文内,使用带有服务器端高亮器(Shiki、Prism、highlight.js)的真实 <pre><code> 块。真实代码块可选、可复制、可搜索、可访问且可通过深色模式 CSS 样式化。仅将图像保留用于头图、社交分享缩略图或视觉点缀,而不是工作代码。

需要可搜索的文档

如果您的文档站点依赖 Algolia DocSearch、GitBook search 或任何全文索引,图像中的代码对搜索引擎不可见。搜索特定函数名的工程师不会在您仅图像的示例中找到它。始终在索引文档中使用真实代码块。

长文件或多屏代码

200 行的文件不适合在可读字体大小的单个图像中。将其分解为逻辑块(每个图像一个函数),或者只共享带有完整源代码的 GitHub gist 链接。强制将长文件放入一个 PNG 会产生一堵难以阅读的小文字墙。

可见秘密的敏感代码

带有 API 密钥、数据库 URL 或硬编码凭据的代码截图会在几小时内从 Twitter 抓取并由 GitHub 秘密扫描器索引。凭据在图像中的事实并不会减慢攻击者;OCR 管道会获取它们。立即轮换出现在公共代码图像中的任何秘密。

更多问题

PNG 还是 SVG,我应该使用哪种导出格式?

PNG 是社交媒体的安全默认值(普遍支持、无损、典型代码图像的小文件大小)。SVG 在任何缩放级别都更清晰,但在 Twitter、LinkedIn 或大多数社交平台上不支持作为内联内容。对于您自己的博客中的 Web 嵌入,SVG 在技术上更好;对于任何社交分享,请坚持使用 PNG。这个工具仅导出 PNG。

我应该写什么 alt 文本?

对于短片段(少于五行),将实际代码放在 alt 属性中。对于较长片段,在 alt 中写一句话摘要(例如,「获取用户数据并处理 404 错误的 JavaScript 函数」),并在附近包含完整代码作为可见的 <pre><code> 块。永远不要在代码图像上留空 alt。

什么尺寸适合社交媒体?

Twitter/X:1200 乘 675 像素(16:9),或 1080 乘 1350 用于纵向。LinkedIn:1200 乘 627(横向)或 1200 乘 1200(方形)。Instagram:1080 乘 1080(方形)。Open Graph 头图:1200 乘 630。该工具以自然预览大小导出;调整内边距和字体大致达到目标宽高比,然后如果需要像素完美的尺寸,在图像编辑器中裁剪或填充。

什么字体最适合代码图像?

这个工具使用 Fira Code、Cascadia Code 或 Consolas(浏览器选择第一个已安装的)。Fira Code 有编程连字(=> 渲染为单个箭头字形),在截图中看起来很惊艳。JetBrains Mono 和 Source Code Pro 是同样可读的替代品。避免通用 monospace,它在 Windows 上可能是系统默认 Courier,看起来过时了。

为什么导出看起来与预览略有不同?

html2canvas 通过在 JavaScript 中重新实现 CSS 渲染来光栅化 DOM。某些属性(高级 CSS 滤镜、某些字体功能、带有复杂背景的 ::before/::after 伪元素)可能与实时浏览器预览略有不同的渲染。差异通常很小,亚像素抗锯齿或字体粗细,但如果导出看起来错误,请简化样式。

这与 Carbon(carbon.now.sh)相比如何?

Carbon 有更多主题、更多字体和动画 GIF 导出。这个工具涵盖 80% 的情况(PNG 导出、最流行的主题、渐变背景、窗口圆点),无需将您的代码发送到第三方服务器。对于一次性社交媒体分享它更快;对于跨多个图像的繁重定制或品牌一致性,Carbon 的预设库很难被击败。

相关工具