📸 代码截图

粘贴代码 → 选择语言 · 主题 · 背景 → 生成精美 PNG 截图。适合社交分享和文章封面。

完全免费无需注册浏览器内完成 5 种语言深色模式

🔒 关于隐私

・所有处理均在您的浏览器中完成
・您的代码绝不发送到服务器
・无存储日志、无历史、无数据库
・无需注册、登录或付款

语言

主题

背景

文件名

内边距 (64)

代码

example.js

📖 常见的坑

粘贴代码，选择语言、主题与背景，即可导出带语法高亮的 PNG。它使用 highlight.js 与 html2canvas，处理全部在浏览器内完成。产出的是图片，因此其中的代码无法选中、无法复制、也无法搜索——仅此一点，就决定了下面绝大部分的注意事项。作为装饰它相当出色，但作为传达代码的手段，远不如文本。

情形	会发生什么	怎么处理
导出的 PNG 发糊	图片会按与预览相同的像素比导出——Retina 屏下是 2 倍——但它仍然发糊，因为损伤发生在之后。上传到社交媒体或 Slack 后，平台会自动缩小并重新压缩为 JPEG。横向较长的图尤其会被大幅压缩以适应时间线的栏宽，因此把四十行代码塞进一张图，在真实设备上几乎必定读不清。麻烦之处在于，你在自己屏幕上打开时读得很清楚，所以问题容易被忽略。	减少信息量比提高分辨率更有效。具体来说，把代码控制在 20 行以内，并加大字号——文字能扛住缩放，前提是它本来就够大。缩减内边距也有帮助，因为同样的宽度下，文字会相对变大。想展示很长的代码时，不要拆成多张图，而是根本别做成图——超过二十行的代码，不适合以图片形式呈现。发布前请务必在手机上打开确认——只凭电脑屏幕判断，结果就是发出一张多数读者读不清的图。
中日文或表情符号错位、消失	html2canvas 读取 DOM 并重绘到 Canvas 上，但它可能在 Web 字体加载完成之前就开始绘制。此时会以回退字体渲染，字符宽度随之改变，缩进也就乱了。而且，多数用于代码的等宽字体并不包含中日韩字形——把中文或日文混进 `Monaco`、`Menlo`，只有这部分会回退到别的字体，于是行高与字宽都对不齐。表情符号更麻烦：各操作系统的外观各不相同，某些环境下彩色表情根本渲染不出来，只剩方框。	导出前请等待字体加载完成——`await document.fonts.ready` 是最简单的做法。若代码中含有中日文，请显式指定支持 CJK 的等宽字体，例如 `Source Han Code JP`、`BIZ UDGothic`、`MS Gothic`：它们把这些字排成正好两个半角宽，缩进就不会乱。表情符号在代码截图中最好完全避免，环境差异实在太大。最后的确认，请打开导出的 PNG，亲眼看看缩进是否真的对齐——预览和输出是两回事。
在文章正文里用了代码图片	一旦变成图片，读者就无法复制代码了——只能手抄，或者放弃。不止如此，屏幕阅读器读不出来，浏览器搜索找不到，翻译工具不处理，搜索引擎也看不见。在手机上放大会糊，深色模式与字号设置对它完全无效。Stack Overflow 明确禁止发布代码截图，正是因为这一切对提问和回答都毫无帮助。技术文章最宝贵的属性是读者能在自己的环境里试一试，而图片直接堵死了这条路。	代码图片请只用于「装饰」场合——社交卡片图、文章头图、幻灯片封面，这些本来就不指望被逐字阅读的地方。文章正文里必须放文本形式的代码块。两者都想要的话，就采用头部放图、正文放同一份代码的文本版，观感与实用性可以兼得。判断标准是「你是否希望读者运行这段代码」——如果希望，就不能做成图片。即便是发到社交媒体，也请在正文或链接目标处提供文本版——大多数「跑不起来」的反馈，其实是抄错了。

截图会把你根本没打算收进去的东西一并拍下。哪怕你以为只裁了代码，它也会带上文件路径（里面常常含有用户名）、内部主机名、公司内部标识、注释里写的工单号，以及 API 密钥或令牌。文本可以用 Ctrl+F 机械地排查，但图片既过不了评审的筛，也进不了搜索的网，于是会长期挂在那里。发布前请打开图片，逐行用眼睛看一遍——「应该没问题吧」正是这类事故的起点。另外：把别人的代码做成图片，并不会让著作权消失。当许可证要求署名时，「我截了个图」不构成豁免理由——若超出合理引用的范围，请一并注明出处与许可证。

📖 使用方法

1

粘贴代码

将代码粘贴到文本区域。
2

选择语言、主题、背景

预览即时更新。
3

保存为 PNG

下载 PNG 或复制到剪贴板。

❓ 常见问题

代码会发送到服务器吗？

不会。仅在浏览器内处理。

支持哪些语言？

支持 JS / TS / Python / Go / PHP / Ruby / Bash 等。

输出分辨率？

与预览相同。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。