adding Syntax highlighting to webpages (HTML/php)

Question

Hey guys,

I'm using http://softwaremaniacs.org/soft/highlight/en/ to Syntax highlight HTML. I've got a php loop pulling code from a wordpress. I'm using the pre / code tags in my code and the following loop to pull the code from wordpress.

<?php while (have_posts()) : the_post(); ?>
<p><i><?php the_date(); echo "<br />"; ?> </p></i>
<h2><?php the_title(); ?></h2>    
<p><?php the_content(); ?></p>
<?php endwhile;?>

At the top of my php page I've got the import...

<script type="text/javascript" src="highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>

The test.html on the page works fine but my page doesnt seem to on my web server. Is it something to do with the way I'm dynamically pulling content? How would I make this work?

Answer 1

There are a lot of syntax highlighting Plugins for Wordpress. For Example: http://kpumuk.info/projects/wordpress-plugins/codecolorer/examples/

Answer 2

From the source code

function initHighlightingOnLoad() {
    var original_arguments = arguments;
    var handler = function(){initHighlighting.apply(null, original_arguments)};
    if (window.addEventListener) {
      window.addEventListener('DOMContentLoaded', handler, false);
      window.addEventListener('load', handler, false);
    } else if (window.attachEvent)
        window.attachEvent('onload', handler);
    else
        window.onload = handler;
}

So this will work only once, BUT

You can call the method again by tricking the plugin

hljs.initHighlighting.called = false;
hljs.initHighlighting();

I've tested it on the demo page and seems to work pretty well.

So you might need to call this two lines after you insert new elements on the page.

Answer 3

check if the javascript is sucessfuly being loaded from the server.

also you should take a look in the native php function for highlighting:

http://php.net/manual/en/function.highlight-string.php

Answer 4

A possible alternate approach: use GeSHi to do the syntax highlighting in PHP.

An example from their documentation:

//
// Include the GeSHi library//
include_once 'geshi.php'; 
//// Define some source to highlight, a language to use
// and the path to the language files//
$source = '$foo = 45;
for ( $i = 1; $i < $foo; $i++ ){
  echo "$foo\n";  --$foo;
}';$language = 'php';
 //
// Create a GeSHi object//
 $geshi = new GeSHi($source, $language);
 //
// And echo the result!//
echo $geshi->parse_code();

Answer 5

You could use FSHL (Fast Syntax Highlighter), it's written in PHP, supports common languages, it can be well configured, styled and extended. Give it a try.

The dynamically loaded content should be already highlighted by server, than you wouldn't need to use JavaScript.

If you insist on using client-side highlighting, I suggest using the SyntaxHighlighter by Alex Gorbatchev, it's full featured, very popular and you won't need any additional PHP code.