代码转图片
在浏览器中将代码片段转换为精美的语法高亮 PNG 图片，无需上传任何内容。
正在加载工具…
代码转图片 — 粘贴代码片段，选择语言、主题、背景和内边距，即可导出 Carbon 风格的代码卡片，支持透明或渐变背景的 PNG。语法高亮（Prism）与图片捕获（html-to-image）都完全在浏览器中运行，代码绝不会被上传。预览会随着你输入或切换选项实时更新。
代码转图片 是什么？
代码转图片是一款免费的浏览器工具，可将代码片段变成可分享的图片——一张带语法高亮的精美代码卡片，可放入博客文章、幻灯片、README 或社交媒体帖子。它深受开发者、技术作者和教师喜爱，让代码看起来更专业，而不是粘贴一张扁平的截图。你可以选择 JavaScript、TypeScript、JSX、CSS、HTML、JSON、Python 或 Bash 高亮，然后为卡片搭配主题、渐变或纯色背景以及你喜欢的内边距。卡片会随编辑实时渲染，一个“下载 PNG”按钮即可以 2 倍分辨率导出。
如何使用 代码转图片
- 在编辑器中粘贴或输入代码，或在工作区中将其他工具的文本输出连接到输入端口。
- 选择匹配的语言——JavaScript、TypeScript、JSX、CSS、HTML、JSON、Python 或 Bash——以获得正确的语法高亮。
- 打开“设置”选择主题（Midnight、Graphite 或 Snow）、背景（Aurora、Sunset、Ocean、Slate 或透明）以及内边距（紧凑、标准或宽松）。
- 随着你输入和更改选项，实时预览会即时更新；点击预览即可在缩放视图中放大查看。
- 点击“下载 PNG”将卡片保存为高分辨率图片，或在工作区中将 PNG 直接传给下游的图片工具。
示例
用于博客文章的 JavaScript 函数
粘贴一个简短的 JavaScript 函数，语言保持为 JavaScript，选择 Midnight 主题搭配 Aurora 渐变背景，下载一张清晰的 PNG 嵌入文章，而不是扁平的截图。
用于幻灯片的透明 CSS 片段
将语言切换为 CSS、背景切换为透明，这样导出的 PNG 没有背景，让代码卡片干净地置于彩色幻灯片背景之上。
用于 README 的 Bash 命令卡片
选择 Bash，搭配 Snow 浅色主题、Slate 纯色背景和宽松内边距，导出一张整洁易读的命令卡片用于项目文档。
常见问题
- 它能高亮哪些语言？
- 它支持 JavaScript、TypeScript、JSX、CSS、HTML、JSON、Python 和 Bash。从语言下拉菜单中选择与你片段匹配的语言；如果某个标记无法识别，则会回退为基础文字颜色。
- 它导出什么图片格式？
- 它以 2 倍像素密度导出 PNG，结果清晰锐利。如果你选择透明背景选项，PNG 会保留 Alpha 通道，代码卡片背后没有任何背景。
- 我可以更改卡片的外观吗？
- 可以。在“设置”中你可以在 Midnight、Graphite 和 Snow 主题之间切换，选择 Aurora、Sunset、Ocean、Slate 或透明背景，并设置紧凑、标准或宽松的内边距。
- 我的代码会被上传吗？
- 不会。语法高亮（Prism）和图片捕获（html-to-image）都在你的浏览器中 100% 本地运行。你的代码绝不会被上传、发送到我们的服务器或被分享，因此即便是专有代码也始终保留在你的设备上。
- 为什么在工具页面要点击下载后图片才出现？
- 在独立页面上，PNG 会在你点击“下载 PNG”时生成，因此输入时不会每敲一个键就重新捕获图片。带样式的预览仍会随编辑实时更新；在工作区中 PNG 也会自动重建，以便传给下一个工具。