代码卡片:把「贴代码」这件事,交给 AI 一次做完

同一段代码，三种主题的代码卡片

你肯定遇到过这个问题。

写一篇技术文章，里面有三五个代码块。直接贴原文，公众号编辑器会把缩进吃掉，语法高亮也没了，读者看到的是一坨灰底黑字。改成截图，缩放之后糊得没法看，两篇文放在一起，字号字体全不一样，像拼凑出来的。

左边是直接贴，右边是今天要说的东西：

钩子：直接贴 vs 代码卡片

我自己的解法分了三代。

1.0：Carbon 网站。打开 carbon.now.sh，把代码贴进去，调好主题，导出 PNG。好看是真好看，窗口圆点加等宽字体，再配上语法高亮，一张图发出去像模像样。问题是慢：一篇文章十几个代码块，就得来回折腾十几轮。写到第三块我就开始烦了。

2.0：自己写脚本。用 Playwright 起一个无头浏览器，自己搭 HTML 模板渲染代码，批量截图。快是快了，坑也全在里面等着。

Chromium 版本一升级，之前下载的浏览器就启动不了；highlight.js 从 CDN 拉，断网就废；文件名带时间戳，重跑一次，图片目录里就堆出一批重复文件。工具能用，但每两周总要修一次。

3.0：把这套东西做成技能。

就是今天要说的代码卡片（code-card）。我现在所有文章的代码块，都是它出的图。它已经在 WorkBuddy 技能市场上架，搜「代码卡片」就能装。

WorkBuddy 技能市场里的「代码卡片」详情页

20 秒演示：搜索技能，打开详情页，一句话出图，6 个主题轮播

装好之后，你在 AI 助手里说一句话就行：

剩下的事 AI 会按顺序做完：

1. 读文章，数出有几个代码块

2. 把 ASCII 框线图挑出来跳过（那些是结构图，转成图片反而错位）

3. 逐块渲染成图片

4. 把文章里的代码块替换成图片引用

你要做的只有一件事：看一眼效果，确认。

它有两种模式：

• 单段模式：随手贴一段代码，出一张图。发群或者贴进 PPT 都够用。

• 文章模式：丢一整篇 Markdown 进去，所有代码块批量转图，原地替换。我拿一篇有 25 个代码块的 Rust 长文实测，从按下回车到全部出图，不到一分钟。

下面这张就是那篇长文里转出来的，24 行 Rust，带中文注释：

真实文章案例：24 行 Rust 代码卡

挑几个实际用得上的说。

主题。内置 6 个，同一段代码换着看：

同一段代码，6 个内置主题

内置的不够用，可以自己写一个 JSON 文件，13 个颜色字段，品牌色想怎么配就怎么配。

清晰度。3 倍 Retina 渲染。上面那张 Rust 卡，放大到公众号正文宽度，笔画边缘依然干净。

中文。不少同类工具在这里翻车，代码里的中文注释渲染成方块，或者糊成一团。这套走系统字体原生渲染，中文注释和中文字符串都清楚。

细节判断。目录树（├── 开头那种）会转图并带行号；ASCII 框线图自动跳过；含箭头的「接口 → 说明」文本自动切双色模式，左彩右白：

目录树

双色模式：接口 → 说明

重跑不炸。文件名按内容哈希生成，同一篇文转两次，图片文件名完全一致，目录里不会堆出 code-1-final-真的最终版-v2.png 这种东西。

安装零门槛。这是我最在意的一点。它会自动找你机器上的浏览器，系统装了 Chrome 就直接用，什么都不用下载。实在没有，才引导你装一个轻量的无头内核。从装好到出图，实测不到一分钟。

• 公众号 / 知乎 / 博客：主场景。代码变成图之后，排版不再受编辑器摆布，手机上读起来舒服得多

• 技术分享 PPT：原来要开 IDE 调窗口再截图，现在是一句话

• 个人笔记：Obsidian 或语雀里贴代码卡，回看比裸代码顺眼

• 代码评审 / 周报：给非技术同事看的关键片段，一张卡片比一段裸码友好

• 教学材料：整套课程统一一个主题，风格一致

能不能生成代码图，Carbon 网站早就证明过了。这个工具解决的是频率：当你几乎每篇文章都要配代码图的时候，手动流程的摩擦会一点点吃掉你写东西的意愿。

工具的意义，是让好习惯的成本低到不需要意志力。

微信扫下面这个码，能直接看到技能详情；也可以在 WorkBuddy 技能市场搜「代码卡片」安装。想看源码或者自己改主题的，我把它开源在了 GitHub（voidlab7/microlab-skills），免费下载。

扫码查看「代码卡片」技能详情

Microlab 的全部工具都在 microlab.top。