Codia 代码图片：让公众号里的代码、引用与表格适合手机阅读

为什么公众号里的代码总是不好读

公众号编辑器本质上是为图文消息设计的，它对程序内容几乎不做任何照顾：

这些不是微稿能「修好」的问题——编辑器的行为改不了，能改的是内容进编辑器之前的形态。与其把代码交给一个不擅长排版代码的编辑器，不如先把代码排版好，再以图片的形式交出去。

Codia 是什么

Codia 是我们开发的代码截图服务：让人轻松创作，让 AI 快速调用，为人类、LLM 和 CI pipeline 提供精美的代码图片。它基于 Shiki 的语法高亮引擎，内置几十款主题（andromeeda、aurora-x、ayu 系列、catppuccin 系列等等），支持 webp、png、jpg 输出与自定义背景、窗口宽度、行号、头像等参数。

它的使用门槛很低：网页版 Playground 免费且不限量，调 API 也只需一个 Bearer 凭证、一次 POST 请求。对微稿用户来说门槛更低——凭证由官网后台统一配置，你在 App 里看不到、也不需要管理任何密钥。

在微稿里，Codia 承担的角色是「视觉渲染引擎」：把 Markdown 里那些公众号编辑器不擅长的内容——代码围栏、引用块、时间线、表格——渲染成一张张风格统一的图片，再随正文一起进入复制和草稿流程。

代码块：从文本到图片

这是最核心的场景。在主题里选择「Codia 图片」模式后，带语言标记的代码围栏会在预览、复制和创建草稿时统一渲染为代码图片：

```ts
const draft = await createDraft({
  title: '从念头到初稿',
  content: render(markdown)
})
```

图片化之后，语法高亮、行号、文件名、圆角窗口和背景色全部固定在图片里，公众号编辑器无从破坏。读者在手机上看到的是一张清晰的、自带排版的代码卡片，不用横向滚动，也不会被字体替换毁掉结构。

两张图对比一下就很直观：原生代码在窄屏上是「折行折到妈都不认识」，代码图片则是完整的一块视觉内容——这也是为什么越来越多的技术号选择代码截图的形式发推、发朋友圈、发公众号。代码图片天然具有社交媒体分享属性：它是一张图，就能被转发、被收藏、被当作封面；某种意义上，阅读体验反而比原生代码更好。

引用块：金句也值得一张图

引用块是标准 Markdown 的 > 写法。选择图片风格后，微稿会按当前主题的引用样式、字体与字号把它渲染为一张带署名的图片。

它适合的位置是金句、摘录，以及长文里需要「停顿」的段落。原生引用块在一排排文字中间只是一个缩进，图片化的引用则是一块明显的视觉留白——读者滑到这里会自然放慢速度。署名（— 作者）也一并固定在图里，转发时不会丢。

表格：移动端的老大难

表格大概是公众号里最委屈的内容形态。桌面浏览器里好好的三列数据，到了手机上：屏幕宽度不足，列被挤压换行，或整体横向溢出，读者要么眯眼看密密麻麻的小字，要么来回拖动屏幕，体验很难有好。

微稿支持把表格渲染为图片。表格一旦成为图片，宽度就固定了：你可以控制它的列宽与字号，保证在手机上完整呈现；也可以让表格按内容自适应，生成一张紧凑的卡片。对比表、参数表、配置清单这类「看结构」的内容，图片形式几乎总是优于原生表格。

在微稿里怎么开启

整个过程在 App 内完成，不需要自己去 Codia 注册：

1. 01
   确认视觉渲染凭证可用

   微稿会为用户下发专用的 Codia 渲染凭证（也可由管理员在后台统一配置默认凭证）。凭证有效后，代码、引用、时间线相关的视觉能力才会启用。

2. 02
   先点「测试代码图片」

   在「设置 → 凭证」里点击「测试代码图片」确认服务可用。测试通过后，再把代码渲染模式切换为「Codia 图片」。

3. 03
   发布前检查手机预览

   生成后的图片会进入公众号兼容流程。在最终复制或创建草稿前，用手机预览一次宽度和字号，确认无误再发布。

想在微稿之外单独用 Codia（比如给 README、博客或 PPT 生成代码图），直接打开 Playground 调参数即可，免费不限量；调好的参数可以一键复制成 JSON，交给 AI 或脚本批量复用。