How can I do syntax highlighting for files included with a custom shortcode?

Question

I'm writing a tutorial on using the R language to do some applied statistics. An example post is:

http://mcmcinirt.stat.cmu.edu/archives/223

This answer taught me how to develop a custom shortcode so that I can include files stored on the webserver directly into the post. It works great.

However, if possible, I'd like to have syntax highlighting too instead of 'just' the <pre> tag rendering.

My initial attempt was to change the output of the shortcode function from:

return '<pre>'.$file.'</pre>';

to

return '<pre class="lang:r">'.$file.'</pre>';   

so that the CSS defined for the Crayon Syntax Highlighter would take over.

However, that doesn't work because Crayon seems to take a <pre> tag and replace it with a lot of other divs e.g. <div class="crayon-line crayon-striped-line" ...> which are what the CSS is actually for.

Is there a way to force Crayon to run after my shortcode so that the text included by the shortcode gets appropriately processed? Or do I need a different solution entirely? Perhaps a different syntax highlighter?

Also, FWIW, I'd rather have non-duplicated code than pretty code. I figure it doesn't hurt to ping the experts though.

Answer 1

I had a similar issue with WP-Syntax and solved by applying the_content filter in the Shortcode returned values. It would go like:

function my_shortcode( $atts, $content )
{
    $code = '<pre class="lang:r">' . $file . '</pre>';   
    return apply_filters ( 'the_content', $code );
}