代码截图美化器

写技术博客、发朋友圈、提 PR 描述时，一张排版精美的代码分享图远比干巴巴的文本更受欢迎。本工具把代码渲染成 macOS 风格的窗口截图，支持 8 种语言的高亮、深色/浅色与 6 款渐变背景、窗口控件开关与边距调节，一键导出高清 PNG。整个过程基于 Canvas 在你的浏览器本地完成——代码不上传服务器、不依赖任何在线 API，离线也能用。

为什么中文注释不再变成豆腐块

carbon 等主流代码截图工具使用 Web 字体（如 JetBrains Mono、Fira Code），这些字体不含中文字形，中文注释只能靠浏览器回退字体拼接，常常出现宽窄不一、字体突兀甚至豆腐块（□□□）。本工具直接使用系统等宽字体栈：ui-monospace, 'SF Mono', Menlo, Consolas, 'PingFang SC', monospace——macOS 走 SF Mono + 苹方，Windows 走 Consolas + 微软雅黑回退，中文注释与英文代码天然同排渲染，观感统一。

语法高亮是怎么实现的

内置一套轻量正则高亮引擎，对每一行做四类着色：注释（//、#、/* */、<!-- -->）、字符串（含转义引号处理）、关键字（按语言切换关键字表：JS/TS/Python/Java/Go/CSS/HTML/JSON）与数字。虽不及专业 IDE 精细，但对分享图场景完全够用，且零依赖、纯本地计算。

如何使用本工具

1. 左侧粘贴代码，选择语言（影响高亮规则）
2. 挑选主题：深色、浅色或 6 款渐变背景之一
3. 按需开关 macOS 三圆点窗口控件、填写文件名标签、拖动滑条调节边距
4. 点击「导出 PNG」保存分享图

常见问题

• 代码会被上传吗？不会。渲染与导出全部在你的浏览器内通过 Canvas 完成，页面没有网络请求，纯本地处理。
• 导出的图清晰吗？画布按设备像素比（devicePixelRatio）渲染，Retina 屏导出即为 2x 高清图，适合直接发布。
• 支持哪些语言？JavaScript、TypeScript、Python、Java、Go、CSS、HTML、JSON 八种，覆盖绝大多数分享场景；其余语言可选 JS 规则获得基础着色。