XML Styling with Javascript

What is this?

Most websites have several .xml files that are used by search engines and other services to index and follow the site.

By default, these files look horrible when a human looks at them in a browser. But there is a simple way to make them look better: includes a single Javascript in your XML file!

RSS/Atom Feeds

RSS and Atom news feeds are a great way to get updates from your favorite sites.

Instructions Demo

Sitemaps

Sitemaps (sitemap.xml files) help search engines index your site.

Instructions Demo

Outlines

OPML Outlines are a great way to share the sites in your news feed.

Instructions Demos

How do I use it?

You need to include a <script> tag in your XML file.

At the top of your XML file, it will look like:

<?xml version="1.0" encoding="UTF-8"?>
<data-depends-on-type>
...

Add a new third line so it looks like:

<?xml version="1.0" encoding="UTF-8"?>
<data-depends-on-type>
<script src="https://www.xml.style/xml-file-type/basic.js" xmlns="http://www.w3.org/1999/xhtml"></script>
...

Each type of XML file will have a different script, so replace xml-file-type with either sitemap or opml.

Gotchas

A couple key points that I learned the hard way:

You must serve the page with the content type text/xml.
The namespace declaration (xmlns= above) must be exactly as above.
You must have the </script>. You cannot have just the opening tag even if it ends with />.

Otherwise various browsers will either fail to run the script or complain about invalid XML.