代码截图美化器

工具说明

写技术文章或发群消息时，一张配色干净的代码图比贴一段纯文本更容易读。本工具在浏览器里用 Canvas 逐行绘制代码，按等宽字体的固定字符宽度排版，再套上窗口边框与留白，最后导出成 PNG。

排版是怎么处理的

• 制表符：统一展开为 4 个空格，避免不同编辑器下缩进宽度不一致。
• 中文与全角符号：按 2 个半角宽度占位，所以中英混排的注释不会左右错位。
• 行号：可选，开启后在左侧留出独立栏位，复制粘贴代码时记得别把行号一起截进去（因为这是图片，不受影响）。
• 画布宽度：按最长的一行自动计算，不会截断代码。

几个实用建议

• 分享到浅色背景的文档里，用深色主题对比更清晰；发到聊天软件里，浅色主题更容易融入。
• 代码超过 40 行时建议拆成两张图，单张图太高会看不清字。
• 导出分辨率默认按 2 倍像素密度绘制，在高分屏与打印场景下都不会发虚。

你可能还想问

为什么我的中文注释看起来没对齐？

因为等宽字体只对西文等宽，中文字符宽度相当于两个西文字符。本工具已经按这个规则在中文字符处补足宽度，但如果你的代码里混用了不同语言的标点（比如中文逗号与英文逗号），视觉上仍会有细微差别。统一使用英文标点写注释是最稳的做法。

能生成透明背景的图片吗？

可以，选「无窗口框」样式时背景会按主题色填充；如果确实需要透明背景，建议生成后用图片编辑工具去底。这里默认填充背景是为了在深浅两种主题的文章里都能看清代码，透明背景在深色文章里会出现深色字压在深色底上的问题。

代码行数太多怎么办？

超过大概 40 行时，图会变得又高又窄。建议按函数或逻辑块拆成多张图，每张控制在 20 行左右；如果必须一张图放下，可以适当调小字号，但不要低于 12 像素，再小在手机上就看不清了。

支持语法高亮吗？

当前版本按单色渲染代码，不做语法着色。原因是自动着色需要引入完整的词法分析器，体积与出错概率都会明显上升，而单色等宽排版在可读性上已经足够。如果确实需要彩色高亮，可以用带导出功能的代码编辑器生成后再裁剪。

相关工具

相关内容