Code to Image (Code Screenshot Generator)

A screenshot of code is often the clearest way to share a snippet on a slide, in a blog post or on social media — but a real screenshot picks up your editor's clutter. This tool draws the code itself: syntax highlighting for JavaScript/TypeScript, Python, Java/C/C#, Go, Rust, PHP, SQL, HTML, CSS, JSON and shell, a light, dark or sepia theme, a window frame with a title, line numbers and a gradient, solid or transparent background. Download a sharp PNG at 2× or 3×, or an SVG.

How to use this tool

1. Paste the code and choose its language.
2. Pick a theme and a background.
3. Set the window title, frame and line numbers.
4. Adjust the font size, padding and scale.
5. Download the PNG or SVG.

Formula

height = 2 × padding + title bar + 2 × inner padding + lines × 1.5 × font size

Each character sits on a fixed monospace grid (East Asian wide characters and emoji take two cells), so columns stay aligned whatever font your system uses. Tabs become 4 spaces. Highlighting is a lightweight lexer — comments, strings, numbers, keywords, function names and types — not a full parser, so unusual syntax may stay uncoloured. Scale multiplies every pixel dimension for high-DPI screens.

Example

The 8-line debounce function at 16 px with a 48 px margin is 48 + 36 (title bar) + 20 + 8 × 24 + 20 + 48 = 364 px tall at 1×, or 728 px at the default 2×. Keywords such as function, return and let, the comment, the default value 300 and the call to setTimeout each get their own colour from the dark theme.