Code Screenshot Generator

Features

• Syntax highlighting: JavaScript, TypeScript, Python, Go, Rust, SQL, Bash, JSON and plain text
• Highlighting reuses the site highlighter, matching the code highlighting tool
• Three themes: dark, light and high contrast
• Optional line numbers, with adjustable font size, padding and corner radius
• Optional window title bar with red, yellow and green dots and a custom title
• Monospace width measured per character, so CJK comments stay aligned
• Outputs a PNG, with size and file size shown on the card
• Rendered entirely in your browser - code is never uploaded

How to use

1. Put the code to render into the Code field
2. Pick a language and theme; adjust font size, line numbers, padding and radius
3. Optionally switch on the title bar and type a title
4. Download the PNG

FAQ

Does it support multi-line code?

The renderer itself handles multiple lines (line numbers and line height are computed per line), but the code field is currently a single-line input. That is the control shape of the site image shell: a standard single-line text control strips newlines on paste, so in practice one line at a time is possible. It suits a single line, an expression or a short minified snippet. For a full multi-line snippet, render it elsewhere for now or split it into several runs.

Is the highlighting the same as the code highlighting tool?

It is the same implementation. Highlighting reuses lib/highlight.ts: the language table, the keyword tables and the classification of each run exist in one place. All that happens here is painting that classification onto a canvas (a canvas has no innerHTML, so the HTML cannot be drawn directly); the class-to-colour map is only needed for drawing. So the colour distribution you see here matches the code highlighting tool, with no second rule set to drift.

Why measure width character by character?

Because a CJK glyph takes two cells in a monospace font. If a whole line were measured at once, the font engine could compose a width that differs by a few pixels from the real Latin-half, CJK-full occupancy when Latin and CJK are mixed, and the line-number column would drift out of alignment. Measuring per character gives a predictable, assertable width, so CJK comments and code line up.

Can the background be transparent?

The output currently has a solid background (the theme base colour). Outside the rounded corners the four corner areas are transparent, so the rounded shape will not show a white fringe when placed on a dark or light page. If you need another base colour, pick the closest theme or replace the background with an image tool afterwards.