Code to Image Generator
Paste a code snippet and get a clean picture of it, ready for a post, a slide, a README or a blog article. Pick the language, a light or dark theme, a gradient backdrop, a window title and line numbers, then download a PNG, JPEG, WebP or SVG. Nothing is uploaded, because the picture is drawn in your browser.
The preview appears here.
The highlighter is small on purpose: it colors comments, strings, numbers, keywords, function calls and tags for nine languages, but it does not parse code, so unusual syntax may be colored differently from your editor. The image is drawn in your browser and nothing you paste is uploaded. Fonts are the monospace fonts your device already has, so the width is an estimate that suits most code fonts. Long lines make a wide image, so break them before you export.
Related Tools
[5 suggestions]HTML to Image Converter
Turn HTML and CSS into a PNG, JPEG, WebP or SVG image in your browser, with a live preview, any size, a 1x to 4x scale and a transparent background.
Developer & WebJSON Formatter
Validate, pretty-print, and minify JSON with clear error reporting for invalid input.
Developer & WebSQL Formatter and Beautifier
Format and beautify SQL queries with one clause per line, keyword case and indent options, for PostgreSQL, MySQL, SQLite, SQL Server and more.
Developer & WebMarkdown to HTML Converter
Convert Markdown syntax to clean, semantic HTML with instant live code output and visual rendered preview.
Format ConversionSVG to PNG Converter
Convert SVG code or a file to a PNG, JPEG or WebP at 1x to 4x or a custom width, with a transparent or colored background.
Format ConversionAbout the Code to Image Generator
The tool colors your code with a small built-in highlighter, then lays it out as a window on a backdrop and draws that as an image. The highlighter colors comments, strings, numbers, keywords, function calls, HTML tags and attributes, and JSON keys for JavaScript, TypeScript, Python, JSON, CSS, HTML, shell and SQL, and shows other text in one color. It scans the text rather than parsing it, so unusual syntax can be colored differently from your editor. The image size comes from the code: the height from the number of lines, and the width from the longest line, using an average monospace character width that suits common code fonts. If you set a fixed width that is narrower than the code, the ends of long lines are cut off. Tabs become two spaces, and you can use up to 400 lines of 200 characters. Choose the transparent backdrop for a PNG, WebP or SVG with see-through corners, or a gradient for a ready-made look. The SVG download stays sharp at any size, and the bitmap formats can be saved at 1x, 2x or 3x. Fonts are the monospace fonts on your device, so the exact look depends on your system. Your code is never uploaded.
How do I turn code into an image?▾
Paste your code, choose the language, theme and backdrop, and press Download. The preview updates as you type, so you can adjust the title, the font size, the space around the window and the line numbers before you save.
Which languages does it color?▾
JavaScript, TypeScript, Python, JSON, CSS, HTML, shell and SQL, plus plain text with no colors. It colors comments, strings, numbers, keywords, function calls and tags. It does not parse the code, so very unusual syntax may be colored differently from your editor.
Can I get a transparent background?▾
Yes. Choose the Transparent backdrop and save as PNG, WebP or SVG. The window is still drawn, and the corners around it stay see-through. A JPEG cannot be transparent, so it is painted on white.
Why is my image very wide, or the code cut off?▾
The width follows your longest line, so one very long line makes a wide image. Break long lines first. If you type a fixed width that is narrower than the code, the ends of long lines are cut off, so leave the width empty to fit the code.
Is my code uploaded?▾
No. The highlighting and the picture are made in your browser, and nothing you paste leaves your device.