Search code examples
xmlxsltoutputsyntax-highlightingpre

Displaying a block of XML - tags/nodes and its content - using XSLT (for Syntax Highlighting)


Is there a way to display an XML block - nodes and all - using XSLT? We're building a site that allows us to display raw code using Syntax Highlighter. The only problem is, our CMS generates XML, and some of the code being placed in the CMS for this website is XML, so it's combining what's supposed to be raw XML with the site's generated XML.

Here's the XML snippet:

<custom-xml>
    <menu-item>
        <title>Home</title>
        <link-type>Cascade Page</link-type>
        <page type="page">
            <content/>
        </page>
        <external-url/>
        <new-window/>
        <alignment>left</alignment>
    </menu-item>
    <menu-item>
        <title>Twitter</title>
        <link-type>External URL</link-type>
        <page>
            <path>/</path>
        </page>
        <external-url>http://twitter.com</external-url>
        <new-window/>
        <alignment>right</alignment>
    </menu-item>
</custom-xml>

Everything within (but not including) the <custom-xml> tags needs to be printed.

Here's the XSLT I've tried:

<xsl:when test="text-type = 'XML'">
    <div>
        <pre class="brush: xml;">
                <xsl:value-of select="custom-xml"/>
        </pre>
    </div>
</xsl:when>

I even tried to get creative:

<xsl:when test="text-type = 'XML'">
    <div>
        <pre class="brush: xml;">
                &lt;<xsl:text>![CDATA</xsl:text><xsl:text>[</xsl:text><xsl:value-of select="custom-xml"/><xsl:text>]]</xsl:text>&gt;
        </pre>
    </div>
</xsl:when>

... and this is the output I want:

<div>
    <pre class="brush: xml;">
        <menu-item>
            <title>Home</title>
            <link-type>Cascade Page</link-type>
            <page type="page">
                <content/>
            </page>
            <external-url/>
            <new-window/>
            <alignment>left</alignment>
        </menu-item>
        <menu-item>
            <title>Twitter</title>
            <link-type>External URL</link-type>
            <page>
                <path>/</path>
            </page>
            <external-url>http://twitter.com</external-url>
            <new-window/>
            <alignment>right</alignment>
        </menu-item>
    </pre>
</div>

Solution

  • Was able to figure it out... saw this post: https://stackoverflow.com/questions/25258717/how-can-i-output-raw-xml-data-if-my-xsloutput-method-html-in-a-xslt-file?rq=1

    I replaced <xsl:value-of select="custom-xml"/> with <xsl:copy-of select="custom-xml/node()"/>and it worked like a charm. :)