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 nice highlight PHP code on HTML page. Pure JavaScript and no need for any server side action. Google Syntax Highlighter is structured with one main file shCore.js (should be always included) 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 exist 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. I found plugin written by Peter Ryan on WordPress Plugin for Google Syntax Highlighter. Now it's easy to paint program code inside WordPress post. I was curious and wanted 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 a post without any program code to highlight, all brushes are loaded anyway. I didn't like overhead and there should be improvement, so I decided to make plugin modification:
- I want to load only needed brushes
- I don't want to load any JavaScript files if there isn't source code to highlight
To reduce brush list on easy way, find and edit google_syntax_highlighter.php from plugins directory. Remove brushes you will never need and in my example it looks:
<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, but every brush from list is loaded on each request - no matter if is used or not. If you want to specify needed brushes per post, it can be done with Custom Fields. You will find a Custom Fields in Advanced options of WordPress editor. Just scroll a little down when you compose 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 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. shCore.js is included in the head section instead of the page bottom, while needed JavaScript brushes are left at the page bottom.
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 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 current path
$p = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__));
// javascript code for fire-up highlighting
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');
Plugin has two hooked functions and one function for getting values from the Custom fields. If you apply this modification, you will have an option to create brush list per post. You can go even further and automate all this process without 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 load because in this case PHP engine will have to search entire post before sending page to the client.
1 Digg