Home » WordPress » WordPress DIY: Adding Syntax Highlighting to your WordPress Blog Without using an External Plugin

About Prahlad Yeri

Prahlad Yeri
Prahlad is a freelance software developer working on web and mobile application development. He also likes to blog about programming and contribute to opensource.

WordPress DIY: Adding Syntax Highlighting to your WordPress Blog Without using an External Plugin

Just as my other articles in WordPress DIY series, this one also focuses on doing everything yourself by writing the code rather than using any external dependencies.

There are two popular open source implementations of Syntax Highlighting JavaScript libraries: Google’s Prettify and Alex Gorbatchev’s Syntax Highlighter, and in this article, we will use the former.

Writing your own plugin for syntax highlighting is very straightforward if you know what you are doing.

Just create a file named /wp-content/plugins/wp-prettify.php in your WordPress installation and add the below code to it:

<?php
/**
 * @package WP Prettify
 * @version 0.1.0
 */
/*
Plugin Name: WP Prettify
Plugin URI: http://github.com/prahladyeri/wp-prettify
Description: WordPress implementation of Google Prettify Syntax Highlighter
Author: Prahlad Yeri
Author URI: https://www.prahladyeri.com/
Version: 0.1.0
License: GPL version 2 or later - http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/


function add_syntax_highlighter() {
$text=<<<EOD
<script>
document.addEventListener('DOMContentLoaded', function(){
	var elements = document.getElementsByTagName('pre');
	for(var i=0;i<elements.length;i++) {
		if (elements[i].className.indexOf("prettyprint") == -1) {
			elements[i].className =   elements[i].className + " prettyprint "
			console.log('adding');
		}
		else {
		  console.log('class already exists');
		}
	}
});
</script>
<style>
pre.prettyprint.prettyprinted {
  border: 0px;
  padding: 5px;
  font-size: 15px;
}
</style>

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
EOD;

	echo $text;
}

add_action('wp_head', 'add_syntax_highlighter');
?>

Remember to enable the plugin by navigating to /wp-admin before using it.

This function first adds a prettyprint class to all your <pre> tags to tell the Prettify library to highlight this block and thus making syntax highlighting painless on your part. The advantage of using Google’s solution is that it automatically detects the programming or scripting language inside the block, and you don’t have to use additional tag markup like “lang=php” or something like that.

The addition of CSS <style> tag in the function is optional and not really needed. Its just my preference to hide the border and increase the padding and font size a bit.

The demonstration of this self-written plugin is quite evident as this very site runs on this plugin and the above code block is highlighted using the Google’s Prettify library. If you can use the Chrome or Firefox Developer tools to analyze that <pre> block, it will show you that a prettyprint class has been added!

So, go ahead and write this plugin if you are building a WordPress blog for yourself and want to do this in a DIY way. And let us know how it goes in comments below!

Published on Web Code Geeks with permission by Prahlad Yeri, partner at our WCG program. See the original article here: WordPress DIY: Adding Syntax Highlighting to your WordPress Blog Without using an External Plugin

Opinions expressed by Web Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of