How to turn code into an image
- Paste your code and choose its language for syntax highlighting.
- Pick a theme (Night Owl, Dracula, Monokai, Solarized Light or GitHub Light), a background gradient or transparency, the font size and the padding.
- Optionally show macOS-style window controls with a file name, and line numbers.
- Download a high-resolution PNG, or copy the image straight to your clipboard to paste into Slack, a slide or a social post.
Beautiful code screenshots
Sharing code as a picture is common on social media, in slide decks, tutorials, newsletters and documentation where code blocks are not supported or would lose their formatting. A plain screenshot of your editor often includes clutter, private file paths and inconsistent sizing. This tool, similar to Carbon or ray.so, produces a clean, consistently styled card with a soft shadow, exported at twice the screen resolution so text stays crisp on retina displays and when zoomed.
For accessibility, always include the code as text as well, for example in the post body, alt text or a link to a gist, because screen readers cannot read code in an image and readers cannot copy it.
Privacy
The image is drawn on a canvas in your browser. Your code is never uploaded, so proprietary snippets stay on your device.
What size is the exported image?
It depends on your code length and settings and is shown under the preview. Images are rendered at 2× scale for sharp text.
Can I use a transparent background?
Yes. Choose Transparent as the background to get just the code card with a shadow on a transparent PNG.
Which languages are highlighted?
JavaScript and TypeScript, Python, Go, Rust, Java, C#, C++, SQL, shell, CSS and HTML, using a lightweight built-in highlighter.