代码截图生成器, 类 Carbon.now.sh, 12 种主题 + 12 种渐变背景 + 窗口装饰, 一键导出 PNG/SVG, 适合发推/写博/技术分享。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
点击行号可标亮该行。
这个工具能做什么
浏览器内完整运行的 Carbon.now.sh 替代品, 数据不上传。粘贴任意代码, 支持 15 种主流语言 (JavaScript / TypeScript / JSX / TSX / Python / Go / Rust / Java / C++ / C# / SQL / Bash / HTML / CSS / JSON), 12 种编辑器主题 (Dracula、Monokai、One Dark、GitHub Dark / Light、Solarized Dark / Light、Nord、Tokyo Night、Night Owl、Cobalt、Aurora Cyan 自家主 题), 12 种渐变背景 (阳光黄/泡泡糖粉/薰衣草紫/海洋蓝/薄荷绿/夕阳橙/极光/ 暮色/午夜/赛博朋克/极简白/极简黑), 三种窗口装饰 (macOS 三圆点/极简/无), 四种等宽字体, 边距和字号可调, 点行号即可高亮该行。一键导出 2 倍 PNG、 SVG, 或直接复制到剪贴板。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 45 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
代码截图生成器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
发推/X 配 bug 修复说明图
刚修了一个内存泄漏的一行 fix, 想发推。把修前/修后的代码粘进来, 切到 TypeScript, 选 Tokyo Night + 极光渐变, 点下载 PNG 拖到推 文里。2x 栅格化保证在 retina 和 Twitter 自带的卡片预览里都清 晰。不用截屏工具、不用手动裁、不会带 Chrome 的窗口装饰进画面。
写技术博客的 hero 图
要在掘金/少数派写一篇讲 React Compiler 的 AST 处理, 需要一张 头图。把核心代码粘进来, 选 One Dark, 边距调到 96, 隐藏 macOS 三圆点更干净, 2x 导出 PNG。这张图在白底/深色博客主题下都好 看, 因为渐变面板本身自带背景, 不依赖博客主题色。
Code Review 时高亮某一行不让对方猜
看 PR 看到一个 off-by-one, 想委婉指出。把相关 8 行粘进来, 点 那一行的行号让它高亮, 复制图片, 粘到 GitHub Review 里。Owner 一眼就看到具体哪一行, 不用 "你看第 47 行附近那个" 这种猜谜, 也不用对方再翻 diff 找你说的位置。
技术分享 PPT 多语言对照页
要做一个 Go vs Rust vs C++ 内存模型的分享。3 段代码各粘一次, 切语言切主题, 各导一张 PNG 贴到 Keynote。听众看到的是真正的 语法高亮, 而不是你 IDE 截图里那些熟悉但分心的工具栏/插件图标。
开源库 README 的封面图
GitHub 的 README 默认渲染很素, 你的 "first example" 代码块和 其他仓库长得一样。给 5 行 hello-world 用法生成一张精致 PNG, commit 进 /docs/cover.png, 贴在 README 顶部。第一印象从 "又一 个 util" 变成 "这个作者有审美", 总成本 30 秒。
文档站不接 highlighter 的代码示例
静态站 (Astro / Hugo / mdBook) 还没接语法高亮, 但只有 3 个 snippet, 上一个 highlighter 不划算。把每段代码导成 SVG, 提交 到 /assets/code/, 用 <img> 嵌入。文档页运行时零开销, 渲染完 美, 也不会出现 "切主题瞬间还没高亮" 那种闪屏问题。
常见踩坑
选了低对比度主题 (比如 Solarized Light 配粉色渐变) 之后抱怨在手机上看不清。如果在 OLED 手机预览里发灰, 直接切到深色主题, 或者背景换成 "午夜"/"极简黑"。
忘了 JSX 要选 JSX/TSX 语言, 选成 "JavaScript" 会把尖括号当比较运算符上色, 而不是标签。.ts 里的泛型同理: 选 TypeScript 不要选 JavaScript。
粘 200 行代码然后嫌图片巨大。图片宽度跟着最长一行走, 高度跟着总行数走。一张图最多放 40 行, 多了拆开, 读者看 20 行就跑了。
在非 HTTPS 页面用 "复制到剪贴板" 静默失败。ClipboardItem 写入要求安全来源 (https 或 localhost)。在 http:// 预览页就用 "下载 PNG" 拖过去。
关掉行号又让 reviewer "看第 7 行"。关行号等于拆掉了寻址系统, 准备让别人按行号定位的时候就打开它。
隐私说明
代码完全留在你这个浏览器标签页里。文本框内容不会写进 URL (分享链接 只带主题、语言、背景、窗口、边距、字号这些设置), 也不会发到任何服 务器。分词、SVG 构建、PNG 栅格化全在你电脑上完成。粘内部 API 名、 客户标识、未发布的源码都安全。页面唯一的外部请求是 Google Fonts 字 体表 (而且只在你选 JetBrains / Fira / Source Code Pro 时才发)。切到 Monaco 就完全离线。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。