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 🙂
loading...
About Hardono
Incoming Search
javascript, jquery, wordpress
I have made google syntax highlighter work in WordPress visual mode- http://www.satya-weblog.com/2009/09/google-syntax-highlighter-for-wordpress.html
Good one.. cuts down on the JS bulk and http connection cycles big time. Loading all the brushes is rather unnecessary.
Cheers,
m^e