IoC : Ulises Fasoli's blog: 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

8 comments:

AnonymousMarch 4, 2014 at 6:29 AM
I discovered your blog the usage of msn. This is a really well written article. I will make sure to bookmark it and return to read extra of your useful information. Thank you for the post. I will definitely return.
website design
UnknownJune 12, 2014 at 7:23 PM
Thanks.
It works without adding any additional snippet to HTML code.
Ulises FasoliJune 16, 2014 at 9:47 AM
Good news! thanks for the feedback
Mia Pagina BlogJanuary 5, 2015 at 12:44 PM
Thousand of syntax highlighter view post on dynamic view... but no one that work... knowledge.sicilia.sx
UnknownApril 1, 2015 at 10:04 AM
Many thanks, very useful article!
Ulises FasoliApril 1, 2015 at 10:08 AM
Hi thanks for the comment; glad it helped you!