Code Screenshot

Render source code as a downloadable PNG image using the Canvas API. A built-in tokenizer colorizes keywords, strings, numbers, and comments; the code sits on a gradient background inside a rounded window with optional macOS-style traffic-light controls, line numbers, a window title, and a bottom-right language badge.

1. Paste code into the Code Input textarea. 2. Choose Language, Theme (dark or light), and Background gradient. 3. Optionally set a Title, adjust Padding (16–64 px), and toggle Show Line Numbers / Show Window Controls. 4. Click Generate to render the canvas preview. 5. Click Download PNG to save the image as code-screenshot-<timestamp>.png.

Dark theme uses One Dark-inspired colors (keyword #c678dd, string #98c379, number #d19a66, comment #5c6370); Light theme uses One Light-inspired colors. Six gradients: Sunset, Ocean, Forest, Purple, Pink, Mono. The tokenizer recognizes // and # comments, single/double/backtick strings, hex/decimal numbers, and a fixed keyword set covering JS, TS, Python, Go, Rust, Java, and more. If Window Controls is off, the Title is shown as a top-left label instead.