call function to highlight code

Question

Hello. Please see the the following http://valogiannis.com/recent/ .I have a webpage and when user click XHTML code a div with id result loads the contents of a webpage (in this case codes/advocasys.html). In fact what I wish to do is to highlight the html code. I have link the necessary css/js. I use the SyntaxHighlighter 3.0.83. This highlighter needs to call the SyntaxHighlighter.all() after the <pre> tag (more info here). If I have the html code in the same page which I want to highlight works nice, but I cannot make it to work, when the script loads the external page advocasys.html. I tried to put the

 <script type="text/javascript">
     SyntaxHighlighter.all()
</script>

in the bottom of the advocasys.html, but It didn't work. How can I make it work?

Thanks in advance.

Answer 1

The .all() call attaches an event handler to window.load which already happened, instead use .highlight(), like this:

SyntaxHighlighter.highlight();

Answer 2

You need to call SyntaxHiglighter in the callback function after the data is returned:

$('#myLink').click(function(){
   $('#result').load('codes/advocasys.html', function() {
       $('#result').show();
       $('.scroll-pane').jScrollPane(); 
       SyntaxHighlighter.highlight();
   });

   return false;

});