Laid out on a canvas, not through foreignObject
The short way to turn HTML into an image is to wrap it in an SVG foreignObject and draw that to a canvas. It is also a trap: the moment the content references a webfont (and a code image always wants a monospace font) the canvas is tainted, and toBlob throws a SecurityError after every pixel has already been rendered.
So the text is measured and drawn run by run instead. It costs about forty lines, it cannot taint anything, and it uses the system monospace stack already on your machine. The glyph width is measured, never assumed: monospace fonts are not all 0.6em wide, and guessing is how code images end up clipped on the right.
The highlighter is a scanner, and it says so
There is no parser here and no grammar files. Strings, comments, numbers, keywords and punctuation are found by a small set of ordered regular expressions: about a hundred lines for eight languages, against tens of kilobytes for the smallest real highlighter plus a grammar per language.
That trade is right for this job and would be wrong for an editor. An image of code needs plausible colour, not a syntax tree; nobody has ever debugged from a screenshot's tokenisation. It will mis-colour a regex literal that looks like division, and a keyword used as a property name. Both are cosmetic at this size, and neither is worth a megabyte of download to fix.
PNG or SVG
PNG for anywhere the image gets pasted: issue trackers, chat, slides, social posts. Export at 2x so it stays sharp on a high-density screen. SVG for documentation you control, where it stays crisp at any size and is a fraction of the weight. The catch is that it renders in the reader's monospace font, so the line lengths can shift.
Common problems
- The image is very wide. One long line sets the width for the whole picture. Wrap it in your editor before pasting; an image cannot reflow.
- Tabs look wrong. Tabs are drawn as a single character. Convert them to spaces first (the whitespace remover does it) and the indentation lines up.
- The colours look flat. Try a different theme. All three are wired to this site's own palette and not to a borrowed editor theme, so the output looks like it came from somewhere rather than from a default.
- The wrong language was detected. Detection is a handful of heuristics over the first few thousand characters. Pick the language explicitly and it stops guessing.
Frequently asked questions
Should I post code as an image at all?
Usually not. An image cannot be copied, searched, read by a screen reader, or diffed, and on a phone it is often unreadable. Use a code block wherever one is available. Images are for the places that have no code block: a social post, a slide, a conference talk. For those they beat a blurry screenshot of an editor.
Is my code uploaded?
No, and it is not put in the address bar either. Only the theme and language choices travel in the URL. This matters more than usual here: the code someone screenshots is very often a config file or an error containing a token.
Can I add my own theme?
Not from the page. The three here are the site's own palette in dark, light and indigo, and every token colour in them has been checked for contrast against its background. That is not true of most editor themes exported to an image.
Why is there a length limit?
Past about twenty thousand characters the image is taller than anything anyone will read, and the browser is laying out a very large canvas to produce it. If the snippet is that long, the honest answer is a link to the file.