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 🙂

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

What should I do to install jQuery?

Since WordPress ver. 2.2, jQuery was automatically added into your WordPress installation. And it was released on May 2007, that’s like more than 2 years ago. So there is a high chance that you already have jQuery in your WordPress without you realizing it. 🙂

How to check whether jQuery is loaded by WordPress?

Install Firebug. Firebug is a plugin for Firefox browser. Browse the WordPress blog using Firefox, then enable the firebug by clicking the firebug icon at the bottom-right corner. The icon will change color from gray to something orange-ish. Open the Net tab, then refresh Firefox. You should have something like this:

If you see jquery.js there, it means jQuery is now available for your usage.

You can also check inside your code:

if (jQuery)
{
     //jQuery is loaded, do something
     $j = jQuery.noConflict();
     $j(document).ready(function() {
           // do stuff when DOM is ready
           alert('jQuery wants to say hi!');
     });
}

Of course your code must be put into separate .js file.

Can jQuery conflict with other library?

Yes, it might conflict with Prototype Framework..

Have fun with jQuery! If you like this article, kindly consider to visit the sponsors to check out their offers. Cheers!

I’ve been adding JavaScript code many times in my earlier blog posts. I know I struggled to do that. But I was too stubborn to google for clues because somehow what I did is working *GRIN*

Anyway, recently I struggled again, but this time I don’t have the energy to be stubborn, I googled for solution.

According to this article, this is the best way to incorporate JavaScript into WordPress blog post:

1. Save your JavaScript code in a .js file
2. Use SCRIPT tag to load the .js file
3. Add another SCRIPT tag to execute any initiation functions

It will be something like this

<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript">
<!--
	Initialize(); // With assumption that this function is defined inside myscript.js
-->
</script>

That’s all, very simple and straighforward indeed. So now looking back, what’s wrong with my earlier method anyway? Chronologically speaking, it would be as follows:

1. I put the code directly inside a SCRIPT tag
2. Then I realized that WordPress added <br/> to replace the newline, which basically prevent my JavaScript code running
3. I removed the newline from my JavaScript code

Which is really horrible, considering that:

1. my code is now unreadable to human 😀
2. I must tirelessly replace all single line comments (// …. ) into multiple line style ( /* …. */ )
3. It makes debugging with Firebug really difficult

Hmmpffhh… I learned my lesson, so let’s move on 😉 Did you ever make similar mistake because of your stubbornness?