Home › Developer Tools › Code to Image

Code to Image

Paste a code snippet and turn it into a crisp, syntax-highlighted image for slides, docs, tweets and tutorials. Pick a theme, window frame, background and padding, then download a PNG up to 4× resolution. Everything is drawn in your browser.

Language

Theme

Window

File name

Font size 15px

Padding 56px

Background

Solid background color

Line numbers Shadow Highlight lines Tab width

Your code

Preview

Export size

How to use the Code to Image

Paste your code into the editor. The language is detected automatically, or choose it from the list.
Pick a theme and frame: choose an editor theme, a macOS or Windows window frame and a file name for the title bar.
Style the background: select a gradient, a solid color or transparent, and set the padding around the window.
Fine-tune the font size, line numbers and highlighted lines. The preview updates as you type.
Download PNG at the resolution you need, or click Copy image and paste it into Slack, a doc or a slide.

Tips for great code screenshots

Keep it short. 5 to 25 lines read well on slides and social posts. Cut boilerplate and show the lines that matter, then use Highlight lines to point at the key change.
Keep lines under about 80 characters. The image is as wide as the longest line, so one very long line makes all the text smaller when the picture is scaled down.
Pick contrast for the destination. Dark themes look best on light slides and social feeds; Paper Light or Solarized Light suit printed handouts and documentation with a white page.
Export at 2× or more. A 2× PNG has twice the pixels in each direction, so text stays crisp on retina screens and projectors.
Add alt text when you post. Screen readers cannot read the code inside an image. Paste the code itself (or a summary) as the image description, or link to a gist.

Supported languages and what gets highlighted

Language	Highlighted
JavaScript, TypeScript	Keywords, strings and template literals, regex literals, numbers, functions, classes, decorators, TypeScript types
Python	Keywords, f-strings and triple-quoted docstrings, decorators, built-ins such as `print` and `len`
HTML / XML	Tags, attributes, values, comments, entities, plus JavaScript and CSS inside `<script>` and `<style>`
CSS	Selectors, pseudo-classes, properties, custom properties, colors, units, at-rules
JSON	Keys, string values, numbers, `true`/`false`/`null`
SQL	Keywords in any case, data types, functions, strings, `--` and block comments
Bash / Shell	Keywords, common commands, `$VARIABLES`, flags such as `-p` or `--force`, strings, comments
Java, Go, C/C++, PHP, Rust	Keywords, types, functions, strings, numbers, comments, plus annotations (Java), preprocessor lines (C), `$variables` (PHP), macros and lifetimes (Rust)

The highlighter is a lightweight tokenizer built into this page, so it works offline once the page is loaded and nothing is sent to a server.

Frequently asked questions

Is my code uploaded anywhere?

No. The highlighting and the image are produced in your browser with the Canvas API. Your code is never sent to a server.

Which programming languages are supported?

JavaScript, TypeScript, Python, HTML/XML, CSS, JSON, SQL, Bash/Shell, Java, Go, C/C++, PHP and Rust. Plain text works too. Auto-detect picks the most likely language from keywords and syntax, and you can override it.

What resolution should I export?

2× is a good default: text stays sharp on retina screens and in slides. Use 3× or 4× for printing or very large displays. Very long snippets are automatically limited to the largest size browsers can draw.

Can I get a transparent background?

Yes. Choose Transparent as the background and the PNG keeps an alpha channel, so only the code window (and its shadow) is visible when you place it on a slide.

Why do code images use a monospace font?

Monospaced fonts give every character the same width, so indentation and alignment in code look exactly as in your editor. The tool uses your system's monospace font (such as SF Mono, Consolas or DejaVu Sans Mono).

How do I highlight specific lines?

Type line numbers in the Highlight lines box, separated by commas, with ranges written as 3-6. Those lines get a soft band so readers know where to look.

Related tools