Code to Image

Sharing a code snippet as plain text loses a lot: no formatting, no visual hierarchy, and it often looks cramped or ugly when pasted into a chat app or social media post that was not designed for code. Turning a snippet into an image instead — a small card with a dark or light background, a monospace font, and optional line numbers — has become a common way to share code on Twitter/X, in presentation slides, in documentation, or in a README, because it renders identically everywhere an image can be displayed, regardless of whether the platform supports code formatting. This tool builds that image by drawing directly onto an HTML canvas element: a background "stage", a rounded card with a soft drop shadow sitting on top of it, a small header bar with three coloured dots (a nod to the traffic-light window controls found on macOS-style code editor screenshots) and your language label in the corner, and then your code rendered line by line in a monospace font below. The whole thing is rendered at twice the display resolution internally before being exported, so the downloaded PNG stays crisp even when viewed at a larger size or on a high-density display. A deliberate scope decision worth being upfront about: this tool does not attempt full syntax highlighting. Properly tokenizing and colouring arbitrary code correctly across dozens of programming languages is a substantial undertaking on its own (it is effectively what dedicated syntax-highlighting libraries exist to do), and attempting a partial, inconsistent version of it would likely look worse than no highlighting at all — a snippet with three keywords highlighted and everything else plain reads as broken, not stylish. Instead, this tool offers a smaller, honest set of features: a clean monospace rendering, a genuinely nice card/shadow presentation, and a simple heuristic that dims lines starting with // or # (the comment prefixes for the large majority of mainstream languages), which captures a meaningful amount of the visual benefit of highlighting — separating commentary from code — without pretending to understand the language you typed. The "language" field is intentionally free text rather than a fixed dropdown tied to actual parsing logic: it exists purely as a cosmetic label shown in the top-right corner of the card, the same way a code screenshot tool or editor tab often shows a filename or language name. Type whatever is accurate or useful to you — a language name, a filename, or nothing at all. Because very long lines would otherwise produce an enormous, unwieldy image, the rendered width is capped at 900 pixels of content — long lines will wrap visually within that width rather than stretching the canvas indefinitely. This mirrors the same practical width cap used by other canvas-based tools in this toolbox, and keeps exported files a reasonable, shareable size.