Google syntax highlighter
As a programmer, I really love Google Syntax Highlighter (GSH). Just wrap some code inside <pre name=”code” language=”php”></pre> and you will get nice highlight PHP code on HTML page. Pure JavaScript, no need for any server side action. GSH is structured in one main file shCore.js (should be include always) and optional brushes to paint 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 in Wordpress?
Wordpress has extensible architecture which allows plugins, and someone surely made GSH plugin for Wordpress. Yes, I found plugin written by Peter Ryan on WordPress Plugin for Google Syntax Highlighter. Thank you! Now it is easy to show program code in Wordpress. I was curious and want to see how it works. After plugin activation I analysed HTML source produced by Wordpres and GSH plugin. In <head> sections appears GSH css file and at page bottom shCore.js plus all possible brushes - a lot of them. Even if I write post without any program code to highlight, this is still there. I didn’t like overhead and there could be improvement. I decided to make plugin modification and I set two goals to achieve:
- I want that my Wordpress page with program code load only brushes that are needed
- I don’t want to load any of JavaScript code in Wordpress page if there isn’t any program code to highlight
After little investigation, I found Custom Fields. You will find Custom Fields in Advanced options of Wordpress editor. Just scroll page a little down when you compose post or page. With Custom fields every post or page can be described with additional meta data. In my case, I wanted to describe post with some brushes to use. For example if I write about PHP and JavaScript, I will create 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 - nice. Values for key gsh_brush are case sensitive because this is actually part of the JavaScript brush file name. I didn’t like to change JavaScript brush file name nor to hard code this names inside PHP function to make case insensitive because I want to preserve and use original brush names.
I changed place of shCore.js inclusion and all brushes from the page bottom to the HTML head. In the bottom is now only JavaScript to fire highlighting.
Here goes modified google_syntax_highlighter.php code:
// get brushes for current post from custom fields
// function return 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
$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 class="javascript" src="'.$p.'/Scripts/shCore.js"></script>' . "\n";
//include only brushes from custom fields gs_brush
foreach($brushes as $brush){
print '<script class="javascript" src="'.$p.'/Scripts/shBrush'.$brush.'.js"></script>' . "\n";
}
}
}
// footer function
function gsh_insert_footer(){
// get brushes
$brushes = gsh_brushes();
// set current path
$p = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__));
// javascript code for fire-up highlighting
if ($brushes){
print '<script language="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');
Two functions are hooked to page header and footer and one function for getting values for Custom fields gsh_brush. Simple, isn’t it? More control over plugin is achieved, but not without cost. Plugin now has option to choose what brushes to load, but someone have to do it manually. Maybe sometimes, I will try to automate all of this in way to search content for all <pre name=”code” language=”PHP|JScript|Xml|…”> tags and automatically include used brushes. This method will take some resources because every post or page have to be scanned and it could have some impact on busy sites.