把代码做成漂亮代码截图,语法高亮、窗口框、渐变背景一套搞定

写技术内容的人迟早会遇到一个尴尬:想把一段代码贴到推特、博客头图或者分享 PPT 里,直接截 IDE 的图又丑又乱,工具栏、插件图标、文件树全进了画面。要的其实只是那几行代码本身,加一点体面的语法高亮和背景。这篇讲清楚怎么把一段普通代码做成一张干净的代码图片。

代码截图到底好看在哪三件事

一张能看的代码截图,通常靠三样东西撑起来。

第一是语法高亮。关键字、字符串、注释、函数名分别上不同的颜色,读者的眼睛才有落点。代码截图生成器 内置 12 套主流主题,从 Dracula、Monokai、One Dark 到 Tokyo Night、Nord,挑一套和你内容调性合的就行。

第二是窗口框。给代码块顶部加一排 macOS 三圆点,整张图立刻有了"这是一段代码"的语境,不会被误当成普通文字截图。不喜欢圆点的话也能换成极简边框,或者完全不要。

第三是渐变背景。纯色背景显得单薄,一层渐变把代码面板托起来,在白底和深色博客主题下都立得住。工具里有 12 种渐变可选,从阳光黄、海洋蓝到极光、午夜黑,够覆盖大部分场景。

一个真实的设置:把一行 bug 修复发到推特

上周我修了一个内存泄漏,改动就一行,想发条推说明问题。具体怎么做的:把修前和修后的代码粘进文本框,语言切到 TypeScript,主题选 Tokyo Night 配极光渐变,边距留 64,然后点下载 PNG。导出的图是 2 倍栅格化的,在 retina 屏和推特自带的卡片预览里都清晰不糊。整个过程不到一分钟,没用任何截屏工具,也没手动裁过一次图。

这里有个细节值得记一笔:JSX 要选 JSX 或 TSX 语言,如果选成普通 JavaScript,尖括号会被当成比较运算符上色,而不是当标签。.ts 文件里的泛型同理,选 TypeScript 不要选 JavaScript,不然高亮会错得很明显。

技术博客和分享 PPT 怎么用

写博客头图时,我习惯把 macOS 圆点关掉、边距调到 96,留出更多呼吸感,导出 PNG 当 hero 图。因为渐变面板自带背景,这张图放在白底掘金和深色博客主题下都不会突兀。

做技术分享 PPT 的多语言对照页也好用。比如讲 Go、Rust、C++ 三种语言的内存模型,三段代码各粘一次,切语言切主题,各导一张 PNG 贴进 Keynote。听众看到的是真正的语法高亮,而不是某个人 IDE 截图里那些熟悉但分心的工具栏。

Code Review 场景也能救急。看 PR 看到一个 off-by-one,把相关几行粘进来,点那一行的行号让它高亮,复制图片贴进 GitHub 评论。对方一眼看到具体哪一行,省掉"你看第 47 行附近那个"的猜谜。提醒一句:准备让别人按行号定位时,记得别关行号,关了等于把寻址系统拆了。

PNG 还是 SVG,以及主题怎么选

导出格式按用途分。发社交媒体、贴聊天软件,选 PNG 最省事,2 倍像素够清晰。要塞进很窄的博客正文,或者想无损缩放到任意尺寸,选 SVG,矢量在任何 DPI 下都锐利,文档站用 <img> 嵌入还能做到运行时零开销。

主题别只看好不好看,要看对比度。Solarized Light 配粉色渐变在电脑上挺雅致,到了 OLED 手机上可能整个发灰看不清。如果预览发灰,直接切深色主题,或者背景换成午夜、极简黑这种深色底。代码截图的第一受众往往在手机上刷,对比度比配色品味更重要。

顺手提一句隐私

粘进去的代码完全留在你这个浏览器标签页里,不写进 URL,也不发服务器。分词、SVG 构建、PNG 栅格化全在本地完成,粘内部 API 名、客户标识、未发布的源码都安全。整页唯一的对外请求是 Google Fonts 字体表,而且只在你选 JetBrains、Fira 这几个字体时才发,切到 Monaco 就完全离线。

如果你处理的代码本身是 JSON 配置,想先格式化再截图,可以先用 JSON 格式化工具 排好缩进,再粘进来导图,出来的层级会清楚很多。把这两步连起来,从一段乱糟糟的原始代码到一张能直接发出去的图片,基本就是复制、粘贴、点导出三下的事。

---

Made by Toolora · Updated 2026-06-13