Code to Image

Turn code into a beautiful image for slides, docs and social posts: syntax highlighting for 20 languages, themes like One Dark and Dracula, gradient backgrounds, window buttons, line numbers and 1–3× export. Download a PNG or copy it to the clipboard.

This tool runs entirely in your browser.

Loading tool…

How to use the Code to Image

1Paste your code and pick the language (or let it detect automatically).
2Choose a theme, background, padding and font size; add a title or line numbers.
3Download the PNG or copy the image straight into your post or slides.

What is the Code to Image?

Code is highlighted with highlight.js and drawn onto a canvas in your browser, so the image is crisp at 2× or 3× for high-resolution screens and print. Tabs become two spaces and very long files are limited to 300 lines — for social posts, 10–25 lines read best.

Images are great for slides and social media, but they aren’t searchable or accessible to screen readers and can’t be copied. When sharing code people should reuse, also link the text — for example in a gist — and describe what the code does in your post.

Frequently asked questions

Which font is used?

Your system’s monospace font (SF Mono, Menlo, Consolas…), so the image can look slightly different on another computer.

Can I get a transparent background?

Yes — choose “None (transparent)” as the background to export just the code window on a transparent PNG.

Is the Code to Image free and private?

Yes. The Code to Image is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →