HTML/XML Code Screenshots — What the Highlighter Marks
Markup is coloured by tag rather than by keyword: element names, attribute names and comment blocks each get their own treatment, which keeps deep nesting legible even at thumbnail size.
A short HTML/XML snippet
<section class="card"> <h2>Weekly report</h2> <p>Revenue rose 12% week over week.</p> <!-- figures from the finance export --> </section>
What gets coloured
| Token class | Rule | How it looks |
|---|---|---|
| Comments | blocks | Muted, never competing with the code |
| Strings | Quoted attribute values | Distinct from identifiers at a glance |
| Keywords | 0 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 HTML/XML highlighter know?
It ships a fixed list of 0 words for HTML/XML. 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 HTML/XML: the Code2Image code to image generator is entirely client-side, so the snippet never leaves the browser.