Carbon 教程：把代码变成精美分享图片
写技术博客、发技术推特、做内部分享 PPT 时，很多人都会遇到一个问题：把一段代码贴到文章或幻灯片里，要么是纯文本干巴巴的，要么是 IDE 主题的颜色在白底文档里看不清。Carbon 就是为了解决这个尴尬场景而生的——它把一段代码渲染成带有渐变背景、语法高亮、可自定义字体的”代码图片”，视觉效果远超普通截图。
Carbon 是一个开源项目（carbon-app/carbon，MIT 协议），由 Mike Fix、Brian Dennis、Jake Dexheimer 等人发起，在 GitHub 上有上百位贡献者参与维护。最关键的特性是：完全免费、无需注册、打开网页就能用。
为什么需要 Carbon
在 Twitter、博客、Slack 这类场景里，代码截图的”颜值”往往决定了它会不会被点开。Carbon 自带多种语法主题（暗色系、亮色系都有）、可换字体（Hack、Fira Code、JetBrains Mono 等常见代码字体都支持）、可调整内边距和窗口阴影，还能加自定义渐变背景色。生成出来的图片在视觉上比单纯截图精致不少，特别适合做”一行代码看懂 XX”系列的内容封面。
三种导入方式
打开 carbon.now.sh 后，你可以用任意一种方式把代码塞进去：
- 直接粘贴或手敲——和普通编辑器一样，左侧输入区会实时渲染。
- 拖拽文件——把本地源码文件拖到编辑区，自动识别内容。
- 通过 GitHub Gist ID——把 Gist ID 追加到 URL 后面，例如
carbon.now.sh/，会自动加载远程代码。这一招对想长期维护同一份”高亮配图”特别方便：Gist 内容更新，链接里的图也会同步。
定制你的图片
右侧控制面板是 Carbon 的核心玩法，主要分这几组：
- 语法主题：从暗色到亮色覆盖主流配色，通常选暗色主题搭配渐变背景效果最好。
- 背景颜色：支持纯色和渐变，可手动选色或填入十六进制值。
- 窗口样式：模拟 macOS 终端风格的圆角窗口、阴影、配色等。
- 字体：常见等宽字体基本都内置了，可以逐个试，看哪款和你想突出的语言最搭。
- 内边距、对齐、行号、隐藏栏等细节选项也都有。
调完之后，导出方式有四种：
- 下载 PNG/SVG：PNG 适合贴图，SVG 适合矢量缩放。
- Export → Open：直接在浏览器标签页打开成品图，方便二次编辑。
- Copy → Image：直接复制到剪贴板，粘贴到 Slack、Notion、微信编辑器都能用。
- Tweet 按钮：分享到 Twitter 时会自动带上
alt文本，对屏幕阅读器友好。
进阶用法：保存片段与嵌入
如果不希望每次重新贴代码，可以注册一个账号（README 里的入口是页面右上角的 “Sign in/Sign up”），登录后编辑会自动保存为 snippet。分享这个 snippet 链接到 Twitter 或 Slack 时，对方不用点开链接也能直接看到预览图，这种叫 “unfurl”——Carbon 自动做了处理，后面想修改代码，重新点开链接就能继续编辑，特别适合做可长期更新的图解。
对于放在自己博客上的情况，README 推荐用嵌入方式：
https://carbon.now.sh/embed/嵌入后读者可以一键复制代码，比纯静态图片实用得多。Medium 这种不允许 iframe 的平台，可以从 “Copy Menu” 里拿到编码后的 URL。
编辑器和 CLI 集成
如果你的日常工作流是从 IDE 直接生成，而不是每次都手动打开网页，Carbon 社区已经做了覆盖主流编辑器的插件：
| 编辑器 | 插件名 | 触发方式 |
|---|---|---|
| VS Code | carbon-now-sh |
命令面板执行 carbon |
| IntelliJ IDEA | carbon-now-sh |
右键菜单 |
| Atom | carbon-now-sh |
shift-cmd-A |
| Sublime Text 3 | carbonSublime |
自定义快捷键 |
| Vim/Neovim | vim-carbon-now-sh |
函数 CarbonNowSh() |
| Emacs | carbon-now-sh.el |
交互函数 carbon-now-sh |
| Xcode | CarboNow4Xcode / nef |
选中代码触发 |
命令行用户可以用 carbon-now-cli，支持交互式选择高亮行、直接保存为图片。Slack 用户也可以直接装 carbon-slack，输入 /carbon 就能在频道里生成。
离线使用和安装
Carbon 是一个 PWA（渐进式 Web 应用），Chrome 和其他支持 PWA 的浏览器可以把它”装”成本地应用：访问官网 → 浏览器设置菜单 → 点击 “Install Carbon…”。装完之后没有网也能用，对常出差或网络不稳定的人比较友好。
和类似工具的对比
Carbon 不是唯一的选择，近几年冒出几款替代品，定位略有差异：
- Ray.so：由 Raycast 团队出品，界面极简，默认风格更”设计感”，导出 PNG/SVG 一样利落。缺点是定制项比 Carbon 少，比如渐变背景和窗口阴影没有 Carbon 灵活。
- Silk / Snowshot：主打”几秒钟搞定”，预设样式多，但深入定制能力不及 Carbon。
- Chalk.ist：风格上和 Carbon 比较接近，也开源，社区维护。
如果你的需求是高度自定义 + 开源 + 生态丰富（编辑器插件、CLI、Telegram bot 等都有），Carbon 仍然是最稳妥的选择；如果你只想发一张图不想动脑，Ray.so 这类极简工具可能更顺手。
使用建议
实际用下来，有几条经验值得参考：
- 选暗色主题时，背景渐变尽量用相近色（比如深紫到深蓝），对比度不会刺眼。
- 一行字数控制在 60~80 字符内最舒服，图片在 Twitter、博客正文里都不会被压扁变形。
- 导 SVG 留一份原始矢量，后续如果改字号或主题可以快速重新渲染。
- 长期维护的图（教程封面、文档示例）尽量走 Gist 方式，源码和图保持单一来源。
Carbon 的官网是 carbon.now.sh，源代码仓库在 GitHub 搜 carbon-app/carbon，最新的插件、主题、问题反馈建议以官方仓库和官网为准。
评论(0)