How to Optimize syntax highlighter loading speed?

If you are using SyntaxHighlighter in your blog or website, then you might have noticed that you have to load the brushes you used in a post or page. The way you load them is generally by 

The first option for loading is disgusting as you have to write the code for each post or pages, however it is better as in this way you load only those brushes you used in an specific post or page.

The second option is better as you don’t have to write code for each post or page, but will put impact on website loading speed as you will be loading brush scripts unnecessarily in every post or page despite their usage.

Here you go. You can load SyntaxHighlighter and the brushes in the following that will automatically find out if SyntaxHighlighter is required to be loaded. If required to be loaded, only then it loads only those brushes which has been used on this specific page or post.

Voila! Complete automatic solution. No use of SyntaxHighlighter, no loading. If being used, then load only used brushes.

So here’s the code.

initSyntaxHighlighter();

function initSyntaxHighlighter (theme){
 theme = theme ? theme : 'default';
 var syntaxHighlighterConfig = {
  scripts : {
   'shBrushAS3.js': 'as3,actionscript3',
   'shBrushBash.js': 'bash, shell',
   'shBrushColdFusion.js': 'cf, coldfusion',
   'shBrushCSharp.js': 'c-sharp, csharp',
   'shBrushCpp.js': 'cpp, c',
   'shBrushCss.js': 'css',
   'shBrushDelphi.js': 'delphi, pas, pascal',
   'shBrushDiff.js': 'diff, patch',
   'shBrushErlang.js': 'erl, erlang',
   'shBrushGroovy.js': 'groovy',
   'shBrushJScript.js': 'js, jscript, javascript',
   'shBrushJava.js': 'java',
   'shBrushJavaFX.js': 'jfx, javafx',
   'shBrushPerl.js': 'perl, pl',
   'shBrushPhp.js': 'php',
   'shBrushPlain.js': 'plain, text',
   'shBrushPowerShell.js': 'ps, powershell',
   'shBrushPython.js': 'py, python',
   'shBrushRuby.js': 'rails, ror, ruby',
   'shBrushScala.js': 'scala',
   'shBrushSql.js': 'sql',
   'shBrushVb.js': 'vb, vbnet',
   'shBrushXml.js': 'xml, xhtml, xslt, html, xhtml'
   },
  themes: {
   default: 'shThemeDefault.css',
   dejango: 'shThemeDjango.css',
   eclipse: 'shThemeEclipse.css',
   emacs: 'shThemeEmacs.css',
   fadeToGray: 'shThemeFadeToGrey.css',
   midnight: 'shThemeMidnight.css',
   rDark: 'shThemeRDark.css'
   }
  };
 if($('[class^="brush:"]').length) {
  document.write('<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" />');
  document.write('<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/'+syntaxHighlighterConfig.themes[theme]+'" />');
  document.write('<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js">' + "<" + "/script>");

  for(var script in syntaxHighlighterConfig.scripts){
   var thisClasses = syntaxHighlighterConfig.scripts[script].split(',');

   for(var i in thisClasses){
    var thisClass = thisClasses[i].trim();
    if($('pre').hasClass(thisClass)){
     document.write('<script src="http://alexgorbatchev.com/pub/sh/current/scripts/'+script+'">'+"<"+"/script>");
     break;
     }
    }
   }

  var syntaxHighlighterLoader = setInterval(function(){
   if(typeof SyntaxHighlighter != "undefined"){
    SyntaxHighlighter.all();
    clearInterval(syntaxHighlighterLoader );
    }
   },500);
  }
 }

Okay, so you can call the function initSyntaxHighlighter() without a theme name or with a theme name. The function will first check if you used SyntaxHighlighter anywhere in the page or post. If you have used SyntaxHighlighter then it will look for the used brushes and will load them only. If no use of SyntaxHighlighter then no loading.

NOTE: It currently only works when you write codes in <PRE></PRE> tags.

That’s it. Like and Share the post and let me know how it’s working on your website or blog.