Code screenshot
Turn a code snippet into a styled image you can share.
Runs in this tab. The file stays here.
This runs in your browser. Nothing is uploaded.
About Code screenshot
Turn a code snippet into a 900 by 560 PNG of light monospace text on a dark slate background. It is drawn in your browser and nothing is uploaded.
Slides and posts often need a code block that looks intentional, not a grey system-font paste. Carbon-style sites will render one for you if you are willing to send the snippet to them, and internal hostnames, ticket numbers and half-redacted keys are a poor reason to do that. This page paints the picture locally, from the text in the box.
Type or paste into the box and the preview updates as you edit. The text is drawn in a single pale colour (#e2e8f0) on dark slate (#0f172a), in a system monospace font at 18 pixels, starting 48 pixels from the left edge, one line every 28 pixels. Only the first 24 lines are drawn; anything after that is cut. Lines are not wrapped, so a line wider than the canvas runs off the right edge. Tabs are not expanded either, so indent with spaces if the layout matters.
There is no language picker, no syntax colouring, no theme switcher, no line numbers and no window chrome. Because the canvas is also a drawing surface, click into the text box before you touch the preview, otherwise a stray drag will leave a pen stroke on the image. The download is a PNG named code-screenshot.png. If you want a framed app window, use Mockup or Screenshot beautifier on a real screenshot instead.
How to use Code screenshot
- 1Click the text box, then paste or type your snippet.
- 2Check that the lines you care about fit within 24 lines and the width of the canvas.
- 3Click Download image to save code-screenshot.png.
What it won't do
- No syntax themes, line numbers or window chrome.
- Fixed 900 by 560 canvas: 24 lines at most, no wrapping.
- Dark slate background with pale monospace text only.
Common questions
Does the code screenshot tool do syntax highlighting?
No. All text is drawn in one colour on a dark background. Highlighting would need a language mode and a theme, and neither is part of this page.
Can I export my code screenshot as SVG?
PNG only. The text is rasterised into the image, so it is not selectable or searchable afterwards. Keep the original snippet if you may need to edit it.
Why did the bottom of my snippet disappear from the code screenshot?
The canvas draws the first 24 lines and drops the rest. Shorten the paste, or split a long file across two images.
Why does a long line get cut off on the right of the code image?
Lines are drawn as-is and never wrapped, and the canvas is 900 pixels wide. Break the line yourself, or shorten it, before you download.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation