How can i display indented XML inside HTML code tag

Question

I want to display indented XML in a html page inside <code></code> I am getting the XML as from the javascript function

new XMLSerializer()).serializeToString(newXMLDoc)

which gives me unintended XML String.

One way that I can think is doing this is using <ul> and <li>

But is there a better way of doing this ?

Can XSLT help me in this case ( sorry I don't know much about XSLT).If yes where do I need to attach the XSLT style sheet , in the html document or in the xmlString that i am appending to the <code></code> tag.

Its only a client side app I can not do anything on the server side.

UPDATE: I am also replacing the < and > in the xmlString with < and > can i still use XSLT ?

Even after applying the XSLT given by Dimitre Novatchev I am not getting the indented text,though I can see the XML getting indented while I apply the XSLT using SAXON parser kernow but when i am doing it in my javascript code I am getting the same unindented code.

    //var xslt contains the XSLT provided by Dimitre Novatchev as string
    //var XMLDoc is the XMLDocument object to be transformed
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    newXMLDoc = xsltProcessor.transformToDocument(xml,document);
    //This is how I am converting the transformed XML to string 
    return (new XMLSerializer()).serializeToString(newXMLDoc)

score 6 · Answer 1 · answered Dec 03 '11 at 12:20

6

I suggest that you use server-side code to do this, and send HTML formatted XML to your client. Yeah, XSLT can help you. But you should HTML encode your XML at server.

However, please note that if you are removing \n marks (line feed characters) and other whitespace characters from your document (like spaces, tabs, etc.), then you need to search for something like client-side document formatter, or stuff like that. Writing such a thing is never an easy task.

Also you can use a syntax highlighter for XML. One good example could be found here. Then you can simply use:

<pre class='brush: xml;'>
   // XML goes here.
</pre>

answered Dec 03 '11 at 12:20

Saeed Neamati

35,341
41
136
188

Its just a client side app i don't have any server side code and I am already using google-code prettify for pretty printing xml but it only provides syntax highlighting. – Bunny Rabbit Dec 03 '11 at 12:27
Then have a look at [this](http://stackoverflow.com/questions/376373/pretty-printing-xml-with-javascript) question. – Saeed Neamati Dec 03 '11 at 12:29
what is meant by html encoding the XML ? and do i need to attach the xslt to the xml document or in the head of the html ? – Bunny Rabbit Dec 03 '11 at 12:31
No, that was for server-side solution. :) – Saeed Neamati Dec 03 '11 at 12:32
so i have just two questions now 1) I am also replacing the < and > in the xmlString with < and > can i still use XSLT ? 2) where do i need to attach the XSLT – Bunny Rabbit Dec 03 '11 at 12:34

score 4 · Accepted Answer · answered Dec 03 '11 at 18:05

You can do this in two steps:

First, just process the XML document with the identity transformation and with an <xsl:output indent="yes"/> instruction:

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

    <xsl:template match="node()|@*">
      <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

When applying this transformation on any XML document (e.g. this one):

<root><node/></root>

most XSLT processors (.NET XslCompiledTransform, Saxon 6.5.4 and Saxon 9.0.0.2, AltovaXML) produce the wanted result:

<root>
  <node />
</root>

The second step is to perform a string replace operation on the result so that any < character is replaced with the < string.

In case you want a fancier-formatted display, do have a look how the XPath Visualizer does this with XSLT.

This suggested solution works perfectly (thanks for the Dimitre), but for all who is using .NET please check this link, as By default XmlWriter does not indent your xml, and won't automatically use the settings speicifed in your xslt. https://stackoverflow.com/a/5931224/1305893 — Sufyan Jabr, Jul 02 '19 at 05:04

How can i display indented XML inside HTML code tag

2 Answers2