javascript - Links inside highlight.js code -

i'm using highlight.js show code on website. make parts of highlighted code links. link not processed , represented code.

this how code highlighted:

<xml attribute="value">my <a href="test.html">xml content</a> should clickable (link)</xml> 

but have this, , word content link:

<xml attribute="value">my content should clickable (link)</xml> 

i use highlight.js specified in documentation this:

<script src="highlight.pack.js"></script> <script>hljs.inithighlightingonload();</script> <pre><code id="mycode"><xml attribute="value">my <a href="test.html">content</a> should clickable (link)</xml></code></pre> 

how can use links inside highlighted xml code?

information! found out problem occurs because i'm changing content ajax call receive json containing whole code:

        $.ajax({         url: 'getcode',         data: {id: id},         datatype: 'json',         type: 'get',         cache: false,         success: function(node) {             $("#mycode").text(node.code);             $('#mycode').each(function(i, e) {                 hljs.highlightblock(e)             });         } 

i think problem current code it's using jquery's $(obj).text() instead of $(obj).html(). .text() escapes text creating textnode , appending that. handy showing user-submitted data. mean links shown code instead of html.

for that, need use html, then, won't show xml tags anyway browser thinks html tag. need escape xml tags, leave anchors/links html code. like

var code= var code='xmlcodehere' //let's data ajax return var escapedcode=code.replace(/</g,"&lt;") //rough escaping of code //rough unescaping of anchors var escapedcodenotanchor=escapedcode.replace(/&lt;a /g,"<a ")   escapedcodenotanchor=escapedcodenotanchor.replace(/&lt;\/a>/g,"</a>")  $("#mycode").html(escapedcodenotanchor) //instead of .(text) 

example