代码美图生成

如何使用代码美图生成

关于代码美图生成的常见问题

代码美图会上传代码吗？在线代码截图安全吗？

不上传，也不执行。代码从粘贴到出图都在你的浏览器里完成：先做字符串分词拿到语法类别，再算出每个片段的坐标，最后用 canvas 逐段画出来，全程没有一次外发请求，也不会把代码拼成网页内容插进页面，所以粘一段带脚本标签的前端代码进来也只是当文本画出来。字体用的是你机器上已经装好的等宽字体，不下载任何外部字体文件。关掉页面内容就没了，本机只留主题、字号这类展示偏好，代码、标题栏文件名与水印署名一律不记。

代码转图片支持哪些语言的语法高亮？

目前支持 15 种：JavaScript、TypeScript、JSON、HTML / XML、CSS、Python、Java、Go、C / C++、C#、PHP、Rust、SQL、Shell / Bash、YAML，另外还有一档纯文本（不着色）。语言默认自动识别，识别不出就按纯文本处理、不瞎猜，你随时能在下拉里手动改。着色依据的是 Prism 的语法定义，对 Vue 单文件、复杂泛型、SCSS 与各家 SQL 方言可能着色不准；但着色只决定颜色，版式与行位置不受它影响，图照样出得来。

代码截图能带行号和文件名吗？

能。行号可以开关，起始行号也能改成任意正整数——从源文件第 200 行截一段出来时，把起始行号填成 200，图上的行号就和源文件对得上。行号列的宽度按最大行号的位数自动算，不写死，所以三位数和四位数行号都不会把代码挤歪。窗口外观选「圆点 + 标题栏文件名」时，标题栏会显示你填的文件名；直接把源码文件拖进输入框的话，文件名会自动填好，语言也按扩展名先选上。

代码美图能自定义背景和主题吗？

可以。内置 8 套主题配色（深色 5 套、浅色 3 套），背景可以选渐变预设、纯色、透明或者干脆不要背景，四周留白、卡片圆角与投影也都能调。透明背景导出的 PNG 带 alpha 通道，贴到深浅色底上都不会多出一圈白边。想自己从头调一套渐变，用站内的 CSS 渐变生成器调好再回来选颜色更顺手。

代码转图片导出 PNG 还是 SVG 更好？

贴聊天窗、发朋友圈用 PNG：到处都能直接显示，字形绝对不变，代价是体积随像素涨。进设计稿、要无限缩放用 SVG：体积只跟字符数走，放多大都不糊，代价是字形取决于打开者机器上装了什么等宽字体，微信和飞书的聊天窗多数也不直接渲染 SVG。要说明的是我们在 SVG 里逐个片段写死了 x 坐标，不靠文本流排版，所以就算对方的等宽字体宽度略有出入，漂移也被限制在单个片段内，不会整行错位。

代码截图里中文和 emoji 会错位吗？

不会重叠，但要知道口径。中文与全角标点在等宽字体里占两列，我们按真实字体度量排版，不是按字符个数硬算，所以中文注释和代码混排也能对齐。emoji 与合成字素（比如带肤色或 ZWJ 组合的表情）当作一个整体绘制，开启折行时也不会被从中间切开。真正的差异在 SVG：机器上没有等宽中文字体时，中文会用别的字体顶上，宽度和出图时可能不同，PNG 则不受影响。

手机上能做代码美图吗？代码图片生成器要装软件吗？

可以，不用装任何软件或插件，手机、平板、电脑浏览器打开就能用。窄屏下代码框在上、预览在下，出图参数收进一个可折叠的面板里，宽图可以横向滑动查看，导出与复制照常。要提醒的是手机浏览器能画的画布面积比电脑小得多，行数多又选 3x 的时候会自动降到画得出来的最大倍率，并在图片下方写清楚降到了几倍，不会静默给你一张空白图。

代码美图的 8 套主题配色与适用场景

代码美图内置 8 套主题配色，深色 5 套、浅色 3 套：深色适合发聊天窗、技术社群与投影演示，浅色适合放进 Word、PPT 与教程文档。作为代码图片生成器，配色决定第一眼，下表里的对比度是注释色对卡片底色的 WCAG 数值，由站内配色函数实算（数据表复核于 2026-08-30），页面不手写第二份。

为什么专门标注释色：很多流行主题的注释是一层很淡的灰，屏幕上勉强能看，压成图片再被平台压缩一次就基本消失了。 本站每套主题的每种语法颜色对底色都调到了 4.5:1 以上，注释也不例外，这条由单元测试逐色钉死，改配色改到不达标会直接测不过。

代码转图片时行宽和字号怎么选不糊

在线代码截图怎么做才清楚，先定行宽、再定字号。行宽决定图有多宽，字号决定字有多大，两件事各管各的。 下表是这个代码转图片工具的实测值：每行多少个半角字符，在各档字号下卡片有多宽（斜杠后是按 2x 导出的像素宽）。

