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)

Answer 1

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>