WordPress Plugin for Code Highlighting

I couldn’t find a suitable code highlighting plugin for WordPress. I wanted simple features, e.g. keeping line breaks, some syntax highlighting, possibly line numbers, basically something a little better than HTML5’s <code> tag (which just adds a monospace font) but nothing too heavy.

After a quick search I found highlight.js, an awesome little javascript library that even has a couple of CDN’s for both the JS and CSS files. What better way to celebrate this find than to stick it in a WordPress plugin?

NB. My setup is a vanilla Vagrantpress install, all development is done locally.

First I create the folder I want, which means deciding on a name! Avoid spaces.

/wordpress/wp-content/plugins/simple-code-highlighter

now create a file within that folder with a name that matches the folder, in this case, that would be simple-code-highlighter.php.

Next, lets add the plugin info and the absolute path blocker (a security measure which stops the file being run on it’s own).

/*

Plugin Name: simple code highlighter
Plugin URI: http://stuartmason.co.uk/sch
Author: Stu Mason
Author URI: http://www.stuartmason.co.uk/
Description: PHP & JS Syntax highlighter
Version: 0.1.0
Text Domain: Stucode
License: GPL version 2 or later - http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
defined( 'ABSPATH' ) or die( 'No script kiddies please!' ); //stop the code being run by itself  

Awesome! If you went into your dashboard now, you’d be able to see this plugin sat there waiting to be activated. It would do nothing though, so… next bit!

Let’s just use the CDN for now, we can come back to this later one, just like in the functions file, we want to enqueue the JS script – let’s put it in the page footer to help speed up page load.

function load_highlight_js()

{
// grabbing it from the CDN for now...
wp_register_script( 'highlight_js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js' , ('jQuery') , true );
// queue it
wp_enqueue_script( 'highlight_js' );
}
add_action('wp_enqueue_scripts', 'load_highlight_js');

Awesome. For testing purposes, why not activate your plugin and go view your sites source – you should now see highlight.min.js has been successfully loaded!

Next, let’s add some CSS to it…

function load_highlight_css()

{
// grab the shit from CDN again
wp_register_style( 'highlight_styles' , '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css' );
// queue it
wp_enqueue_style( 'highlight_styles' );
}
add_action('wp_enqueue_scripts','load_highlight_css');

Once you’ve added this, go and check your site – you’ll see the default.min.css is loading successfully right there in the header. Awesome right? Yeah. I know.

Next, let’s initialise the javascript – to do this, we need to stick a small script in the footer below the JS file we’ve queued up. Again, very easy thanks to the WordPress hooks.

//initialise the hightlight JS

function initialise_highlight_js()
{
echo '<script>hljs.initHighlightingOnLoad();</script>';
}
add_action('wp_footer', 'initialise_highlight_js');

OK – so, we’ve successfully integrated highlight.js into our site through the plugin. Skills. Now, how the hell are we going to use it? Shortcodes Obv! You know how easy it is to make the shortcodes needed for this?

function stucode_shortcode( $atts, $content = null ) {

if(!isset($atts['language'])) {
$atts['language'] = 'php'; //
}
return '<pre><code class="' . $atts['language'] . '">' . $content . '</code></pre>';
}
add_shortcode( 'code', 'stucode_shortcode' );

What does this mean? This means that whenever someone uses the shortcodes

[code]]$someCode = ‘here'[[/code]

WordPress picks it up and the tags that highlight.js needs. Keen eyed will notice the attribute ‘language’ – highlight.js can handle quite a few different languages and so I wanted the ability for people to state this when calling the shortcode with the ‘language’ variable – you’ll also notice it defaults to PHP.

And thats it – simple eh? We’ve added a couple of scripts to the sites pages, the ability for wordpress to pick up the shortcode [[ code ]].

What’s next?

Well – I’m going to take those files out of the CDN and minimise them to the languages I need (Web languages!), I also want to add line numbers.