Easy Jquery Syntax Highlighter

Searching for a proper syntax-highlighter for my Wordpress Blog is not an easy thing. Many of them support only a few browsers, mass around with XHTML standards or make extensive use of libraries like prototype I don't want to add to my site.

Finally I found a jquery based syntax highlighter which requires only one file in the latest version. It is really easy to integrate into a Wordpress template and doing it the smart way it is only loaded if you need it. After installing it to your website you just need to add the following to you jQuery document.ready function:

$(function ($) {
    var SyntaxRoot = template_directory+"/jquery-syntax/";
    if ($(\'.syntax\').length) {
        $.getScript(SyntaxRoot + "jquery.syntax.min.js", function () {
            $.syntax({root: SyntaxRoot});
        });
    }
});

In order to use different jQuery Plugins I added my Template directory as a variable for javascript into the Wordpress header:

<script type="text/javascript" charset="utf-8">
var template_directory = "<?php echo get_bloginfo('template_directory'); ?>";
</script>

In Wordpress I use a php Plugin which enables to write php in every Post. With the following function in my Wordpress Theme template.php I can copy and paste my code right into a post by using

/* Highlight code */
function codeIt($text, $brush="html"){
  echo '<pre class="syntax brush-' . $brush . '"<' . "\n" . htmlentities($text) . "\n</pre>";
}

I set the default brush to html (which recognizes basic <css...> and <script...> tags and optionally overwrite it with the used language. The only drawback i need to quote all single ' with a Slash to \'

Please note: this post is horribly outdated.