Google Syntax Highlighter Reloaded

Not happy with methods and plugins to highlight codes, I’m presenting a solution to load the scripts only where necessary, aiming to deliver soon a proper plugin for WordPress.

As quick note, I realized that the task may need a proper plugin. I’m working on it and I’ll publish something about in the next days. Stay tuned.

After few test, I decided to stay with Google Syntax Highlighter on my personal blog. Loving its way to present codes in clean and neat way. Also I appreciate the clipboard on top of the snippet. So I dropped for a while the search for a new syntax highlighter, even if Alex Gorbatchev released a better engine.

If you’re in a hurry, skip to the actual function and please read the note afterward.

Unfortunately both Google Syntax Highlighter for WordPress and SyntaxHighlighter 3 are still not perfect for my purposes. The former loading bunches of Javascript in every pages that’s superfluous, and the second with overly tight CSS rules.

As exercise, I decided to work around it a little bit, and you’re free to grab the result, and obviously re-shape it at will, since it’s all been released under MIT License and the GNU General Public License (GPL) Version 3.

A mention should be paid to an article on Eddie On Everything about how to load the scripts only where necessary. It did not work fine in my case, so here my own solution!

Google Syntax Highlighter Reloaded!

I called it Google Syntax Highlighter Reloaded ‘cos I really like the name, and I may release it as plugin in future. For now, it all stay in the function here below, and obviously in the scripts that it loads. Very important, You need to tag the post with the tag code, this been the signal to actually load the scripts. You can obviously change what tag best fits you, and your articles.

Copy and paste the code in your functions.php file.

<?php
function google_syntax_highlighter_reloaded() { 
	// Set paths to library (you may need to adjust depending on your actual theme)
	$syntax_highlighter_path	= get_template_directory_uri() . '/library/js/google-syntax-highlighter-reloaded/'; 
	
	// note! Don't forget to put scripts and styles in the relative subfolder! ?>
    
	<!-- Loading Syntax Highlighter Styles -->	
	<link href="<?php print $syntax_highlighter_path; ?>styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<!-- Loading Syntax Highlighter Brushes -->	
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shCore.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushPhp.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushCss.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushXml.js" type="text/javascript"></script>
	
	<!--  Not Used 
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushCSharp.js" type="text/javascript">
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushJScript.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushJava.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushVb.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushSql.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushDelphi.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushPython.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushRuby.js" type="text/javascript"></script>
	<script src="<?php print $syntax_highlighter_path; ?>scripts/shBrushCpp.js" type="text/javascript"></script>
	-->
	
	<!-- Syntax Highlighter Execute! -->
	<script type="text/javascript">
		dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>scripts/clipboard.swf';
		dp.SyntaxHighlighter.HighlightAll('code');
	</script>
	<!-- END Synhtax Highlighter -->
	
<?php }

function gshr_init() { // this actually load Google Syntax Highlighter
	global $post;
	if ( has_tag( 'code', $post->ID ) ) { // the post needs to have the tag 'code'
		add_action( 'wp_footer', 'google_syntax_highlighter_reloaded' );
	} 
}
add_action( 'the_post', 'gshr_init' );
?>

Then, you need to upload the scripts into your theme. In my case, I have a folder called library where I store scripts, web fonts, and so on. It’s cool, ‘cos I just have to add that folder to a new theme to enhance it with little effort. So I created a path to the actual scripts:

/library/js/google-syntax-highlighter-reloaded/

Next step, Download SyntaxHighlighter and extract scripts and styles in the appropriate subfolders.

/library/js/google-syntax-highlighter-reloaded/scripts/
/library/js/google-syntax-highlighter-reloaded/styles/

And that’s it. Please read the notes below.

How does it work?

Simply, we hook gshr_init to the_post. Each time a post is rendered on page, we check for the presence of the tag code. If that the case, we hook all the necessary scripts to wp_footer. This way we check for every posts, even in homepage or archive pages, but if necessary, we add the stuffs only once to the footer.

It may be smarter to hook gshr_init to the_content, instead of the_post. This way we perform the check only when the article is actually displayed, to save CPU time, making the website a bit faster.

Important Notes

As you might have seen in the code above, I opted to selectively load the codes to highlight for CSS, PHP and XML (XHTML, HTML, and such). That because those are the topics I’m kin of. You may need to load different scripts, and in order to do so, move the appropriate lines from the section of not used, to the section of of the brushes actually loaded. It should be clear enough.

Once again, please, remember that you need to tag the post with the appropriate tag in order to trigger the loading of the syntax highlighter scripts.