JSON Code Screenshots — What the Highlighter Marks
JSON has almost no vocabulary, which is why a JSON screenshot is mostly punctuation. Only true, false and null count as keywords; the double-quoted keys and values stay in the string colour, so structure comes from indentation rather than hue.
A short JSON snippet
{
"theme": "saffron",
"width": 1200,
"padding": 48,
"filename": "snippet.png",
"transparent": false
}
What gets coloured
| Token class | Rule | How it looks |
|---|---|---|
| Comments | No comment syntax | Muted, never competing with the code |
| Strings | Double quoted only | Distinct from identifiers at a glance |
| Keywords | 3 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 JSON highlighter know?
It ships a fixed list of 3 words for JSON. 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 JSON: the Code2Image code to image generator is entirely client-side, so the snippet never leaves the browser.