Code image generator

When a picture of code is the right answer — and when it isn't

An image of code is a picture. It cannot be copied, searched, diffed, translated or read aloud by a screen reader, and every one of those is a real cost. So the honest rule is narrow: use an image only where the destination cannot render code at all. A post on X or LinkedIn, a slide, a conference talk, a thumbnail, a design mock — those flatten a code block into grey unstyled text, and colour and shape are most of what makes code readable at a glance. Anywhere that renders Markdown — a README, an issue, a pull request, a docs page — a real fenced code block wins on every axis. This tool exists for the first list, not the second.

What actually makes a code image read well

Fewer lines than you think. The most common mistake is pasting the whole function. An image is glanced at, not studied; eight to fifteen lines is the range where a reader takes it in without zooming. If the point needs forty lines, the point needs a link.

Say which line matters. The Highlight lines field takes something like 3-5, 9 and dims everything else. A reader who has to hunt for the interesting line usually stops hunting.

Contrast over prettiness. Every theme here is checked so that no token colour drops below roughly 4.5:1 against its own background. A palette that looks lovely on your monitor and dissolves on a phone in daylight has failed at the only job the image has.

Give it room. The space around the window is what makes the card look deliberate rather than cropped, and it also stops a platform's own rounded corners from clipping your code.

Why the export matches the preview exactly

Most tools of this kind build the picture as HTML and then rasterise the page with something like html2canvas. That inherits a set of problems: a web font that has not finished loading is captured as a fallback, shadows and gradients are approximated, and exporting at 3× means laying the page out again at a different size. Here the preview and the export are the same drawing routine on a canvas, called at a different scale — so what you download is what you saw, and 3× is a multiplication rather than a re-render.

The one thing that has to be true first is that the font has arrived, because a canvas measures text against whatever font is resolved at the moment it is asked. Every path here waits for the face to load before it measures anything, which is the difference between an image whose lines end where they should and one that is subtly wrong.

The SVG export is worth knowing about

The layout is a list of tokens with positions, so it can be emitted as vectors as easily as pixels. The SVG holds real text: it stays crisp at any size, it is usually a fraction of the size of the PNG, and the code inside it can still be selected and searched. Each token carries an explicit advance width, so the layout holds even on a machine that does not have the font installed — which is the usual reason an exported SVG of code looks fine on the machine that made it and wrong everywhere else.

Nothing leaves your device

Highlighting, layout and rendering all happen in the tab. That matters more here than for most tools, because the thing you are pasting is frequently unreleased work, a client's code, or a config file with a key in it. There is no endpoint to send it to. The syntax highlighter is fetched once from a CDN and cached; your code is never part of a request.