Code Snippet → Image
Turn code into a crisp share-card PNG with syntax highlighting, window chrome and line numbers — with a note on when not to use one.
Highlighting is a general-purpose tokenizer (keywords, strings, numbers, comments, calls) that handles most C-like languages, Python and SQL well enough for a share card. Rendered at 2× for crisp social-media display; nothing leaves your browser.
The comment rule that somehow knows about CSS
The highlighter has no idea what language it is looking at, so it guesses from punctuation. Four things start a comment somewhere — //, #, -- and ;; — and taking those at face value would destroy CSS, where #fff is a colour and --main-color is a property.
| Line | Treated as | Why |
|---|---|---|
| -- a note | comment | SQL comment, space after the dashes |
| --main-color: red; | code | CSS custom property, letter after |
| # a note | comment | Python comment |
| #fff | code | CSS hex colour, letter after |
| // a note | comment | C-style comment |
| ;; a note | comment | Lisp comment |
All six come out right, from a single clause: the marker must not be followed by a letter. One character decides it — -- x is a comment and --x is not, and the same for the hash. Swept across the whole alphabet, no letter after either marker produces a false comment. It is the kind of thing that looks like an accident and is not.
Strings are taken whole, before anything else is looked for
The loop consumes strings, escapes included, before it looks for keywords or comment markers — so their contents are inert. const a = "// not a comment"; keeps the slashes inside the string, and const b = "select from where"; contains three SQL keywords, none of which is highlighted. The order of the checks is doing all of that work. Move the keyword pass earlier and every quoted word in the file would light up. Escaped quotes do not end a string early, and an unterminated one stops at the end of the line rather than swallowing the rest of the snippet.
Where it cannot win is the keyword list, which is the union of several languages. Words like map, type, string, in are keywords somewhere, so a Python file using map as a variable will see it coloured, and a JavaScript file with a variable called select will too. That is the price of one tokeniser for every language, and for a picture of a snippet it is the right trade: a wrong colour is a cosmetic error, and a missing one makes the picture look broken.
The property that matters most
Whatever the highlighter decides about colours, it must not alter the code — a picture of a snippet that has quietly lost a character is worse than one with no colour at all. Joining every token back together reproduces the input line exactly, checked across comments, strings, template literals, escaped quotes, CSS properties, blank lines and whitespace-only lines. No token is ever empty. Numbers are kept whole too, so 3.14 and 1e-9 are one token each — and the digits in sha256 are correctly not a number at all.
How to use
- Paste your code and pick the language.
- Choose a theme and window style.
- Keep the snippet short enough to read.
- Download the image.
Frequently asked questions
When should I not use a code image?
Whenever someone might need to copy the code, which is most of the time. An image cannot be copied, searched, read by a screen reader, or translated, and it does not reflow on a phone. For documentation and answers, real text in a code block is strictly better.
So what are these good for?
Social posts and slides, where the platform will not render a code block properly anyway and the point is a glance rather than reuse. That is a genuine use, and it is narrower than how widely these images get used.
How long should the snippet be?
Short enough to read at the size it will be viewed. A dozen lines is usually the practical limit for a social image, and anything longer becomes unreadable on a phone — which is where most people will see it.
Should I include line numbers?
Only if you intend to refer to them. They add visual noise and, on an image, they are the one thing that actively prevents someone transcribing the code by hand. For a self-contained snippet they usually subtract.
Does the theme matter?
For legibility, yes. High-contrast themes read far better when the image is scaled down in a feed, and the low-contrast themes that look elegant on a large monitor frequently become mush as a thumbnail.
Does my code get uploaded?
No. The image is rendered in your browser, so code that might contain internal details or credentials never leaves your device — which is worth knowing, since code snippets shared publicly leak secrets with some regularity.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.