Thursday, March 19, 2009

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>

6 comments:

Toni Menzel said...

Thanks for the explanation for using syntaxhighlighting in blogger.
Unfortunatelly, something is wrong on my setup:
tonitcom.blogspot.com

Maybe you can point me to a solution ?
Somehow linebreaks (
) are not being replaced correctly.
I try to find my way through the javascript put without success yet.
cheers,
Toni

Chris Staley said...

Tony,
I originally posted the wrong version of the FindTagsByName() function. I've corrected it, and it now reflects the version of the function that I'm actually using. Thanks for catching this!

Toni Menzel said...

Thanks Chris!
Got it working.
Actually, there is now a blogger mode switch, that does the br/newline replacement. See: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration#Parameters

Chris Staley said...

Hey, look at the things you learn when you actually read the documentation. :)

Thanks for pointing this out.

Dhaval Shah said...

I am unable to get the scrollbar in case the source code line exceeds a specific number of charactters. Please check out here - http://nuancesofdhaval.blogspot.com/

Liam said...

Thanks. Just what I needed to get things up and running.