一个好记的锚点：80 列配 14px，卡片宽 714 像素，按 2x 导出正好 1428 像素，落在多数社交平台不再二次压缩的范围里。 这里最容易搞混的是导出倍率解决清晰度、字号解决可读性，两者不能互相替代： 字号调小再用 3x 导出，图是清楚了，但手机上还是要放大才看得清；字号调大而倍率留在 1x， 则是字够大但边缘发虚。行太长时别一味缩字号，开折行更划算——折行按显示列数切，续行不占行号， 并跟随首行缩进对齐（最多跟 8 列），代码结构不会散掉。

代码截图带行号时，行号列宽随最大行号位数自动变，不写死；起始行号可以改，从源文件中间截一段出来也能对上真实行号。 性能上有四道护栏：超过 2 万字符直接拦下；超过 500 行只画前 500 行；单行超过 2,000 字符在行尾收口；画布像素超上限时自动降导出倍率。 前三道只影响图片，输入框里的原文一个字都不动。

公众号代码图片和 PPT 代码截图怎么做

源码转图片之前先想清楚这张图最后贴在哪，再回头定每行列数、字号与主题深浅——落点决定参数，不是越大越清楚。 公众号正文的显示宽度是固定的，代码高亮截图一旦比它宽就会被整体缩小，字号等于白调；PPT 是投影，看的是最后一排，行数比字号更要命；聊天窗则要考虑对方点开之前先看到的是一张缩略图。 下表按落点给参数，其中的卡片宽度仍由本页版式函数实算。

从 Markdown 里挑一个代码块生成图片时，只截要讲的那几行，别把整份文件贴进来：行数一多，图在手机上会被缩成窄窄一条，读者只会划过去。 行太长也别一味缩字号，开折行更划算。真要从一份长文件里截中间一段，把起始行号填成源文件里的真实行号，读者才对得上位置。

代码截图导出 PNG 还是 SVG 怎么选

代码截图要发聊天窗就导出 PNG，要进设计稿、以后还想继续改就导出 SVG。同一份代码高亮图片的这两种格式， 差别不在画质好坏，而在用途；两条通道共用同一份版式几何，所以卡片尺寸、行位置与渐变方向完全一致， 你不必担心「预览一个样、导出另一个样」。

SVG 里我们逐个片段写死 x 坐标而不是靠文本流排版，所以即便对方的等宽字体宽度和你的略有出入， 漂移也被限制在单个片段内，不会整行错位。要发聊天窗就选 PNG，导出后就是一张能直接发的代码分享图； 要进设计稿或者以后还想改，选 SVG。

代码截图透明背景怎么导出不露白边

背景选「透明」再导出 PNG，图就带 alpha 通道，贴到深色底或浅色底上都不会多出一圈白边；SVG 本来就不画背景矩形，等效透明。 真正容易踩的是「透明」和「不要背景」这两档的区别——它们导出的都是带 alpha 的 PNG，差别只在四周留白。

由此带来两个可预期的结果，知道了就不会白试：一是把留白调到 0 时，程序会直接按「不要背景」处理，而柔和投影是画在卡片外面的，画布贴着卡片边就会把它切掉——想要透明底加投影，留白至少留一档；二是定比例（1:1 方图、4:3、16:9）靠的是在卡片外补一圈背景，选「不要背景」时没有可补的地方，自然不生效。 内容本身就超出所选比例时也不硬补，按实际高度导出并在图下方写明，不会为了凑比例把代码裁掉。

代码截图里这些字符最容易出问题

代码截图里最容易出问题的是五类字符：制表符、中文与全角标点、emoji、零宽字符与 BOM、合成字素。 根子在于出图和在编辑器里看代码不是一回事——编辑器有自己的一套排版规则，而图片一旦生成就定死了。

代码美图生成看不了的几件事

代码美图生成不做四件事：图片转代码的 OCR、代码运行结果截图、终端操作动图、把 Markdown 渲染成排版好的图。 这个代码截图生成器只做一件事——把你贴进来的源码排版成一张图，说清楚比含糊过去有用。

代码转图片这类工具英文里叫什么

英文语境下这类代码截图工具通常叫 code to image 或 code screenshot，也有人写成 code snippet image、code image generator。其中最广为人知的是一个叫 Carbon 的站点，中文技术圈说的 carbon 代码截图、carbon 风格代码图，指的都是同一件事：把一段源码排版成一张带语法高亮的卡片图。所以搜 code to image、搜 code screenshot、搜代码美图，落到的都是同一类页面，只是叫法不同。本页和它们的差别只有一条——绘制全在你自己的浏览器里完成，代码不上传。

三套等宽字体栈可选：系统等宽（默认）、中文友好等宽、通用等宽（跨机器最一致）。都用系统已装的字体， 不下载任何字体文件——这既是为了不发外部请求，也是为了不踩字体授权。