browse by category or date

Are you using Google Syntax Highlighter plugin for WordPress?

If you do, I am using the plugin too. Anyway, I was analyzing how this blog loads using Chrome’s Developer Tools. I am surprised that this plugin load all brushes at once.

Hmm.. inefficient. So I come up with this enhancement.

First let’s display the original:

<?php
/*
Plugin Name: Google Syntax Highlighter for WordPress
Plugin URI: http://wordpress.org/extend/plugins/google-syntax-highlighter
Description: 100% JavaScript syntax highlighter This plugin makes using the <a href="http://code.google.com/p/syntaxhighlighter">Google Syntax highlighter</a> to highlight code snippets within WordPress simple. Supports C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML, and HTML. Read  <a href="http://code.google.com/p/syntaxhighlighter/wiki/Usage">usage directions.</a> 
Version: 1.5.1
Author: Peter Ryan 
Author URI: http://www.peterryan.net
*/

function insert_header() {
	$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
	<link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<?php
}

function insert_footer(){
$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shLegacy.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushPhp.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushJScript.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushJava.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushVb.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushSql.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushXml.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushPython.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushRuby.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCss.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shThemeDefault.css"/>
<script class="javascript">
SyntaxHighlighter.defaults['wrap-lines'] = false;
dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php
}
add_action('wp_head','insert_header');
add_action('wp_footer','insert_footer');
?>

And now the enhanced version:

ENHANCED

<?php
/*
Plugin Name: Google Syntax Highlighter for WordPress
Plugin URI: http://wordpress.org/extend/plugins/google-syntax-highlighter
Description: 100% JavaScript syntax highlighter This plugin makes using the <a href="http://code.google.com/p/syntaxhighlighter">Google Syntax highlighter</a> to highlight code snippets within WordPress simple. Supports C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML, and HTML. Read  <a href="http://code.google.com/p/syntaxhighlighter/wiki/Usage">usage directions.</a> 
Version: 1.5.1
Author: Peter Ryan 
Author URI: http://www.peterryan.net
*/
function insert_header() {
	$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
	<link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shThemeDefault.css"/>
	<?php
}
function insert_footer(){
$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>

<script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shLegacy.js"></script>
<script class="javascript">
var arLanguages = new Array();
var arLangCounts = 0;
var arAliases = [
	{key:'shBrushCSharp.js', val:['c#','c-sharp','csharp']}
	,{key:'shBrushCpp.js', val:['cpp','c']}
	,{key:'shBrushBash.js', val:['bash','shell']}
	,{key:'shBrushAS3.js', val:['actionscript3','as3']}
	,{key:'shBrushXml.js', val:['xml','xhtml','html','xslt']}
	,{key:'shBrushVb.js', val:['vb','vbnet']}
	,{key:'shBrushSql.js', val:['sql']}
	,{key:'shBrushScala.js', val:['scala']}
	,{key:'shBrushRuby.js', val:['ruby','rails','ror']}
	,{key:'shBrushPython.js', val:['py','python']}
	,{key:'shBrushPowerShell.js', val:['powershell','ps']}
	,{key:'shBrushPlain.js', val:['text','plain']}
	,{key:'shBrushPhp.js', val:['php']}
	,{key:'shBrushJScript.js', val:['js','jscript','javascript']}
	,{key:'shBrushJavaFX.js', val:['jfx','javafx']}
	,{key:'shBrushJava.js', val:['java']}
	,{key:'shBrushGroovy.js', val:['groovy']}
	,{key:'shBrushDiff.js', val:['diff','patch']}
	,{key:'shBrushDelphi.js', val:['delphi','pascal']}
	,{key:'shBrushCss.js', val:['css']}
	,{key:'shBrushPerl.js', val:['pl','perl','Perl']}
				];
function getScriptName(alias){
	var i = 0;
	for (i=0; i < arAliases.length; i++)
	{
		if (arLanguages.indexOf(arAliases[i].key)<0)
		{
			if (arAliases[i].val.indexOf(alias)>=0)
				arLanguages.push(arAliases[i].key);
		}
	}
}	
if (jQuery)
{
	$sdv = jQuery.noConflict();
	$sdv(document).ready(function(){
		$sdv("pre").each(function(i){
			getScriptName(this.className);							
		});		
		$sdv.each(arLanguages, function(){
			var scrName = '<?php echo $current_path; ?>Scripts/' + this;
			$sdv.ajax({
			  type: 'GET',
			  url: scrName,
			  cache: true,
			  success: function(){
					++arLangCounts;
					if (arLangCounts == arLanguages.length)
					{
						SyntaxHighlighter.defaults['wrap-lines'] = false;
						dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
						SyntaxHighlighter.all();
						dp.SyntaxHighlighter.HighlightAll('code');
					}
				},
			  dataType: 'script',
			  data: null
			});			
		});
	});
}
</script>
<?php
}
add_action('wp_head','insert_header');
add_action('wp_footer','insert_footer');
?>

So instead of loading all the brushes, we will dynamically load it using jQuery. I hope it’s useful for you 🙂

GD Star Rating
loading...
Using jQuery to Enhance Google Syntax Highligher WordPress Plugin, 4.0 out of 5 based on 1 rating

Possibly relevant:

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Incoming Search

javascript, jquery, wordpress

2 comments so far

Add Your Comment
  1. I have made google syntax highlighter work in WordPress visual mode- http://www.satya-weblog.com/2009/09/google-syntax-highlighter-for-wordpress.html

  2. Good one.. cuts down on the JS bulk and http connection cycles big time. Loading all the brushes is rather unnecessary.

    Cheers,
    m^e