WordPress Syntax Highlighting – Including x86 Support

I wanted to share how to setup WordPress syntax highlighting, since I’ve had people ask me how I format my posts.

WordPress Syntax Highlighting – Introduction

I tried a few different plugins and libraries but kept going back to Google’s prettify.

Google Code Prettify – Installation

First, I setup a local copy of the GitHub repository.

root@wordpress-1gb-nyc1-01:/var/www/html# git clone https://github.com/google/code-prettify.git
Cloning into 'code-prettify'...
remote: Enumerating objects: 2570, done.
remote: Total 2570 (delta 0), reused 0 (delta 0), pack-reused 2570
Receiving objects: 100% (2570/2570), 16.34 MiB | 0 bytes/s, done.
Resolving deltas: 100% (1778/1778), done.
Checking connectivity... done.

With the repository cloned, I had to make some modifications to include it with WordPress.

WordPress Modifications

First, I changed my theme’s functions.php to enqueue the run_prettify.js script. Note that I pointed it towards my local copy of the script, instead of the recommended rawgit location.

<?php

...

add_action('wp_enqueue_scripts', 'google_prettify');

function google_prettify() {
    wp_enqueue_script('google-prettify', 'https://www.doyler.net/code-prettify/loader/run_prettify.js?lang=css&skin=sons-of-obsidian', array(), false, true);
    //wp_enqueue_script('google-prettify', 'https://cdn.rawgit.com/codygray/code-prettify/master/loader/run_prettify.js?lang=css&skin=sons-of-obsidian', array(), false, true);

}

?>

Code Modifications

Next, I updated the owner to be www-data for the local directory, to prevent any access issues.

root@wordpress-1gb-nyc1-01:/var/www/html# chown -R www-data:www-data code-prettify/

In addition to the functions.php changes, there were still a few references to rawgit in the script.

root@wordpress-1gb-nyc1-01:/var/www/html# grep "cdn.rawgit.com" code-prettify/loader/run_prettify.js
g=null)};g.type="text/javascript";g.src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-"+encodeURIComponent(H[l])+".js";N.insertBefore(g,N.firstChild)})(H[l]);for(var S=H.length,F=[],l=0,B=P.length;l<B;++l)F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/skins/"+encodeURIComponent(P[l])+".css");F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css");(function(g){function r(l){if(l!==x){var k=z.createElement("link");k.rel="stylesheet";k.type=

Using my terrible sed skills, combined with some Google, I was able to replace the references to my local version of the script.

root@wordpress-1gb-nyc1-01:/var/www/html# sed -i 's|https://cdn.rawgit.com/google/code-prettify/master/|https://www.doyler.net/code-prettify/|g' code-prettify/loader/run_prettify.js

I then verified that all the lines of code from the previous result were correctly changed, and that there were no more rawgit references.

root@wordpress-1gb-nyc1-01:/var/www/html# grep "https://www.doyler.net" code-prettify/loader/run_prettify.js g=null)};g.type="text/javascript";g.src="https://www.doyler.net/code-prettify/loader/lang-"+encodeURIComponent(H[l])+".js";N.insertBefore(g,N.firstChild)})(H[l]);for(var S=H.length,F=[],l=0,B=P.length;l<B;++l)F.push("https://www.doyler.net/code-prettify/loader/skins/"+encodeURIComponent(P[l])+".css");F.push("https://www.doyler.net/code-prettify/loader/prettify.css");(function(g){function r(l){if(l!==x){var k=z.createElement("link");k.rel="stylesheet";k.type=

Finally, I restarted Apache and was ready for syntax highlighting

root@wordpress-1gb-nyc1-01:/var/www/html# service apache2 restart

Adding x86 Support

Unfortunately, the prettify library doesn’t support x86 syntax highlighting out of the box.

That said, there was an open pull request to add x86 support to the repository.

Instead of cloning the older version, I manually updated the files referenced in codygray’s commits.

root@wordpress-1gb-nyc1-01:/var/www/html/code-prettify# vi README.md
root@wordpress-1gb-nyc1-01:/var/www/html/code-prettify/src# wget https://raw.githubusercontent.com/google/code-prettify/89091a2f84e7adb78f0046cf178701b0c211b21f/src/lang-x86.js
root@wordpress-1gb-nyc1-01:/var/www/html/code-prettify# vi tests/prettify_test_2.html
root@wordpress-1gb-nyc1-01:/var/www/html/code-prettify# vi tests/prettify_test_2.js
root@wordpress-1gb-nyc1-01:/var/www/html# vi wp-content/themes/pilcrow-child/functions.php

Next, I modified my functions.php to properly add the language parameter in addition to the skin. Note: wp_enqueue_script doesn’t seem to properly support multiple parameters with the same name, so the ‘lang=css’ ends up dropped in the final source.

function google_prettify() {
    $args = array(
        'lang' => 'css',
        'lang' => 'x86',
        'skin' => 'sons-of-obsidian'
    );
    wp_enqueue_script('google-prettify', add_query_args($args, 'https://www.doyler.net/code-prettify/loader/run_prettify.js'), array(), false, true);

Finally, I updated my Shellcode Crypter post by manually specifying the language to highlight.

<pre class="prettyprint lang-x86">

As you can see, the CSS now properly performs syntax highlighting, and my posts look much better!

WordPress Syntax Highlighting – Conclusion

While this wasn’t directly security related, it was fun to setup on my local instance.

I still have to update all of my other posts, but that should be a fairly easy fix.

Let me know if you use anything else for syntax highlighting, or if you have any suggestions!