Code to Image

Images are good for slides, social posts, blog headers and anywhere the code is being shown rather than used. They are the wrong choice when someone needs to copy the code — an PNG cannot be selected, searched, or read by a screen reader. In documentation and READMEs, a fenced code block is almost always better; save the image for the places that cannot render one. If you need both, the SVG export keeps the code as real, selectable text.

The snippet is tokenised with a syntax highlighter, every run of text is measured, and the result is drawn onto a canvas (or written as SVG) rather than screenshotted from the page. Measuring matters: Chinese, Japanese and Korean characters and emoji are wider than other letters, and assuming a fixed width would push the rest of the line out of place. Because the preview and both exports come from the same layout, what you download is exactly what you saw. The text uses the same monospace font on every machine, so the image does not change with whatever fonts happen to be installed.

Ten editor themes are included — One Dark, Dracula, GitHub Dark and Light, Nord, Monokai, Tokyo Night, Catppuccin Mocha and Solarized Dark and Light — and any of them can sit on any background. For presentations, a light theme usually projects better than a dark one, since projectors wash out dark backgrounds. For social posts the reverse tends to be true. Font size matters more than theme: 16px or larger survives being viewed on a phone.

The most common mistake is pasting too much. An image of forty lines is unreadable at the size most people will see it. Ten to fifteen lines showing one idea works far better — trim the imports, drop the error handling, and keep only the part you are actually talking about. Highlighting the two or three lines that matter helps more than any theme. Code copied from deep inside a file keeps its indentation; “Remove common indent” shifts it back to the left edge.