Code to Image
Paste code, get a clean picture of it for slides, docs and posts. Made on your device; the code is never uploaded.
Look
How to turn code into an image
- Paste your code into the box. The language is detected; if the colours look off, pick it from the list (37 are there, from Bash to YAML).
- Choose a theme, a window frame and a background. For a slide on a light deck try Paper or Sand on a solid colour; for a dark post, Lime or Ink on a gradient.
- Set the font and size, switch line numbers on or off, and type the lines to highlight, such as
3-5,8. - Long lines? Tick Wrap long lines and set the column count, so one 140-character line does not shrink everything else.
- Download a PNG at 1x, 2x or 4x, an SVG with real text, or tap Copy image and paste it straight into a slide, a chat or a doc.
Which size and theme to pick
The 1x picture is sized in CSS pixels: a 10-line snippet of 50 columns at 15 px with line numbers and 48 px of padding is about 620 px wide. Export it at 2x (about 1,250 px) for slides and social posts and at 4x for print or a 4K screen; the PNG is drawn from the vector picture, so it is sharp at every size. The SVG stays sharp at any zoom and keeps the code as selectable text, with the font embedded. A projector washes out thin, low-contrast colours, so in a big room a light theme at 18 px or more reads best.
Okabe-Ito is the colour-blind-safe theme. Its token colours come from the palette Masataka Okabe and Kei Ito designed to stay distinct for red-green (protan, deutan) and blue-yellow (tritan) colour vision; keywords are also bold and comments italic, so the kinds of token differ by shape, not only by hue.
What it cannot do
- Highlighting follows a grammar, not a compiler, so unusual or brand-new syntax may be coloured wrongly, and auto-detect can pick the wrong language for a short snippet (pick it by hand).
- More than 500 lines is cut: the picture shows the first 500, and the page says so.
- No animated code: the output is a still PNG or SVG, not a video or GIF.
- The three fonts carry Latin characters only. Greek, Cyrillic, CJK and emoji fall back to a system font, and wide characters such as 漢 or 😀 take two columns of room in one, so lines after them can look out of line.
- Tabs become spaces at 4-column stops.
- Copy image needs a browser that can write images to the clipboard (recent Chrome, Edge, Safari and Firefox). Where it cannot, the page says so and Download PNG works.
Privacy and what is stored
Your code never leaves your device: the colours, the layout and the exported files are made by code in this page. The page loads only its own files (the highlighter and its grammars after your first paste, and the fonts), and no request carries your code. Your settings (theme, frame, background, font, sizes, the file name and the highlighted lines) are saved in this browser's local storage once you change one, so a reload keeps them; Clear saved settings deletes them in one tap. Your code is not saved. The page sends an anonymous page-view count and, at most, two fixed words (codeimg-open, codeimg-export), never the code, the file name or a theme. A share link carries the code and settings after the #, which browsers do not send to any server; opening one shows an editable copy and saves nothing unless you tap Keep these settings.
Questions
Is my code uploaded?
No. The colours, the layout and the PNG and SVG files are all made by code running in this page on your device, so an internal snippet can go into a talk without leaving your computer. The page fetches only its own files (the highlighter, its grammars and the fonts), never with your code in the request. The settings you pick are kept in this browser; the code itself is not saved anywhere.
What is the best size for a code screenshot in slides or a post?
Export at 2x for slides and social posts: a 10-line snippet at 15 px comes out about 1,250 px wide, sharp on a laptop projector and on a phone. Use 4x for print or a 4K screen. Keep snippets short: about 15 lines at 60 columns is what a slide audience can read; switch on Wrap at a set width so long lines do not shrink the whole picture.
Can I highlight certain lines?
Yes. Type the line numbers into Highlight lines, as single lines and ranges separated by commas, for example 3-5,8. Those lines get a coloured band and a bar at the left edge, and their line numbers are drawn brighter. A wrapped line keeps its band on every row it takes.
Why is my language coloured wrongly?
The colours come from highlight.js grammars, which match patterns; they do not compile the code. Auto-detect scores every grammar and picks the best fit, which can be wrong for a short or mixed snippet: three lines of C and of Java look alike. Pick the language from the list and the colours follow that grammar. Brand-new syntax a grammar does not know yet stays uncoloured.
Is the SVG text editable or selectable?
Yes. In the SVG every line is a text element with the code as characters, not a picture of the code, so it can be selected, searched and copied in a browser and edited in a vector app. The font is embedded in the file so it looks the same on a computer that does not have it.
Syntax colouring by highlight.js 11.12.0 (BSD-3-Clause). Fonts: Geist Mono, JetBrains Mono and Fira Code, under the SIL Open Font License 1.1.