Can't highlight xml syntax with highlight.js

Question

I'm trying to print xml on an html page.

Example:

<-- language: lang-xml -->

<pre><code class="xml">
    <?xml version="1.0"?>
    <response value="ok" xml:lang="en">
        <text>Ok</text>
        <comment html_allowed="true"/>
        <ns1:description><![CDATA[
        CDATA does <not> escape <tags like="this"></tags></not>.
        ]]></ns1:description>
        <a></a> <a/>
    </response>
</code></pre>

I'd like to use highlight.js to highlight code on a page but there's a conflict with xml and html.

I only had success with some php code using <pre><code class="php"></code></pre>, haven't tried with other languages. The only way I found to display xml code is in a textarea, but I'd prefer to show the xml with some sweet syntax-highlighting.

I have made a jsfiddle to illustrate the problem.

Hope you can help.

Answer 1

You should escape angle brackets with < and > when you want to display them literally. Otherwise you have actual markup within your <code> element that browsers try to interpret. This has nothing to do with any JavaScript applied to it.

Answer 2

For what it's worth, Google Prettify does render XML blocks properly (without having to encode them as <.