www.RickLaFleur.com

Using the SyntaxHighlighter on non Blogger sites is pretty straightforward - for my notes on use, please see Using SyntaxHighlighter.

However, I and other have run into a bug when trying to deploy to a Blogger site, namely that <br/> would be inserted in the code when displayed to the page and, in my case, line returns would be ignored, resulting in all the code being writtent to one line.

I was able to find a solution on the Tips for software engineer site. In essence, add the following JavaScript to the page just before the closing body tag:

<script class='javascript'>  
 //<![CDATA[  
     function FindTagsByName(container, name, Tag)  
     {  
         var elements = document.getElementsByTagName(Tag);  
         for (var i = 0; i < elements.length; i++)  
         {  
             if (elements[i].getAttribute("name") == name)  
             {  
                 container.push(elements[i]);  
             }  
         }  
     }  
     var elements = [];  
     FindTagsByName(elements, "code", "pre");  
     FindTagsByName(elements, "code", "textarea");  
    
  for(var i=0; i < elements.length; i++) {  
   if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {  
    var childNode = elements[i].childNodes[0];  
    var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));  
    elements[i].replaceChild(newNode, childNode);  
      
   }  
 else if(elements[i].nodeName.toUpperCase() == "PRE") {  
    brs = elements[i].getElementsByTagName("br");  
    for(var j = 0, brLength = brs.length; j < brLength; j++) {  
     var newNode = document.createTextNode("\n");  
     elements[i].replaceChild(newNode, brs[0]);  
    }  
   }  
  }  
   //clipboard does not work well, no line breaks  
   // dp.SyntaxHighlighter.ClipboardSwf =   
   //"http://[YOUR HOST]/clipboard.swf";  
   dp.SyntaxHighlighter.HighlightAll("code");  
 //]]>
</script>

Labels: blog, bug, code, JavaScript

posted by RickLaFleur.com  # Monday, October 06, 2008