Turn code into a clean, shareable image
This code to image generator turns a snippet into a polished picture for slides, documentation, social posts and code reviews: syntax-highlighted code in a window with a title bar, on a gradient or solid background, with optional line numbers and highlighted lines. Download it as a sharp 2× PNG for chat and social media, or as an SVG that stays crisp at any size.
Language detection and colouring come from highlight.js, the open-source highlighter behind many documentation sites, so more than 25 languages — JavaScript, TypeScript, Python, Java, C#, Go, Rust, SQL, HTML, CSS, YAML and more — are coloured correctly. The code is set in JetBrains Mono, an open-licence programming font.
Your code stays on your device. Highlighting, layout and image export all run in the browser.
How to use the Code to Image Generator
- Paste your code into Code. Tabs become four spaces and trailing blank lines are removed.
- Leave Language on Auto-detect or pick one. The line under the preview shows what was detected and the image size.
- Choose a Theme, Background, Padding, Font size and Window frame, and type a Window title such as the file name.
- Optionally turn on Line numbers, list lines to emphasise in Highlight lines (for example
2, 4-6), or fix the Image width so long lines wrap. - Press Download PNG (pick 1× to 4×), Download SVG, or Copy image to paste it straight into a chat or document.
Code to Image Generator features
Accurate highlighting
highlight.js 11.9 colours keywords, strings, numbers, comments, functions, types, tags and attributes, and can guess the language from 22 common ones.
Seven themes
Nebula, Midnight, Ember, Forest and Graphite for dark slides; Paper and Mint for light documents. Comments are italic and every theme keeps readable contrast.
Retina PNG and true vector SVG
PNGs are drawn on a canvas at 1×, 2×, 3× or 4× the preview size. The SVG keeps real text and embeds the font, so it is sharp at any zoom and the code can still be searched.
Window frame and title
Three coloured dots, window buttons or no frame at all, with a centred file name.
Line numbers and highlights
A right-aligned gutter and highlighted bands draw attention to the lines that matter in a tutorial or review.
Fixed widths for social posts
Choose 680 to 1,200 px to get a consistent size; long lines wrap onto the next row without breaking the line numbering.
Tips for a readable code image
- Keep it short. 5–20 lines read well on a phone. Cut boilerplate and imports, and point readers to the full file.
- Use 2× PNG for social media and chat — it stays sharp on high-density screens. Use SVG for slides and documentation that may be zoomed.
- Pick a theme that matches where it will appear. Dark themes stand out on social feeds; Paper suits printed handouts and light documentation.
- Highlight one idea. Mark the two or three lines you are talking about instead of the whole block.
- Always share the text as well. An image cannot be copied or read by screen readers, so post the code or a link next to it, and add alt text.
Export formats compared
| Format | Best for | Notes |
|---|---|---|
| PNG 2× | Social posts, chat, README files | Universal; twice the pixels of the preview for crisp text |
| PNG 3× / 4× | Large slides and print | Bigger files; very large images are scaled down automatically |
| SVG | Slides, docs, websites | Vector, small, text stays selectable; the font is embedded |
| Copy image | Pasting into chat or documents | Needs a browser that supports copying images to the clipboard |
How it works
highlight.js turns the code into labelled tokens. Each token is placed on a fixed grid of character cells — JetBrains Mono’s characters are exactly 0.6 em wide — so the preview, the PNG and the SVG line up identically. The PNG is drawn on a canvas with the same coordinates; the SVG uses positioned text elements. Characters outside basic Latin fall back to a system monospace font, and wide characters such as Chinese, Japanese, Korean and emoji take two cells. Images are limited to 400 lines; in “Fit the code” mode lines longer than 160 characters wrap.
More developer tools
Clean up code before taking the picture with the code beautifier or the SQL formatter, and make a link preview image with the OG image maker.
Code to Image Generator FAQ
How do I convert code to an image?
Paste the code, choose a theme and background, and press Download PNG. The code to image generator highlights the syntax automatically and saves a 2× PNG; choose Download SVG for a vector file.
Which languages are supported?
Auto-detect covers 22 common languages, and the Language list offers 26, including JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Kotlin, Swift, SQL, Bash, JSON, YAML, HTML/XML, CSS, SCSS, Markdown, GraphQL, Lua, R and diffs.
Can I make the background transparent?
Yes. Choose Transparent under Background; the PNG keeps an alpha channel so only the window is visible.
Why does my code wrap?
A fixed Image width wraps lines that do not fit, and Fit the code wraps lines longer than 160 characters. Choose a smaller font size or a wider image to avoid wrapping.
Is the code uploaded to make the image?
No. The highlighter and the image renderer run in your browser, and the only downloads are the highlighting library and the font.
Can I use the images commercially?
Yes. The images are yours. highlight.js is BSD-licensed and JetBrains Mono uses the SIL Open Font License, which allows embedding in images and documents.