📸 Code Screenshot — Beautiful Code Images
Turn your code into beautiful screenshots with syntax highlighting, custom themes, gradient backgrounds, and window chrome. Export as PNG. Free code image generator.
How to Use
1
Choose theme and background
Select a syntax theme (Dracula, VS Dark, Night Owl…) and a gradient background. Toggle mac window dots and adjust padding to taste.
2
Paste your code
Type or paste code into the input area. The preview card updates instantly as you type.
3
Export as PNG
Click Export PNG. html2canvas renders the card at 2× resolution — sharp on Retina displays and ready for social media or blog posts.
Frequently Asked Questions
Is there a watermark on the exported image?
A small "onhtml.com" watermark appears in the bottom corner of the code area at very low opacity. It is part of the design and helps spread the word about the tool.
What resolution is the exported PNG?
The export uses html2canvas at 2× pixel ratio, producing a high-resolution image suitable for Retina displays, presentations, and social media.
Does it support syntax highlighting?
The current version renders code with the chosen theme colors without language-specific highlighting. Full syntax coloring is on the roadmap.
Is my code uploaded to a server?
No. The entire rendering and export happens in your browser. Your code never leaves your device.
完整指南：代码截图生成器
什么是代码截图？
将代码片段转换为带有语法高亮、窗口装饰框架和渐变背景的精美图片。非常适合技术社交媒体帖子、演示文稿、博客文章和开发者作品集。
如何使用
- 粘贴代码到文本区域。
- 选择主题：Dracula、VS Dark、Night Owl等。
- 选择渐变背景并调整内边距。
- 导出为PNG。
专业技巧
- 限制在15-20行——更长的截图在社交媒体上难以阅读。
- Dracula主题配紫色渐变在开发者Twitter社区非常流行。
- 关闭macOS窗口按钮获得更通用的外观。