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 image 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.

The snippet is tokenised with a syntax highlighter and drawn directly onto a canvas, rather than being screenshotted from the page. Because the preview and the exported file come from the same drawing code, what you download is exactly what you saw. The canvas is rendered at twice the display size, so the PNG stays sharp on high-density screens and when scaled up in a slide.

Five editor themes are included — One Dark, Dracula, GitHub Dark, GitHub Light and Nord. 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.