代码转图片
将代码生成带语法高亮的精美截图，适合技术博客和社交媒体分享
预览
（实时渲染）
输入代码后自动生成预览
关于代码转图片
- 将代码片段生成带语法高亮的精美截图，适合在技术博客、微信公众号、Twitter/X、掘金等平台分享
- 支持20种编程语言、6种代码主题、7种背景样式，可自定义窗口样式和字体大小
- 所有渲染在浏览器本地完成，代码不上传服务器
操作说明
- 在左侧输入代码，选择语言、主题、背景等配置，右侧实时预览效果
- 点击「示例」加载示例代码；点击「下载 PNG」保存图片到本地
- 支持拖拽代码文件到输入框自动读取内容
- 调整字体大小滑块可控制代码字号（12～20px）
注意事项
- 代码行数过多时生成图片可能较大，建议每张图片不超过50行代码
- 语法高亮基于关键词匹配，复杂语法可能高亮不完整，仅供展示用途
- 透明背景导出的 PNG 在不支持透明度的平台上会显示为白色背景
- 所有处理均在浏览器本地完成，不会上传任何数据
代码分享知识详解
常用代码主题介绍
| 主题 | 风格 | 特点 | 适用场景 |
|---|---|---|---|
| GitHub | 浅色 | 简洁清晰，接近原始代码 | 技术文档、白天阅读 |
| Monokai | 深色 | 色彩鲜艳，对比度高 | 社交媒体分享 |
| Dracula | 深色 | 紫色调，视觉独特 | 个人博客、创意分享 |
| One Dark | 深色 | VS Code 默认主题风格 | 开发者社区分享 |
| Nord | 深色 | 冷色调，护眼舒适 | 长时间阅读场景 |
代码截图最佳实践
- 控制行数：每张图片建议20～40行，超长代码分多张展示，避免字体过小
- 选择对比度高的主题：深色背景（Monokai/Dracula）在社交媒体上视觉冲击力更强
- 添加渐变背景：渐变背景比纯色更有设计感，适合技术博客封面图
- 保留窗口装饰：macOS 风格的红绿灯按钮能让截图更专业