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

Question

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

Nathan VanHoudnos

2019年7月30日 21:02

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.

Topic syntax-highlighting plugin-syntaxhighlighter Wordpress

Category Web

brasofilo · Accepted Answer · 2013年10月15日 00:31

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 );
}

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

About