代码转图片 - 将代码片段转为精美图片
将代码片段转换为带语法高亮的可分享图片。选择主题、字体和背景 — Carbon替代工具。
常见问题
什么是代码转图片工具，为什么要使用它？
代码转图片工具将源代码片段转换为带有语法高亮、主题背景和窗口装饰的视觉风格化图片。开发者使用这些图片在不原生支持代码格式的社交媒体平台上分享代码，为博客文章和文档创建视觉一致的代码示例，以及为技术演示制作精美的幻灯片。
如何使用这个代码转图片工具？
在左侧编辑器中粘贴或输入代码，从下拉菜单中选择编程语言，选择语法高亮主题，自定义背景颜色或渐变、窗口样式、内边距和字体大小，在右侧查看实时预览，然后点击下载PNG、下载SVG或复制到剪贴板。
我的代码安全吗？会被发送到服务器吗？
您的代码100%安全，永远不会离开您的浏览器。所有语法高亮都使用Shiki在客户端执行，图片生成使用html-to-image库在浏览器内完全转换为PNG或SVG。不会向任何服务器传输代码、图片或数据。
PNG和SVG导出有什么区别？
PNG是一种光栅图像格式，以固定分辨率生成基于像素的图像。此工具默认以2倍缩放导出PNG以获得视网膜质量输出。SVG是一种矢量格式，可以缩放到任何大小而不损失质量，非常适合印刷材料、演示文稿和文档。
支持哪些编程语言？
此工具支持30多种流行编程语言，包括JavaScript、TypeScript、Python、Go、Rust、Java、C、C++、C#、PHP、Ruby、Swift、Kotlin、Dart、HTML、CSS、SQL、Bash、JSON、YAML等。语法高亮由Shiki驱动，它使用与Visual Studio Code相同的TextMate语法。
如何获得最佳质量的输出？
要获得最高质量的图片：使用2x或3x导出比例以适应视网膜显示器，选择对比度好的主题，使用适当的内边距（48px或64px），并启用阴影。对于打印或演示，导出为SVG以在任何尺寸下获得完美缩放。
我可以将生成的图片用于商业用途吗？
是的，您生成的图片完全属于您。由于所有处理都在您的浏览器中进行，且此工具免费无水印或品牌要求，您可以将输出图片用于任何目的，包括商业博客文章、付费课程、客户演示和产品文档。
有哪些主题和自定义选项？
工具提供来自流行编辑器的13+语法高亮主题，三种窗口样式（macOS、Windows、无），带颜色选择器的纯色或渐变背景，内边距选项，字体大小，等宽字体，行号开关，阴影开关和可选水印文字。
代码示例
// Code to Image using Shiki + html-to-image
import { codeToHtml } from 'shiki';
import { toPng, toSvg } from 'html-to-image';
// Generate syntax-highlighted HTML
async function highlightCode(code, lang = 'javascript', theme = 'dracula') {
return await codeToHtml(code, { lang, theme });
}
// Export DOM node as PNG
async function exportToPNG(node, scale = 2) {
const dataUrl = await toPng(node, {
pixelRatio: scale,
quality: 1.0,
});
const link = document.createElement('a');
link.download = 'code-snippet.png';
link.href = dataUrl;
link.click();
}
// Copy image to clipboard
async function copyToClipboard(node) {
const dataUrl = await toPng(node, { pixelRatio: 2 });
const res = await fetch(dataUrl);
const blob = await res.blob();
await navigator.clipboard.write([
new ClipboardItem({ 'image/png': blob }),
]);
}