Cómo usar: 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.
También se busca como: code screenshot, code snippet image, code image generator, beautiful code screenshots, code to png, syntax highlighted image, share code as image.
Herramientas que combinan con: Code to Image
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- Formateador JSON — Pega el código JSON para formatearlo, minimizarlo o validarlo.
- Markdown Editor — Write Markdown with a side-by-side live preview, a formatting toolbar and keyboard shortcuts.
- Generador de imágenes OG — Crea en cuestión de segundos una imagen de vista previa del enlace con un acabado impecable para Facebook, LinkedIn, X, Slack y WhatsApp: elige una plantilla, escribe el título, añade un logotipo y, a continuación, descárgate el archivo PNG y las metaetiquetas correspondientes.