1. 写技术博客配图为什么代码截图总是不顺手写技术博客的人大概都遇到过这个场景文章写完了代码块在 Markdown 里渲染得挺好看可一旦同步到某些平台代码高亮全丢缩进乱成一团读者根本没法看。这时候最省事的办法就是把代码截成图片贴进去既保住了配色又不怕平台折腾格式。问题在于截图这件事本身也有讲究。直接拿系统截图工具框一块区域出来的图要么背景是刺眼的白色要么字体发虚要么代码太长被截断。我试过用手机拍屏幕结果被同事笑了半天。后来才认真去找专门做代码截图的工具发现 Polacode 和 Carbon 这两款基本能覆盖大部分需求。Polacode 是 VS Code 里的插件选中代码就能生成图片保留你当前编辑器主题的配色适合快速出图。Carbon 则是一个网页工具自定义程度更高能调背景、窗口样式、字体、行号适合做封面图或者需要精细排版的场景。两者定位不同但配合起来用基本能解决技术博客里所有代码配图的需求。这篇文章会从实际工作流出发先讲清楚两款工具各自的安装、配置和出图步骤再演示怎么用 TaoToken 统一 Key 通道为截图里的示例代码生成可运行片段最后用对比截图验证排版和配色效果。如果你也在为技术文章的代码配图发愁可以跟着一步步操作。2. Polacode 与 Carbon 的选型对比与安装配置2.1 Polacode 的安装与基础配置Polacode 的安装路径很直接。打开 VS Code按CtrlShiftX进入扩展面板搜索Polacode认准作者是octref的那个点击安装。安装完成后不需要重启直接在命令面板里就能调用。调用方式是按CtrlShiftP打开命令面板输入Polacode选择Polacode: Capture。这时候编辑器右侧会弹出一个预览面板你在编辑区选中的代码会实时生成预览图。点击面板里那个相机图标就能把图片保存到本地。Polacode 的配置项不多但有几个值得调整。在 VS Code 的settings.json里可以加这几行{ polacode.backgroundColor: #1e1e1e, polacode.shadow: true, polacode.transparentBackground: false, polacode.target: clipboard }backgroundColor控制图片背景色默认会跟随你的编辑器主题。如果你希望截图背景统一可以手动指定一个十六进制色值。shadow决定是否给代码块加投影加了之后图片更有层次感。transparentBackground设为true时背景透明适合贴到深色背景的文档里。target设为clipboard后点击相机按钮会直接把图片复制到剪贴板省去保存文件的步骤。这里有个细节Polacode 生成图片时代码的字体和字号完全跟随你当前编辑器的设置。如果你平时用的字体是Fira Code或者JetBrains Mono截图里也会是同样的字体。所以建议先把编辑器字体调到一个适合阅读的大小比如editor.fontSize: 14再去做截图。2.2 Carbon 的网页端参数与导出设置Carbon 不需要安装任何东西直接访问carbon.now.sh就能用。它的界面分三块左边是代码编辑区右边是实时预览顶部是工具栏。你把代码粘贴进编辑区预览区立刻就会渲染出带语法高亮的图片。Carbon 的自定义选项比 Polacode 丰富得多。在工具栏里可以调整这些参数参数作用推荐值Theme语法高亮主题One Dark或DraculaWindow Style窗口样式macOS带红黄绿圆点Background背景颜色或渐变根据文章风格选Padding代码四周留白48px到64pxFont Size字号14px到16pxLine Numbers是否显示行号长代码建议开启Drop Shadow投影效果开启后更有立体感导出时点击右上角的Export按钮可以选择导出为 PNG 或 SVG。PNG 适合直接贴到文章里SVG 适合需要无损缩放的场景。导出前建议把Padding调大一点这样图片边缘不会太挤贴到文章里视觉上更舒服。Carbon 还有一个很实用的功能自动识别语言。你粘贴代码后它会根据代码内容猜测语言并应用对应的语法高亮。如果猜错了可以在工具栏里手动切换。另外Carbon 支持通过 URL 参数预设配置比如https://carbon.now.sh/?bgrgba(171,184,195,1)tone-darklautodstruewctruewatruepv48pxph64px这样每次打开都是同样的样式适合团队统一出图风格。2.3 两款工具的适用场景与选择建议Polacode 的优势在于快。你正在 VS Code 里写代码选中一段按个快捷键图片就出来了不用切换窗口不用复制粘贴。适合写文章时随手截取代码片段尤其是需要保留当前编辑器主题配色的场景。Carbon 的优势在于可控。你可以精确调整每一个视觉参数做出适合当封面的宽幅图片或者适合嵌入段落的紧凑图片。适合需要精细排版、或者代码不在本地编辑器里的场景。我的习惯是短代码片段用 Polacode 快速出图长代码或者需要特殊排版的用 Carbon 慢慢调。两者不冲突装一个插件加一个网页书签基本覆盖所有需求。3. 用 TaoToken 统一 Key 通道生成可运行示例代码3.1 为什么截图里的代码需要可运行截图里的代码有个尴尬的地方读者只能看不能跑。如果代码里有 API 调用、有模型参数、有认证逻辑读者想复现就得自己去找 Key、配环境、调参数。很多时候文章写得挺好但读者卡在“怎么拿到可用的 Key”这一步就放弃了。我的做法是截图里的示例代码尽量用统一的 Key 通道来写。这样读者看到截图后照着敲一遍就能跑通不需要额外折腾认证。TaoToken 提供的就是这样一个统一通道一个 Key 可以调用多种模型Base URL 和 API 格式保持兼容适合在文章里做示例。3.2 TaoToken 的 Base URL 与 Key 配置TaoToken 的 API 地址是https://taotoken.net/api这个地址不加任何查询参数直接作为 Base URL 使用。Key 需要在控制台创建创建后复制出来放在环境变量里不要硬编码在代码中。在 VS Code 里我通常会在项目根目录建一个.env文件内容如下TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api然后在代码里通过os.getenv读取。这样截图里的代码既展示了调用逻辑又不会泄露真实 Key。读者拿到代码后只需要替换.env里的 Key 就能跑。如果你用的是 Node.js 项目可以在settings.json或者.env里配置{ taotoken.baseUrl: https://taotoken.net/api, taotoken.apiKey: sk-你的实际Key, taotoken.model: gpt-4o-mini }这里model字段指定默认调用的模型 ID。TaoToken 支持多种模型具体可用的 Model ID 可以在控制台的模型列表里查看。配置好后代码里直接引用这些配置项即可。3.3 生成一段可运行的 Python 示例下面这段代码是我在文章里常用的示例功能是调用模型生成一段文本然后打印结果。代码本身不长适合截图同时又是完整可运行的import os from openai import OpenAI client OpenAI( api_keyos.getenv(TAOTOKEN_API_KEY), base_urlos.getenv(TAOTOKEN_BASE_URL) ) response client.chat.completions.create( modelgpt-4o-mini, messages[ {role: user, content: 用一句话解释什么是代码截图工具} ] ) print(response.choices[0].message.content)这段代码的关键点在于base_url指向 TaoToken 的 API 地址api_key从环境变量读取。读者把.env配好后直接python demo.py就能看到输出。截图里展示这段代码既清晰又实用。如果你用的是 Claude Code 或者类似的编码助手可以在项目里建一个auth.json来统一管理认证信息{ baseUrl: https://taotoken.net/api, apiKey: sk-你的实际Key, model: claude-3-5-sonnet }这样无论是 VS Code 插件还是命令行工具都从同一个文件读取配置避免多处维护 Key 的麻烦。4. 验证请求与截图效果对比4.1 运行示例代码并检查输出配置好.env后在终端里运行python demo.py如果一切正常你会看到模型返回的一句话类似“代码截图工具是用于将代码片段转换为可分享图片的软件”。这说明 Key 通道是通的Base URL 和模型 ID 都正确。如果输出为空或者报错先检查.env文件是否在项目根目录再确认TAOTOKEN_API_KEY的值有没有多余空格。有时候从控制台复制 Key 时会带上换行符导致认证失败。4.2 用 Polacode 截取示例代码回到 VS Code选中demo.py里的代码块按CtrlShiftP输入Polacode在预览面板里调整一下背景色和投影然后点击相机按钮。生成的图片会保留你当前的编辑器主题代码高亮和缩进都原样呈现。如果你在settings.json里把polacode.target设成了clipboard图片会直接进剪贴板粘贴到文章编辑器里就行。我一般会保存成 PNG 文件方便后续统一压缩。4.3 用 Carbon 生成同款代码的对比图打开carbon.now.sh把同一段代码粘贴进去。选择One Dark主题窗口样式选macOS背景设一个深色渐变Padding 调到64px开启行号和投影。点击Export导出 PNG。把 Polacode 和 Carbon 生成的图片放在一起对比你会发现Polacode 的图片更贴近编辑器原生效果字体和配色完全一致适合展示“我正在编辑器里写代码”的感觉。Carbon 的图片更像一张精心设计的卡片背景和窗口样式可以独立于编辑器适合做文章封面或者插入到设计感更强的段落里。4.4 排版与配色效果的最终确认在文章里插入图片前建议把两张图都放到实际排版环境里看一眼。有些主题在 Carbon 里好看但贴到白色背景的文章里会显得太暗有些 Polacode 截图在深色模式下很清晰但文章是浅色主题对比度就不够。我的做法是文章正文用浅色背景时代码截图选浅色主题或者带浅色背景的 Carbon 配置文章用深色背景时选深色主题。如果文章同时发布到多个平台优先保证在主要平台的阅读体验。5. 常见报错与排查401、local proxy failed、reading choices5.1 401 认证失败报错信息通常是Error code: 401 - {error: {message: Invalid API key}}。原因一般是 Key 不对或者没有正确读取。排查步骤先在终端里执行echo $TAOTOKEN_API_KEY确认环境变量有值。如果没有输出说明.env文件没被加载检查是否安装了python-dotenv并在代码开头调用了load_dotenv()。如果环境变量有值但仍然是 401去 TaoToken 控制台重新生成一个 Key替换后重试。5.2 local proxy failed 连接失败报错信息类似APIConnectionError: Connection error或者local proxy failed。这通常是因为 Base URL 写错了或者网络环境有问题。先确认base_url的值是https://taotoken.net/api注意结尾没有多余的斜杠。然后检查代码里是否误用了其他地址。如果地址正确但仍然连接失败可以尝试在终端里用curl测试curl -X POST https://taotoken.net/api/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d {model:gpt-4o-mini,messages:[{role:user,content:test}]}如果curl能通但 Python 代码不通检查 Python 环境里是否装了代理相关的库或者系统代理设置是否影响了请求。5.3 reading choices 返回结构异常报错信息是KeyError: choices或者TypeError: NoneType object is not subscriptable。这说明 API 返回的结构和预期不一致。最常见的原因是模型 ID 写错了。比如你填了gpt-4但实际可用的模型是gpt-4o-miniAPI 会返回错误信息而不是正常的choices数组。去 TaoToken 控制台确认一下当前可用的 Model ID然后更新代码里的model参数。另一个可能的原因是请求被截断比如messages格式不对。确保messages是一个列表每个元素包含role和content两个字段。5.4 OAuth 相关报错如果你用的是 Claude Code 或者类似的工具可能会遇到OAuth token expired或者authentication failed。这类工具通常有自己的认证流程需要在配置文件里指定baseUrl和apiKey。以auth.json为例确保文件内容如下{ baseUrl: https://taotoken.net/api, apiKey: sk-你的实际Key, model: claude-3-5-sonnet }三个字段缺一不可。baseUrl指向 TaoToken 的 API 地址apiKey是控制台生成的 Keymodel是你要调用的模型 ID。配置好后重启工具让配置生效。6. 把截图工作流固定下来写技术文章久了配图这件事最好形成固定流程。我的习惯是代码先在 VS Code 里写好并跑通确认输出正确后再截图。截图时优先用 Polacode 快速出图如果对排版有更高要求再切到 Carbon 精细调整。示例代码里的 Key 统一走 TaoToken 通道Base URL 固定为https://taotoken.net/apiModel ID 根据实际需要选择。这样读者看到截图后照着配置就能跑通不需要额外问“这个 Key 哪里来的”。如果你还没有创建 Key可以去控制台生成一个然后把它放进.env文件里。接入文档里有更详细的参数说明和示例代码遇到问题可以先翻一遍。需要验证模型输出效果的话模型对话页面可以直接测试。长期做编码或者 Agent 开发的话Coding Plan 会更划算一些。最后一个小技巧Carbon 的配置可以通过 URL 参数保存把调好的样式存成书签下次打开直接就是同样的配置不用重新调一遍。Polacode 的配置写在settings.json里换电脑时同步一下 VS Code 设置就行。