<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="static/style.css" />
<title>view-source — An XML Source Formatter in XSLT</title>
<style type="text/css">
.element { color: #070; }
.xhtml .tag { color: #044; }
.tag .label { font-weight: bold; }
.attribute .label { font-weight: normal; }
.attribute { color: #700; }
.text { color: #007; }
.attribute-value { color: #404; }
.comment { color: #333; font-style: italic; }
.processing-instruction { color: #044; }
</style>
</head>
<body>
<div id="content">
<a style="opacity: .3" href="http://github.com/Boldewyn/view-source/"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub" /></a>
<hgroup>
<h1>view-<wbr />source</h1>
<h2>An <abbr>XML</abbr> Source Formatter in <abbr>XSLT</abbr></h2>
</hgroup>
<section>
<h2>About <em>view-<wbr />source</em></h2>
<p>
The <em>view-source</em> <abbr>XSLT</abbr> stylesheet takes any
<abbr>XML</abbr> file as input and renders an <abbr>HTML</abbr> view of its
source structure as output.
You can choose, if you want to see an indented version that follows
the structure of the elements, or a version with the original whitespace
preserved.
</p>
<p>
Being an <abbr>XSLT</abbr> stylesheet the advantage of <em>view-source</em>
over other syntax highlighters is its origin in and deep interlocking with the
<abbr>XML</abbr> world. Thus, handling namespaces is natural to it, and the
difference between concepts like “local name” and “qualified name” is right
built into its executing environment.
</p>
</section>
<section>
<h2>Example</h2>
<p>
A certain example is easily explained: Take the source of this page
and run it through <em>view-source</em>. <a href="example.xhtml">The
resulting document</a> is a valid XHTML file.
</p>
<p>
Another example is the <abbr>RSS</abbr> feed of the
<a href="http://twitter.com/w3c"><abbr>W3C</abbr> Twitter account</a>
(abbridged, read at 24<sup>th</sup> Sep. 2010). The feed, transformed with
<em>view-source</em>, looks like this:
</p>
<pre id="source"><span class="highlight element"><span class="tag start"><<span class="label">rss</span> <span class="highlight attribute"><span class="label">version</span>="<span class="attribute-value">2.0</span>"</span>></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">channel</span>></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">title</span>></span><span class="text">Twitter / w3c</span><span class="tag end"></title></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">link</span>></span><span class="text">http://twitter.com/w3c</span><span class="tag end"></link></span></span><span class="text">
</span><span class=" element empty"><span class="tag empty"><<span class="label" title="http://www.w3.org/2005/Atom"><span class="nsprefix">atom</span><span class="nscolon syntax">:</span><span class="local-name">link</span></span> <span class="highlight attribute"><span class="label">type</span>="<span class="attribute-value">application/rss+xml</span>"</span> <span class="highlight attribute"><span class="label">href</span>="<span class="attribute-value"><a href="http://twitter.com/statuses/user_timeline/35761106.rss">http://twitter.com/statuses/user_timeline/35761106.rss</a></span>"</span> <span class="highlight attribute"><span class="label">rel</span>="<span class="attribute-value">self</span>"</span> /></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">description</span>></span><span class="text">Twitter updates from W3C Team / w3c.</span><span class="tag end"></description></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">language</span>></span><span class="text">en-us</span><span class="tag end"></language></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">ttl</span>></span><span class="text">40</span><span class="tag end"></ttl></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">item</span>></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">title</span>></span><span class="text">w3c: RT @scrawford: Tim berners-lee: net neutrality should be an amendment to the constitution - it&apos;s that important #stppICTconf</span><span class="tag end"></title></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">description</span>></span><span class="text">w3c: RT @scrawford: Tim berners-lee: net neutrality should be an amendment to the constitution - it&apos;s that important #stppICTconf</span><span class="tag end"></description></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">pubDate</span>></span><span class="text">Fri, 24 Sep 2010 07:31:53 +0000</span><span class="tag end"></pubDate></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">guid</span>></span><span class="text">http://twitter.com/w3c/statuses/25384071023</span><span class="tag end"></guid></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">link</span>></span><span class="text">http://twitter.com/w3c/statuses/25384071023</span><span class="tag end"></link></span></span><span class="text">
</span><span class=" element"><span class="tag start"><<span class="label" title="http://api.twitter.com"><span class="nsprefix">twitter</span><span class="nscolon syntax">:</span><span class="local-name">source</span></span>></span><span class="text">&lt;a href=&quot;http://identi.ca&quot; rel=&quot;nofollow&quot;&gt;identica&lt;/a&gt;</span><span class="tag end"></twitter:source></span></span><span class="text">
</span><span class=" element empty"><span class="tag empty"><<span class="label" title="http://api.twitter.com"><span class="nsprefix">twitter</span><span class="nscolon syntax">:</span><span class="local-name">place</span></span> /></span></span><span class="text">
</span><span class="tag end"></item></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">item</span>></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">title</span>></span><span class="text">w3c: RDFa API Draft Published http://ow.ly/1981zX</span><span class="tag end"></title></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">description</span>></span><span class="text">w3c: RDFa API Draft Published http://ow.ly/1981zX</span><span class="tag end"></description></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">pubDate</span>></span><span class="text">Thu, 23 Sep 2010 13:27:06 +0000</span><span class="tag end"></pubDate></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">guid</span>></span><span class="text">http://twitter.com/w3c/statuses/25306604005</span><span class="tag end"></guid></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">link</span>></span><span class="text">http://twitter.com/w3c/statuses/25306604005</span><span class="tag end"></link></span></span><span class="text">
</span><span class=" element"><span class="tag start"><<span class="label" title="http://api.twitter.com"><span class="nsprefix">twitter</span><span class="nscolon syntax">:</span><span class="local-name">source</span></span>></span><span class="text">&lt;a href=&quot;http://identi.ca&quot; rel=&quot;nofollow&quot;&gt;identica&lt;/a&gt;</span><span class="tag end"></twitter:source></span></span><span class="text">
</span><span class=" element empty"><span class="tag empty"><<span class="label" title="http://api.twitter.com"><span class="nsprefix">twitter</span><span class="nscolon syntax">:</span><span class="local-name">place</span></span> /></span></span><span class="text">
</span><span class="tag end"></item></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">item</span>></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">title</span>></span><span class="text">w3c: One Web Day and W3C Community Groups http://ow.ly/197jRE</span><span class="tag end"></title></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">description</span>></span><span class="text">w3c: One Web Day and W3C Community Groups http://ow.ly/197jRE</span><span class="tag end"></description></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">pubDate</span>></span><span class="text">Wed, 22 Sep 2010 18:30:08 +0000</span><span class="tag end"></pubDate></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">guid</span>></span><span class="text">http://twitter.com/w3c/statuses/25235054643</span><span class="tag end"></guid></span></span><span class="text">
</span><span class="highlight element"><span class="tag start"><<span class="label">link</span>></span><span class="text">http://twitter.com/w3c/statuses/25235054643</span><span class="tag end"></link></span></span><span class="text">
</span><span class=" element"><span class="tag start"><<span class="label" title="http://api.twitter.com"><span class="nsprefix">twitter</span><span class="nscolon syntax">:</span><span class="local-name">source</span></span>></span><span class="text">&lt;a href=&quot;http://identi.ca&quot; rel=&quot;nofollow&quot;&gt;identica&lt;/a&gt;</span><span class="tag end"></twitter:source></span></span><span class="text">
</span><span class=" element empty"><span class="tag empty"><<span class="label" title="http://api.twitter.com"><span class="nsprefix">twitter</span><span class="nscolon syntax">:</span><span class="local-name">place</span></span> /></span></span><span class="text">
</span><span class="tag end"></item></span></span><span class="text">
<span class="comment">[...]</span>
</span><span class="tag end"></channel></span></span><span class="text">
</span><span class="tag end"></rss></span></span></pre>
</section>
<section>
<h2>Download the Stylesheet</h2>
<p>
The project is hosted at <a href="http://github.com/Boldewyn/view-source">GitHub</a>,
where you can find additional information regarding the stylesheet. From this page,
you can directly download the following packages:
</p>
<ul>
<li><a href="http://github.com/Boldewyn/view-source/zipball/master">The current
development version (“master”)</a></li>
<li>The first <abbr>BETA</abbr> release (<em>not yet published</em>)</li>
</ul>
</section>
<section>
<h2>Other Projects from me</h2>
<p>
To remove nodes of a certain namespace from an <abbr>XML</abbr> document, you
can use any of the three implementations of
<em><a href="http://boldewyn@github.com/rm-ns">rm-ns</a></em>, <abbr>XSLT</abbr>,
Javascript or Python. Stripping <abbr>SOAP</abbr> envelopes or remains of Word’s
<abbr>HTML</abbr> export, these are the tools to tackle the task.
</p>
<p>
<em><a href="http://boldewyn.github.com/unicodeinfo">Unicodeinfo</a></em> is a set
of tools to access the data of the Unicode database. At the moment the collection
consists of a toolset to convert the Unicode Dataset to an SQLite database, and a
Python module with various useful methods to accompany Python’s own <code>unicodedata</code>
library.
</p>
</section>
<section>
<h2>Copyright <span class="amp">&</span> License</h2>
<p>
Copyright © 2010 Manuel Strehl. All rights reserved.
</p>
<p>
The code is dual licensed under an MIT-style and the Gnu Public License,
version 2. You are free to choose any of the two for your project. In
most cases, you can just use the stylesheet, as long as the copyright
statement stays intact.
</p>
</section>
<section>
<h2>The Official <abbr>README</abbr></h2>
<pre>
XML Source View
Syntax highlighting for XML files with XSLT
This stylesheet package contains XSLT styles for syntax highlighting of
arbitrary XML files.
P a r a m e t e r s :
=====================
* format: controls, whether the output should be pretty-printed or tried to be
kept as near as possible to the original source. Default is to apply
formatting.
* base-indent: sets the indentation step for each level, if the output should
be formatted. The default are two spaces.
* style: The name of a stylesheet (without extension) to be used for display.
Note, that the content of the stylesheet, though CSS otherwise, must be
encircled by an element <css/> in the empty namespace.
H o w t o D e p l o y :
===========================
a) in Firefox: Add the following lines to your XML file:
<?xslt-param name="format" select="true()" ?>
<?xml-stylesheet type="text/xsl" href="view-source.xsl"?>
(other browsers don't support <?xslt-param ?>, you have to touch
view-source.xsl itself there.)
b) via a command line XSLT processor:
$ saxon -s:source.xml -xsl:view-source.xsl -o:out.xhtml
$ xalan -IN source.xml -XSL view-source.xsl -OUT out.xhtml
c) inside PHP:
<?php
$xsl = new DOMDocument;
$xsl->load('view-source.xsl');
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl);
$xml = new DOMDocument;
$xml->load('source.xml');
$proc->setParameter('', 'format', TRUE);
$proc->transformToURI($xml, 'file:///tmp/out.xhtml');
?>
d) in Python with libxml2 and libxslt bindings:
#! /usr/bin/env python
import libxml2, libxslt
styledoc = libxml2.parseFile("view-source.xsl")
style = libxslt.parseStylesheetDoc(styledoc)
doc = libxml2.parseFile('source.xml')
result = style.applyStylesheet(doc, {"format": True})
out = open('out.xhtml', 'w')
out.write(result.serialize())
style.freeStylesheet()
doc.freeDoc()
result.freeDoc()
out.close()
L i c e n s e :
===============
The stylesheet is published under an MIT-style license and the GPL v2. Choose
at your liking.
</pre>
</section>
</div>
</body>
</html>