JavaScript Code Screenshots — What the Highlighter Marks
Modern JavaScript spreads across objects, arrow functions and template strings faster than most highlighters keep up. This page lists exactly which tokens the renderer colours, so a screenshot of a hook or a reducer looks deliberate rather than accidental.
A short JavaScript snippet
// total of a price list
const prices = [12.5, 4, 19.99];
const total = prices.reduce((sum, p) => sum + p, 0);
console.log("Total: $" + total.toFixed(2));
What gets coloured
| Token class | Rule | How it looks |
|---|---|---|
| Comments | // line and /* block */ | Muted, never competing with the code |
| Strings | Single, double and backtick quoted | Distinct from identifiers at a glance |
| Keywords | 44 reserved words | Accent colour, the loudest thing on the page |
| Numbers | Integers and decimals | Same weight as code, no outline box |
| Function calls | Identifier followed by a parenthesis | Slightly heavier than plain identifiers |
Rendering it as an image
Paste the snippet into the tool, pick a theme and an export width. The renderer keeps your indentation, wraps long lines only when you ask it to, and can export either a flat PNG or a transparent one for slides. The default window chrome is optional, so a two-line example does not have to look like a browser window.
Other languages
Frequently asked questions
How many keywords does the JavaScript highlighter know?
It ships a fixed list of 44 words for JavaScript. The list is deliberately flat rather than a full grammar: the tool exists to make a snippet legible in a screenshot, not to type-check it, so contextual keywords that need parsing stay in the plain text colour.
What happens to code the highlighter misreads?
Nothing is rewritten. Highlighting only adds colour spans on top of the exact characters you pasted, so the exported PNG always contains your original text. A keyword inside a string stays a string, and a comment marker inside a string is not treated as a comment.
Try it with your own JavaScript: the Code2Image code to image generator is entirely client-side, so the snippet never leaves the browser.