🖼️ Code Screenshot Generator
Create beautiful code screenshots with syntax highlighting, themes, window chrome, and export to PNG
About this tool
Generate beautiful, shareable screenshots of your code. Perfect for blog posts, social media, documentation, and presentations. Choose from 11 syntax highlighting themes, apply window chrome decorations (macOS, Windows, Linux), tweak padding, font size, and border radius, and export as a high-resolution PNG.
Example: Paste a JavaScript function, select the "One Dark Pro" theme with macOS chrome, 40px padding, and export — you get a polished code image ready for Twitter or a README.
Customize the background with any solid color or upload your own image for branded screenshots. The exported PNG is rendered at 2× resolution for crisp display on retina screens.
FAQ
How does PNG export work without a server? ›
The preview HTML is serialized with all computed styles, embedded in an SVG foreignObject, rendered to a canvas at 2× resolution, and exported as a PNG blob — all in the browser.
Can I add my own logo or watermark? ›
Upload an image as the background — if your image includes a logo or watermark, it will appear behind the code. For overlay watermarks, edit the exported PNG in any image editor.
Why does the theme change not apply immediately? ›
Theme stylesheets are loaded from CDN. After selecting a new theme, the preview updates once the CSS finishes loading (usually under 200ms).
What languages are supported? ›
All languages supported by highlight.js — over 190. The dropdown lists the most common ones; "Auto-detect" guesses the language from your code.