📸 Code Screenshot
Paste code, choose language, theme and gradient background, then export a beautiful PNG screenshot. Great for social posts and article hero images.
🔒 About Privacy
- ・All processing happens entirely in your browser
- ・Your code is never sent to any server
- ・No storage logs, no history, no database
- ・No signup, no login, no payment ever
📖 Where people get stuck
Paste code, pick a language, theme and background, and it exports a syntax-highlighted PNG. It uses highlight.js and html2canvas, entirely in the browser. The result is an image, so the code inside cannot be selected, copied or searched — that single fact determines most of what follows. It makes a fine decoration, but as a way of communicating code it is far inferior to text.
| Case | What happens | What to do |
|---|---|---|
| The exported PNG comes out blurry | The image is exported at the same pixel ratio as the preview — twice the size on a Retina display — and yet it still blurs, because the damage happens afterwards. Upload it to social media or Slack and the platform scales it down automatically and recompresses it as JPEG. Wide images in particular get shrunk hard to fit a timeline column, so a picture holding forty lines of code is all but unreadable on a real device. The awkward part is that it reads fine when you open it on your own screen, so the problem is easy to miss. | Reducing the amount of information works better than raising the resolution. Concretely, keep the snippet under twenty lines and increase the font size — text survives downscaling only when it started out large. Trimming the padding helps too, since at the same width the characters become relatively bigger. When you want to show a long listing, do not split it across images; do not make it an image at all — beyond about twenty lines, code is not suited to being shown as a picture. Always open it on a phone before you post: judging from a desktop screen alone is how you end up publishing something most of your readers cannot read. |
| Non-Latin characters and emoji shift or vanish | html2canvas reads the DOM and redraws it onto a canvas, but it can start drawing before web fonts have finished loading. When that happens it renders in a fallback face, the character widths change and the indentation breaks. On top of that, most monospaced coding fonts contain no CJK glyphs — mix Japanese into Monaco or Menlo and only the Japanese falls back to another face, so line heights and character widths stop lining up. Emoji are worse still: they look different on every operating system, and in some environments colour emoji do not render at all and come out as boxes. |
Wait for fonts to load before exporting — await document.fonts.ready is the simplest way. For code containing Japanese, name a CJK-capable monospaced font explicitly, such as Source Han Code JP, BIZ UDGothic or MS Gothic: these size Japanese at exactly two half-width columns, so the indentation holds. Emoji are best avoided in code screenshots altogether, as they vary too much by environment. And for the final check, open the exported PNG and look at whether the indentation actually lines up — the preview and the output are not the same thing. |
| Using a code image in the body of an article | The moment it becomes an image, your readers can no longer copy the code — their options are to retype it or give up. Beyond that, screen readers cannot voice it, browser search does not find it, translation does not touch it and search engines cannot see it. It pixelates when zoomed on a phone, and dark mode and font-size preferences have no effect on it whatsoever. Stack Overflow explicitly forbids posting screenshots of code precisely because none of that helps a question or an answer. The most valuable property of a technical article is that the reader can try it in their own environment, and an image blocks that directly. | Use code images only as decoration — social cards, article headers, slide covers: places that were never meant to be read from in the first place. The body of an article must carry a text code block. If you want both, put the image in the header and the same code as text in the body, and you get the appearance and the utility together. The test is whether you want readers to run the code: if you do, it must not be an image. Even when posting to social media, provide a text version in the post or behind the link — most it does not work replies are transcription errors. |
A screenshot captures things you never intended to include. Even when you thought you were cropping to just the code, it brings along file paths (which often contain a username), internal hostnames, in-house identifiers, ticket numbers written in comments, and API keys and tokens. Text can be swept mechanically with Ctrl+F, but an image is caught by neither review nor search, so it stays published for a long time. Open the image and read it line by line before you publish — probably fine is how most of these incidents begin. Also: turning someone else code into an image does not erase their copyright. Where attribution is required by the licence, having taken a screenshot is not an exemption — if you are going beyond fair quotation, state the source and the licence alongside it.
📖 How to Use
-
1
Paste codePaste your source code into the text area.
-
2
Choose language, theme, backgroundSyntax highlighting and colors update in the live preview.
-
3
Save as PNGClick Download to save as PNG. Copy to clipboard also supported.
❓ Frequently Asked Questions
Is my code sent to your server?
Which languages are supported?
What is the output resolution?
🔗 Related Tools
🐛 Found a bug or issue with this tool?
Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.
Thanks for your report!
Your report has been delivered to the operator and will be used to improve the tool.