本地 canvas 渲染
代码截图美化 —— 把代码渲染成漂亮的分享图（carbon / ray.so 思路）
代码截图美化把你粘进来的代码片段渲染成一张漂亮、带语法高亮的图片：选择 midnight、night 或 day 配色主题和背景，可填写文件名。图片自带 mac 红绿灯窗口框、行号、固定留白、圆角和柔和投影，导出为 2× PNG，适合发推、写博客、放文档。全程浏览器本地渲染，代码不上传（代码里常含密钥、内部实现，绝不该先交出去）。
代码截图美化 会在浏览器里生成一张可交付的样机图：放入文件、调好外框与画布，然后导出 PNG。文件不上传，也不加水印。
输入
截图/设计稿
校样
外框 + 裁切
输出
PNG 导出
场景示意PNG
外框裁切规格
主题
背景
文件名
如何使用 代码截图美化
- 1把代码片段粘进编辑框。
- 2选择配色主题（midnight / night / day）。
- 3挑选背景，可填写文件名标题。
- 4点「下载 2× PNG」；浏览器支持图片剪贴板时，也可点「复制到剪贴板」。
为什么用样机猫 代码截图美化
- 本地渲染：代码不上传——代码片段常含 API key、内部逻辑、未公开实现，隐私安全。
- 统一排版：自动添加行号、窗口框和常见代码标记的高亮。
- PNG 导出：以固定 2× 像素密度生成图片，适合博客和文档中的代码展示。
- 天生适合分享：开发者每天在 X / 博客 / 文档贴代码，好看的代码图更易读易传播。
常见问题
代码会被上传吗？
不会。所有渲染都在你浏览器本地用 canvas 完成，代码不离开你的设备——这对代码尤其重要，代码片段里常含 API key、token、内部实现或未公开逻辑。
支持哪些语言？
可以粘贴任意语言的代码文本。工具用同一个轻量本地分词器高亮常见关键字、字符串、数字、注释和函数名，没有语言选择器，也不执行代码。
和 carbon.now.sh / ray.so 比？
思路一致：把代码渲染成带语法高亮、窗口框、背景的图片。carbon 主题最全，ray.so 交互精致。样机猫更轻、中英双语、纯浏览器本地不上传、背景与截图样机统一，并支持 2× 高清和剪贴板复制。
更新于 · 样机猫团队
来源、复核与限制
最后核验
2026-06-17
作者
MockupCat editorial desk
复核
Visual asset export review
主要来源
- 浏览器 Canvas API
- 站内自绘样机框、灯光和阴影预设
- 常见社媒与应用商店导出尺寸参考
样机图只是展示素材。发布前请再次确认平台上传规则、品牌素材使用权限和最终导出像素尺寸。