Using SyntaxHighlighter 2.0 on Blogger

Updated 4/8/2009: Had originally posted wrong version of FindTagsByName() function.

Guogang Hu made a nice post a couple of years ago demonstrating how to use SyntaxHighlighter with Blogger, but since then the world has moved on.  While that post is still entirely relevant if you plan to use SyntaxHighlighter 1.5, a slight modification is required to the JavaScript Guogang supplied if you want to use version 2.0.

The key functionality in Guogang’s script is the removal of the <br> tags in the code blocks that are automatically inserted by the Blogger rendering engine in place of all line breaks. The script looks for the code blocks and then removes the extraneous <br> tags. However, due to the change in the way that code styling is indicated to SyntaxHighlighter 2.0, the script’s approach to locating the code blocks must be modified.

<!-- SyntaxHighlighter code styling changes -->
<!-- 1.5 method -->
<pre name="code" class="c-sharp">
... some code here ...
</pre>

<!-- 2.0 method -->
<pre class="brush: c#">
... some code here ...
</pre>

Whereas Guogang’s script looks for tags whose name attribute is “code,” we need to now be looking for tags whose class attribute begins with “brush:”.  And thus I give you the full, modified script:

</div></div> <!-- end outer-wrapper -->

<script type="text/javascript">
//<![CDATA[ 
    function FindTagsByName(container, className, tagName)
    {
       var elements = document.getElementsByTagName(tagName);
       for (var i = 0; i < elements.length; i++)
       {
            var tagClassName = elements[i].className;
            if (tagClassName != null && tagClassName.search(className) == 0)
            {  
               container.push(elements[i]);
            }
       }
    }
    
    var elements = [];
    FindTagsByName(elements, "brush:", "pre");
    FindTagsByName(elements, "brush:", "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]);
            }
        }
    }
    SyntaxHighlighter.all();
//]]>
</script>