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 inside HTML page. Pure JavaScript, no need for any server side action. GSH is structured in one main file shCore.js (should be always included) 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 paint program code inside WordPress articles. I was curious and want to see how it works. After plugin activation I analysed HTML source produced by WordPress and GSH plugin. In <head> sections appears GSH css file and at bottom shCore.js plus all possible brushes - a lot of them. Even if I write article without any program code to highlight, all brushes are loaded anyway. I didn’t like overhead and there should be improvement. I decided to make plugin modification and I set two goals to achieve:
- I want to load only needed brushes inside WordPress article
- I don’t want to load any JavaScript files inside WordPress article 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 described post with needed brushes. For example if I write article 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 Be careful because values for key gsh_brush are case sensitive (this is actually part of the JavaScript brush file name). I didn’t like to change JavaScript brush file names nor to hard code this names inside PHP function. Why? Because I want to preserve and use original brush file names.
I changed inclusion place of shCore.js and brushes to the page head. Page bottom contains 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');
Simple, isn’t it? Plugin contains two hooked functions and one function for getting values from Custom fields gsh_brush. More control is achieved, but not without cost. Plugin now has ability to load only needed brushes, but someone has to write brushes list manually. You can go even further and automate all this process without Custom fields. For example modify PHP function to search for all <pre name=”code” language=”PHP|JScript|Xml|…”> tags and automatically include found brushes. This method will certainly take some resources because whole article has to be searched before page delivery.