XML Syntax Highlighter

How to use the XML Syntax Highlighter

Paste your XML or click Sample.

Choose a Theme (Light or Dark) and an Indent.

Click Highlight and check the result in the Preview tab.

Tick Output embeddable HTML to get a <style> block and a <pre> snippet in the Code tab, then copy it into your page.

An XML syntax highlighter that outputs plain HTML

When you publish XML in a blog post, a README rendered as HTML, an internal wiki or a slide, uncolored markup is hard to read. This XML syntax highlighter formats the document first and then wraps each part in a span with a color class, producing static HTML that needs no JavaScript library on the page where you paste it.

What gets colored

Tag names, attribute names and attribute values, each in its own color
Punctuation such as <, /> and = in a muted tone
Comments in italics
The XML declaration, processing instructions and DOCTYPE
CDATA sections

The Light theme uses a white background with dark red tags and blue values, a classic IDE look. Dark uses a charcoal background with blue tags and orange values, similar to popular dark editor themes.

Preview and embed

With Output embeddable HTML off, the Code tab shows the formatted XML and the Preview tab shows the colored rendering. Tick the option and the Code tab contains the HTML to paste instead: a <style> block followed by a <pre class="xml-hl"> element. For <to lang="en">Ava</to> the markup part is:

<pre class="xml-hl"><span class="p">&lt;</span><span class="t">to</span> <span class="a">lang</span><span class="p">=</span><span class="v">"en"</span><span class="p">&gt;</span>Ava<span class="p">&lt;/</span><span class="t">to</span><span class="p">&gt;</span></pre>

If you click Download while the Preview tab is open, you get the complete colored page as an .html file.

The classes are short: t for tags, a for attribute names, v for values, c for comments, p for punctuation and i for declarations and processing instructions.

Before you paste it into a site

The generated <style> block also sets body margin and background colors and styles every pre element. That is fine for a standalone page, but on an existing site you will usually want to delete the body rule and prefix the other selectors, for example .xml-hl .t instead of .t, so they do not clash with your own CSS. Some blog platforms strip <style> tags from posts; in that case, add the rules to your theme's stylesheet once and paste only the <pre> snippet.

The output is static, so there is no copy button or line numbering. If you need those, a client-side library on your site is the better choice.

Formatting comes first

The input is formatted with your Indent before it is colored, so a minified document is published in readable form. It also has to be well-formed; otherwise you get the usual error with line and column. To highlight other languages such as JSON, CSS or Python, use the general code highlighter. For JSON specifically, see JSON syntax highlighting, and if you just want readable text without colors, the XML pretty print page is enough.

Frequently asked questions

Does the highlighted HTML need JavaScript?

No. The output is static HTML with CSS classes, so it displays correctly on any page that includes the style rules, even with scripts disabled.

Can I change the colors?

Yes. Edit the color values in the generated style block. Each token type has its own class, so changing .t, .a or .v recolors tags, attribute names or values.

Why did my blog remove the colors?

Some platforms strip elements from post content. Add the CSS rules to your site theme instead and paste only the part into the post.

Can I highlight XML that is not well-formed?

No. The document is parsed and indented before it is colored, so broken markup produces an error with its line and column instead of a result. Fix the reported spot first; the XML validator explains the usual causes.