Code Screenshot
Renders a code snippet as an image with syntax highlighting, a window frame and a chosen theme.
Turns a snippet of code into a PNG you can put in a slide, an issue or a post — syntax highlighted, in a window frame, at the export scale you choose. It is drawn on a canvas here; nothing is uploaded and no external highlighter is loaded.
Code
Preview
What this tool does
- · Syntax highlighting comes from the tokenisers this site’s formatters use (JavaScript, TypeScript, CSS, HTML, SQL) plus small ones written here (JSON, Python, Go, Rust, Shell). No external highlighter is loaded.
- · Text is drawn straight onto a canvas with the monospace font your device has. Korean falls back to a system Korean face, so it renders as text rather than boxes, and Korean and emoji count as two cells when wrapping. Fonts differ between devices, so the same code looks slightly different on each.
- · PNGs are produced at 1×, 2× and 3×, and nothing is uploaded.
To make the PNG smaller, use PNG compression; to put it in a device frame, use the device mockup.
How to use it
Paste the code
The language is detected, and you can override it. Highlighting uses the same tokenisers as this site’s formatters for JS, TS, CSS, HTML and SQL, plus small ones for JSON, Python, Go, Rust and Shell.
Set the frame
Theme, font size, padding, a window title, traffic lights or none, line numbers, a shadow. The preview is the export at 1×.
Choose a wrap width for long lines
Korean and emoji count as two cells when wrapping, the way a terminal counts them, so a mixed-script line breaks where it looks like it should.
Export at 2× for anywhere it will be resized
1× for a fixed-width blog, 2× for slides and retina screens, 3× when it will be zoomed. Or copy the image straight to the clipboard.
Common questions
Why does it look different on my other computer?
Because the text is drawn with the monospace font that device has, and no two machines have quite the same one. Korean in particular falls back to whatever system Korean face is installed. The tradeoff is that nothing is downloaded and the render is instant.
Can I get an SVG?
No, PNG only. An SVG would need the font embedded to look the same anywhere, and embedding a Korean font is megabytes. A 2× PNG is smaller and renders identically everywhere.
Should I post a screenshot of code at all?
For a slide or a social post, yes. For a bug report or a pull request, paste the text — an image cannot be searched, copied, diffed or read by a screen reader. This tool is for the first case.
Feed it from
JavaScript Beautifier & Minifier
Strips comments and whitespace from JavaScript or TypeScript without renaming anything, and re-indents a minified bundle so it can be read again.
ASCII Table Generator
Renders a table as monospaced ASCII, Markdown or box-drawing borders for READMEs and comments.
ASCII Text Art
Renders text as large ASCII letters through a real FIGfont renderer, with two bundled fonts and a slot for a .flf of your own.
ASCII Diagram Editor
Draws boxes, lines, arrows and labels on a character grid, deriving every corner and junction from which neighbours are occupied, in Unicode box drawing or pure ASCII.
Next
These accept what this tool produces, so the result can go straight in.
ASCII Table Generator
Renders a table as monospaced ASCII, Markdown or box-drawing borders for READMEs and comments.
Device Mockup
Places a screenshot inside a phone, tablet, laptop or browser frame with a background and shadow.
JavaScript Beautifier & Minifier
Strips comments and whitespace from JavaScript or TypeScript without renaming anything, and re-indents a minified bundle so it can be read again.
PNG Compressor
Quantises the palette and rewrites the deflate stream to shrink a PNG without changing its dimensions.
Base64 Encoder & Decoder
Encodes and decodes Base64 and Base64URL for text or files, handling UTF-8 correctly.
JSON ⇄ CSV
Flattens nested JSON into columns or rebuilds objects from a table, with a dot-path column naming rule.