Code to Image: Syntax Highlighter

About this tool

A picture of code is easier to share than text in slides, social posts, blog headers and chat. Paste your snippet, and the tool colours it with syntax highlighting and draws it as a clean picture: a coloured window with the usual three dots, an optional title and line numbers, on a gradient or transparent background. Choose from 29 languages (or let it detect the language), four themes, text size, spacing, tab width and the backdrop, and watch the preview change as you type. Download the picture as a PNG, up to three times its size for sharp results on large screens, or as an SVG that stays sharp at any size, or copy it to the clipboard. The highlighting comes from highlight.js, and the picture is drawn by this page itself in two ways that share one layout, a canvas for PNG and plain SVG text for SVG, and we checked in a browser that the two agree: fewer than one pixel in a hundred differs. The SVG contains only text and shapes, no scripts or embedded HTML, so it is safe to open and to upload to other sites. The code is never sent anywhere, and the last snippet and settings are remembered in this browser only. Notes: the picture assumes an even width for every character, so it looks best with the monospace fonts on your device; long lines are cut after 200 characters and only the first 400 lines are drawn; very wide characters such as emoji and CJK take two character widths and accents or joiners take none; some symbols are drawn wider or narrower than the grid depending on the font. The language guess uses the first 6,000 characters and can be wrong for short snippets, so choose the language if the colours look odd.

How to use it

1. Paste your code into the box.
2. Choose the language, theme, background and options.
3. Check the preview.
4. Download the PNG or SVG, or copy the image.

Common problems

The colours look wrong or there are none

The language was probably guessed wrong. Choose the language from the list instead of automatic detection.

The PNG is blurry when I enlarge it

Choose the 3× size for the PNG, or download the SVG, which stays sharp at any size.

My code is cut off

Lines are cut after 200 characters and only the first 400 lines are drawn. Split the snippet or shorten the long lines.

The text looks different in the SVG on another computer

The SVG uses a monospace font from the viewer's system, with each character placed on a fixed grid. For identical results everywhere, use the PNG.

Copy image does nothing

Copying images needs a secure page and a current browser. Use Download PNG instead.