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

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.

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.

• syntax-highlighting
• plugin-syntaxhighlighter

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Oct 14, 2013 at 23:37 Nathan VanHoudnosNathan VanHoudnos 13555 bronze badges 2

• Not sure if your Question is a duplicate or not, check it out. – brasofilo Commented Oct 14, 2013 at 23:45
• @brasofilo As I understand the other question, their question is about how to write their own syntax highlighter. My question is how to use a syntax highlighter for an external file. – Nathan VanHoudnos Commented Oct 14, 2013 at 23:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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