How to install syntax highlighter on Blogger Dynamic Views

The new blogger dynamic view template does not allow to change html template so it does not allow you to add custom script. So in order to use syntax highlighter on blogger dynamic view pages we need to insert necessary scripts and style sheets manually. I wrote a small script for this task. It need to be added at the end of every post. It first checks if SyntaxHighlighter is available on the page if so the "higlight" method is called. If SyntaxHighlighter is not available the script starts to load the necessary scripts and stylesheets provided by the arr variable (you can add another brush or stylesheet to the array to be included to the page). The script load all items serially using a callback function. The callback function is called on the onload of the script element but in order to have a callback after a stylesheet is loaded we need use a small trick (as detailed here). We create an image element and set its src attribute to the stylesheets source. The img elements tries to load by using its src value and fails and trigger the onerror event and we use the onerror event for the callback function. While the script need to be included for every post it loads the resources only once by a setting a global variable (window.SyntaxHighlighterLoading). So in order to make this work put the script below in a js file then add that script file at the end of every post. Sample usage :

<script src='https://raw.github.com/Yasintrm/js/master/loader.js'></script>

Hope it helps.

(function () {
    var arr, counter = 0,
        doc = document,
        len, load, callBack, url = 'http://alexgorbatchev.com/pub/sh/current/';
  
    if (window.SyntaxHighlighter && !window.SyntaxHighlighterLoading) {
        SyntaxHighlighter.highlight();
    } else if (!window.SyntaxHighlighterLoading) {
        window.SyntaxHighlighterLoading = true;
        arr = [url + 'scripts/shCore.js',
               url + 'scripts/shBrushCSharp.js',
               url + 'scripts/shBrushJScript.js',
               url + 'styles/shCore.css',
               url + 'scripts/shBrushXml.js',
               'https://raw.github.com/scottdensmore/ObjectiveCSyntaxHighlighter/master/scripts/shBrushObjC.js',
               url + 'styles/shCoreDefault.css'];
      
        len = arr.length;
      
        load = function (src, callBack) {
            var isJs = src.lastIndexOf('.js') !== -1,
                head = doc.getElementsByTagName('head')[0],
                el, img;

            if (isJs) //load javascript
            {
                el = doc.createElement('script');
                el.type = 'text/javascript';
                el.src = src;
                el.onload = callBack;
                head.appendChild(el);
            } else //load css
            {
                el = doc.createElement('link');
                el.href = src;
                el.type = 'text/css';
                el.rel = 'stylesheet';
                head.appendChild(el);
                //not all browser support onload event on link elements - for example safari mac 5.1.7--
                //in order to simulate load event on link elements use a known trick
                img = doc.createElement('img');
                img.onerror = callBack;
                img.src = src;
            }
        };
      
        callBack = function () {
            if (++counter === len) {
                SyntaxHighlighter.highlight();
                window.SyntaxHighlighterLoading = false;
            } else {
                load(arr[counter], callBack);
            }
        };
      
        load(arr[counter], callBack);
    }
}());

Hope it helps.