Code screenshot generator

Generate syntax-highlighted code screenshots and export them as SVG, PNG, JPEG, WebP, or HTML.

Code

Paste the snippet you want to turn into an image.

Syntax

Choose highlighting, language detection, and color theme.

Language
Auto
Theme

Background

Set the canvas behind the code card.

Preset

Window

Choose the window frame and line number style.

Layout

Adjust spacing, font size, corner radius, and tab width.

What it does

Code Screenshot Generator turns a pasted snippet into a polished code card that can be exported as SVG, PNG, JPEG, WebP, or standalone HTML. It runs in your browser, applies syntax highlighting with selectable themes, and lets you tune the frame before downloading.

When to use it

Use it for documentation images, release notes, blog posts, presentations, social previews, and bug reports where a styled snippet is easier to scan than plain text. SVG and HTML exports stay crisp for docs, while PNG, JPEG, and WebP are useful for tools that expect raster images.

How to get a clean export

Pick the closest language or leave language detection on automatic, then choose a theme with enough contrast for your destination. Keep line numbers on when the snippet will be referenced in a discussion, and disable the outer background when you need a transparent asset for another design.

Privacy and limitations

The snippet is processed locally in the page and is not uploaded by this tool. Very large files can make highlighting and raster export slow, so trim the snippet to the lines you want to show before exporting.

How to use

Paste code, choose its language and visual treatment, adjust the frame, then download PNG, JPEG, WebP, SVG or HTML