SyntaxHighlighter and blogger dynamic templates

Recently I decided to switch my blogger template to use one of Google's dynamic templates since I really like the possibility to switch the presentation of the blog posts

Even though I thought this would be pretty straight-forward as it turns out I run into a problem. I use Alex Gorbatche's SyntaxHighlighter JavaScript plugin to "prettify" my code, and as it turns out Dynamic Templates and the Syntax Highlighter do not play well together (apparently the content of the posts is loaded after the script has been bootstrapped so you end up with ugly unreadable bits of code.

After goggling here and there I found a few workarounds some worked, others not.. (I'm sorry I do not have the links now, but they are easy to found). Those who worked basically consisted in altering my previous posts to give an id to each of the pre that I had used before which was unacceptable for me. So here is the solution that I came up with by inspiring myself of the different workarounds out there .

Basically what my workaround does is to delay the moment where the Highlighting will be performed to after the posts content has been loaded and then iterate through all the appropriate html tags in your code and apply highlighting


1.- Add SyntaxHighlighter's CSS resources in the template's head


<head>
     
      <link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/> 
      <link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>

   

2.- Add Javascript resouces and snippet to delay the script's bootstrapping at the bottom of the page (before the body closing tag




     

      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushSql.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushBash.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPerl.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPlain.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushScala.js' type='text/javascript'/>

     <script language='javascript' type='text/javascript'>
       
          // define usual options
           SyntaxHighlighter.config.bloggerMode = true;  
           SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
        
            function doHighlights(){
           
   
              if(jQuery("pre").length > 0){

                     if(hasConsole()){
                        console.log("About to highlight fields");           
                     }

                     jQuery("pre").each(function( index ) {  SyntaxHighlighter.highlight(undefined, jQuery( this ).get(0));   });

              }
          }

      

          function hasConsole(){

         return typeof console != "undefined";
         } 
          

         setInterval(doHighlights, 500);
  
  </script>
</body>



Please note a few things :
  • I tried using jQuery's document ready which I find more elegant than the JavaScript timeout but it didn't work probably because it was still executed too early
  • Here running the highlight function every 500 milliseconts which I know it's not great...
  • Finally please note that the above code snippet will apply to all the pre tags in your code (which is OK for me since I only use them to display code) but it might affect your blog layout if you use them for other purposes; in that case just modify the script to check for CSS classes corresponding to those used by SyntaxHighlighter

Popular posts from this blog

Multi-hop ssh tunnel - howto : Creating a SSH tunnel with port forwarding between multiple hosts

Spring boot and spring data jpa tutorial - A sample application using spring 4.0 spring boot and JPA (part 2/2)

Maven build number, versioning your projects builds automatically