How to use the Code to Image
- Paste your code — or try the Sample. The language is detected automatically, or pick it.
- Choose a theme, a background and a window style, and type a file name for the title bar.
- Adjust padding and font size; turn on line numbers if you will refer to them.
- Download a PNG (2× is sharp on retina screens and social media), an SVG for docs, or Copy image and paste it into Slack, X or a slide.
Why share code as an image?
On social media and in slides, code as text loses its formatting and colors. A code image keeps the indentation, highlighting and layout exactly as you intended, looks good in a feed and can’t be mangled by a word processor. For documentation people will copy from, keep using text code blocks — and add the image only as an illustration.
How it is drawn
The snippet is highlighted by a small built-in tokenizer — comments, strings, numbers, keywords, functions and properties for ten common languages — and painted onto a canvas with your system’s monospace font. PNG export redraws it at 1×, 2× or 3× so it stays crisp; SVG export keeps the text as text, so it scales to any size and stays searchable. Everything happens in your browser.
Related: JavaScript Formatter, HTML Formatter, CSS Gradient Generator.
Also searched as: code screenshot, code snippet image, code image generator, beautiful code screenshots, code to png, syntax highlighted image, share code as image.
Tools that pair well with the Code to Image
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- Markdown Editor — Write Markdown with a side-by-side live preview, a formatting toolbar and keyboard shortcuts.
- OG Image Generator — Create a polished link-preview image for Facebook, LinkedIn, X, Slack and WhatsApp in seconds — pick a template, type your title, add a logo, then download the PNG and matching meta tags.
- CSS Minifier — Paste a stylesheet to shrink it instantly.