代码只在浏览器本地渲染，不会上传。
未安装的字体会自动回退到系统等宽字体。
「复制图片」需较新的 Chrome / Edge，不支持时请用下载。
6 套编辑器主题，9 类语言语法高亮。
| 主题 | 底色风格 | 适合场景 |
|---|---|---|
| GitHub Dark | 近黑 #0d1117，关键字红、函数紫 | 最通用的暗色代码图，博客 / 文档首选 |
| Dracula | 深紫灰，配色鲜艳高对比 | 社交平台吸睛、技术分享 |
| Monokai | 经典 Sublime 配色 | 老牌开发者熟悉的风格 |
| Nord | 冷调蓝灰，色彩柔和 | 护眼、极简风格配图 |
| GitHub Light | 纯白底，GitHub 官方浅色 | 浅色文章、打印场景 |
| One Light | 暖白底，Atom 浅色风 | 清新浅色配图 |
| 语言支持 | JavaScript、TypeScript、Python、C/C++/Java/C#、SQL、CSS、JSON、HTML/XML；识别关键字、字符串、数字、注释、函数名、标签属性、选择器 @规则 与 HTML 实体。 | |
让代码图更清晰、更好看。
| 问题 | 说明 |
|---|---|
| 为什么导出要选 2× / 3× | 预览按屏幕像素绘制，导出时按选择的倍数超采样：Retina 屏与手机上 2× 不会糊，需要印刷或大屏展示选 3×，倍数越高文件越大。 |
| 透明背景怎么用 | 外层背景选「透明」，预览用棋盘格表示透明区域，下载的 PNG 保留 alpha 通道，可直接叠到 PPT、海报或深色背景上；透明模式下不绘制投影。 |
| 代码很长怎么办 | 图片宽度按最长一行自适应，高度按总行数计算，均无截断；超长代码建议先精简到核心片段，或调小字号后导出，社交平台阅读体验更好。 |
| 中文与特殊字体 | 渲染使用系统已安装字体，未安装的编程字体会自动回退到 Menlo / Consolas 等系统等宽字体；中文注释用等宽字体中的中文字形绘制，任何机器打开结果一致。 |
| 语法高亮不准 | 本工具使用轻量词法规则（非完整编译器），覆盖绝大多数常见写法；宏、模板字符串嵌套、预处理指令等极端语法可能与专业编辑器有差异，可选「纯文本」获得无高亮的整洁图。 |
| 复制图片失败 | 浏览器要求页面安全上下文（https 或 localhost）且版本较新才支持写剪贴板图片；失败时用「下载高清 PNG」即可，效果完全相同。 |
⚠️ 所有渲染均在浏览器本地用 Canvas 完成，代码不会上传服务器。
生成图片的语法高亮基于轻量词法规则，适合配图分享；如需严格语法校验请使用专业 IDE。
写技术文章、发朋友圈、做分享 PPT 时，直接截 IDE 往往又暗又糊、还有一堆无关界面。
这个工具把代码渲染成干净精美的图片：
① 粘贴代码并选择语言（JS / TS / Python / C 系 / SQL / CSS / JSON / HTML 等）；
② 选择 GitHub Dark、Dracula、Monokai、Nord、GitHub Light、One Light 六套主题；
③ 开关 macOS 三色窗口栏、行号、粗体，自定义标题、字号与字体；
④ 外层可选紫蓝 / 暖橙 / 海蓝 / 粉红渐变、纯白或真透明；
⑤ 实时预览，一键下载 2× / 3× 超采样高清 PNG，或直接复制图片到剪贴板。
适合技术博客、公众号、掘金 / V2EX / X / 即刻等平台配图。
实现方式：
① 前端用轻量词法分析器把代码切分为关键字、字符串、数字、注释、函数名、普通文本等 token，HTML/XML 单独走标签状态机（识别标签名、属性名、属性值、实体与注释），关键字表按语言区分（如 SQL 大小写不敏感）；
② 用 Canvas 按 token 着色逐行绘制，宽度由最长行测量得出，高度按行数与 1.6 倍行高计算，超长内容不截断；
③ 导出时通过 devicePixelRatio 超采样（画布物理像素 = CSS 尺寸 × 倍数）保证 Retina 屏清晰；
④ canvas.toBlob() 生成 PNG，透明背景时不铺底、不画投影，保留 alpha 通道；
⑤ 全部计算在本地完成，代码不离开浏览器。
审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！