Google syntax highlighter

With Google Syntax Highlighter you will be able to highlight source code. Just wrap some code inside <pre name=”code” language=”php”></pre> and you will get highlight PHP. Highlighting is pure JavaScript without need for any server side action. Google Syntax Highlighter is structured with one main file and optional brushes to paint source code. In current version, GSH is able to paint: C++, C#, CSS, Delphi, Java, Java Script, PHP, Python, Ruby, Sql, VB, XML/HTML. For each of this languages exists one JavaScript brush file:

shBrushPhp.js
shBrushJScript.js
shBrushSql.js
shBrushXml.js
...

How to use Google Syntax Highlighter (GSH) in WordPress?
WordPress plugin was originally written by Peter Ryan and you can find the source at WordPress Plugin for Google Syntax Highlighter page. After plugin activation I analysed the HTML produced by Google Syntax Highlighter plugin and here is the result: one CSS in the <head> section and all possible brushes (a lot of them) at the page bottom. Even in the post without any program code to highlight, all brushes will be loaded anyway. So I decided to make plugin modification with the following objectives:

  1. load only needed brushes
  2. skip brushes loading if WordPress post doesn’t contain any program code

To reduce brush list immediately, find and edit google_syntax_highlighter.php from the plugins directory. Remove brushes you will never need. In my example it looks like:

<script class="javascript" src="<?= $current_path ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?= $current_path ?>Scripts/shBrushPhp.js"></script>
<script class="javascript" src="<?= $current_path ?>Scripts/shBrushJScript.js"></script>
<script class="javascript" src="<?= $current_path ?>Scripts/shBrushSql.js"></script>
<script class="javascript" src="<?= $current_path ?>Scripts/shBrushXml.js"></script>
<script class="javascript" src="<?= $current_path ?>Scripts/shBrushCss.js"></script>

Brush list is reduced easily, but even reduced list will be loaded on every request needed or not. If you want to specify needed brushes per post, it can be done with Custom Fields option. You can find a Custom Fields in Advanced options of WordPress editor (just scroll a little down when composing a post). With Custom fields every post or page can be described with additional meta data. In my case, I described post with needed brushes. For example, if the post is about PHP and JavaScript, I will create the following custom fields:

gsh_brush -> Php
gsh_brush -> JScript

In this case, only three JavaScript files will be loaded: shCore.js, shBrushPhp.js and shBrushJScript.js Be careful because values for key gsh_brush are case sensitive and they are part of the JavaScript file name.

Here goes modified google_syntax_highlighter.php code:

// get brushes for current post from custom fields
// function returns array containing values written for the key gsh_brush
// gsh prefix means -> Google Syntax Highlighter
function gsh_brushes(){
	// make $wp_query visible inside function
	global $wp_query;
	// get brushes for the current post (for single page only)
	if (is_single()) $brushes = get_post_custom_values('gsh_brush', $wp_query->post->ID);
	// return brushes
	return $brushes;
}

// header function
function gsh_insert_header(){
	// get brushes
	$brushes = gsh_brushes();
	// set path to the syntaxhighlighter javascript
	$p = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__));
	// if custom field 'brush' exists
	if ($brushes){
		// highlight styles
		print '<link href="'.$p.'/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet"/>';
		// core brush - must be loaded
		print '<script type="text/javascript" src="'.$p.'/Scripts/shCore.js"></script>' . "\n";
		//include only brushes from custom fields gs_brush
		foreach($brushes as $brush){
			print '<script type="text/javascript" src="'.$p.'/Scripts/shBrush'.$brush.'.js"></script>'."\n";
		}
	}
}


// footer function
function gsh_insert_footer(){
	// get brushes
	$brushes = gsh_brushes();
	// set the current path
	$p = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__));
	// fire-up highlighting (if brushes exists)
	if ($brushes){
		print '<script type="text/javascript">' . "\n";
		print "dp.SyntaxHighlighter.ClipboardSwf = '".$p."/Scripts/clipboard.swf';\n";
		print "dp.SyntaxHighlighter.BloggerMode();\n";
		print "dp.SyntaxHighlighter.HighlightAll('code');\n";
		print "</script>\n";
	}
}

// hook functions to header and footer
add_action('wp_head',  'gsh_insert_header');
add_action('wp_footer','gsh_insert_footer');

Brush loading is moved to the head section of the HTML page. Plugin has two hooked functions and one function for getting values from the Custom fields. If you apply this modification, you will have option to create brush list per post. I will stop here, but you can go even further and automate all this process without need to fill the Custom fields. For example, you can modify PHP function to search for all <pre name=”code” language=”PHP|JScript|Xml|…”> tags and automatically include found brushes. This method would certainly add some server load because PHP engine will have to search entire post before sending page to the client.

5 thoughts on “Google syntax highlighter”

  2. The recently updated rewrite of the SyntaxHighlighter plugin for WordPress supports this out of the box: SyntaxHighlighter Evolved only loads the javascript language brushes files when needed.

    Your code here contains the older unmaintained version 1.5 of SyntaxHighlighter. Were you aware that it has been completely rewritten and that Alex Gorbatchev now has it’s own site? There are also many more brushes available nowadays. Have a look at my list which shows both included and elsewhere found brushes: list of known and found syntaxes for syntaxhighlighter

    — Abel —

  3. Thank you for pointing to the newer version of SyntaxHighlighter. Anyway, my main intention was to modify WordPress plugin to include only needed brushes instead of wasting bandwidth with unnecessary brushes. As I can see, today you can find 3 WordPress plugins for SyntaxHighlighter. I peeked to source of one of them and saw loading all brushes :(

  5. @Bjørn Børresen – I’m not sure but SyntaxHighligter had different name two years ago. In that time it didn’t have – dynamic brush loading – for economize bandwidth usage. So I modified WordPress plugin and specified needed brushes per post. Anyway, this post is old and it’s ready to write again. Thank you for pointing to the newest SyntaxHighligter version.

Leave a Comment