TypeScript Code Screenshots — What the Highlighter Marks
Type annotations add a second vocabulary on top of the same syntax tree. The highlighter treats interface, type, readonly and implements as keywords, which is what makes a TypeScript screenshot look different from a JavaScript one.
A short TypeScript snippet
interface Invoice {
id: number;
total: number;
}
function withTax(inv: Invoice, rate = 0.2): Invoice {
return { ...inv, total: inv.total * (1 + rate) };
}
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 | 57 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 TypeScript highlighter know?
It ships a fixed list of 57 words for TypeScript. 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 TypeScript: the Code2Image code to image generator is entirely client-side, so the snippet never leaves the browser.