<xsl:output encoding="utf-8" method="xml" indent="no" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<xsl:param name="doctype" />
<xsl:param name="xml-declaration" />
<xsl:template match="/"><xsl:template>
<html><html>
<head><head>
<title>
Pretty XML tree
<title><style type="text/css">
body, html {
margin: 0;
padding: 0;
}
#info {
background: #ccc;
border-bottom: 3px solid #000;
padding: 1em;
margin-bottom: 2em;
}
#xml-declaration {
font-weight: bold;
}
#doctype {
font-weight: bold;
color: green;
margin: 0;
}
#tree {
font: 13px/1.2 monospace;
padding-left: .4em;
}
.ele {
margin: 2px 0 5px;
border-left: 1px dotted #fff;
}
.ele .ele {
margin-left: 40px
}
.content {
display: inline;
}
div.inline,
div.inline * {
display: inline;
margin: 0;
border-left: none;
}
.name {
color: purple;
font-weight: bold;
}
.a-value {
color: blue;
}
.a-name {
font-weight: bold;
}
.comment {
color: green;
font-style: italic;
}
.text {
white-space: pre;
color: #484848;
}
.pi {
color: orange;
font-weight: bold;
}
.tag {
color: #000;
}
.tag-start, .tag-end {
cursor: pointer;
}
.tag-hover > .tag:last-child, .tag-hover > .tag:first-child {
background: #eee;
}
.tag-hover {
border-left-style: solid;
border-left-color: #ccc;
}
.closed > .content {
display: none;
}
.closed > .tag-start:after {
content: '...';
background: lime;
}
<style><body><body>
<div id="info"><div>
<p>
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<p><div id="tree"><div>
<div id="xml-declaration"><div>
<xsl:value-of select="$xml-declaration" />
<xsl:apply-templates select="processing-instruction()" />
<xsl:if test="$doctype"><xsl:if>
<pre id="doctype"><pre>
<xsl:value-of select="$doctype" />
<xsl:apply-templates select="node()[not(self::processing-instruction())]" />
<xsl:template match="*"><xsl:template>
<div class="ele"><div>
<xsl:if test="(preceding-sibling::text()[normalize-space(.)] or following-sibling::text()[normalize-space(.)]) and not(*)"><xsl:if>
<xsl:attribute name="class"><xsl:attribute>
<xsl:text>
inline
<xsl:text><span id="start-{generate-id(.)}"><span>
<xsl:attribute name="class"><xsl:attribute>
<xsl:text>
tag tag-
<xsl:text><xsl:choose><xsl:choose>
<xsl:when test="node()">
start
<xsl:when><xsl:otherwise>
self-close
<xsl:otherwise><xsl:text>
<
<xsl:text><span class="name"><span>
<xsl:value-of select="name(.)" />
<xsl:apply-templates select="@*" />
<xsl:if test="not(node())"><xsl:if>
<xsl:text>
/
<xsl:text><xsl:text>
>
<xsl:text><xsl:if test="node()"><xsl:if>
<div class="content"><div>
<xsl:apply-templates />
<span class="tag tag-end" id="end-{generate-id(.)}">
<-- Opera bug: disable-output-escaping is necessary -->
<span><xsl:text>
<
<xsl:text><span class="name"><span>
<xsl:value-of select="name(.)" />
<xsl:text>
>
<xsl:text><xsl:template match="@*"><xsl:template>
<xsl:text><xsl:text>
<span class="a-name"><span>
<xsl:value-of select="name(.)" />
<xsl:text>
=
<xsl:text><span class="a-value"><span>
<xsl:value-of select="concat('"', ., '"')" />
<xsl:template match="text()"><xsl:template>
<xsl:if test="normalize-space(.)"><xsl:if>
<span class="text"><span>
<xsl:value-of select="." />
<xsl:template match="comment()"><xsl:template>
<span class="comment"><span>
<xsl:text>
<--
<xsl:text><xsl:value-of select="." />
<xsl:text>
-->
<xsl:text><xsl:template match="processing-instruction()"><xsl:template>
<div class="pi"><div>
<xsl:text>
<?
<xsl:text><xsl:value-of select="name(.)" />
<xsl:text><xsl:text>
<xsl:value-of select="." />
<xsl:text>
?>
<xsl:text>