代码截图生成器

功能

• 语法着色：JavaScript、TypeScript、Python、Go、Rust、SQL、Bash、JSON 与纯文本
• 着色复用站内高亮器，与「代码高亮」工具规则一致
• 三套主题：深色、浅色、高对比
• 可显示行号，字号、内边距、圆角都可调
• 可加窗口标题栏（带红黄绿圆点与自定义标题）
• 等宽字体按字符逐个量宽，中文注释不会错位
• 输出 PNG，卡片给出尺寸与体积
• 全部在浏览器里渲染，代码不上传

使用方法

1. 把要渲染的代码填进「代码」栏
2. 选语言与主题，调字号、行号、内边距与圆角
3. 需要时打开窗口标题栏并填标题
4. 点下载保存 PNG

常见问题

支持多行代码吗？

渲染器本身支持多行（行号、行高都是按行算的），但代码栏目前是单行输入框 —— 这是本站图像工具外壳的控件形态，标准的单行文本控件会在粘贴时把换行去掉，所以实际一次只能放一行。适合渲染一行代码、一个表达式或一小段压缩后的代码。需要整段多行代码的截图时，可以先用别的工具渲染，或把这一行拆成多次。

着色规则和「代码高亮」工具是一样的吗？

是同一份。着色复用了站内的 `lib/highlight.ts`：语言表、关键词表、每一段该归到哪一类，都只有一份实现。这里额外做的只是把分类结果画到 canvas 上（canvas 没有 innerHTML，不能直接画 HTML），类名到颜色的映射是画图才需要的东西。所以你在这里看到的颜色分布与「代码高亮」工具一致，不会两处各维护一套规则。

为什么宽度要按字符逐个量？

因为等宽字体里汉字占两格。如果整行一次量出来，字体引擎对中英混排的合成宽度在某些字体下会与「西文半宽、汉字全宽」的实际占位差几个像素，行号列与代码就会错位。逐字符量出的宽度是可预期、可断言的，于是中文注释与代码也能对齐。

能做成透明的背景吗？

当前输出的是实底（深色、浅色或高对比主题各自的底色）。圆角之外的四角是透明的，所以贴到深色或浅色背景上时圆角不会露出白边。需要别的背景色时，选一个最接近的主题，或下载后用图像工具替换背景色。