SyntaxHighlighter with Blogger

Since I post some code from time to time in this blog and I like the idea of syntax highlighting I looked into adding SyntaxHighlighter to my page. I’d found this post by someone else explaining how to do it, but by now this was a little outdated.

So now I thought that I might do this too, since I seem to have gotten it working. Here’s what I did:

  1. (Using blogger) log in and go to Layout -> Edit HTML
  2. Insert this code right before the </body> tag:
    <link href='[VERSION]/styles/shCore.css' rel='stylesheet' type='text/css'/><link href='[VERSION]/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
    <script src='[VERSION]/scripts/shCore.js' type='text/javascript'/>
    <script src='[VERSION]/scripts/shBrushCpp.js' type='text/javascript'/><script src='[VERSION]/scripts/shBrushCSharp.js' type='text/javascript'/><script src='[VERSION]/scripts/shBrushCss.js' type='text/javascript'/><script src='[VERSION]/scripts/shBrushJava.js' type='text/javascript'/><script src='[VERSION]/scripts/shBrushJScript.js' type='text/javascript'/><script src='[VERSION]/scripts/shBrushSql.js' type='text/javascript'/><script src='[VERSION]/scripts/shBrushXml.js' type='text/javascript'/>
    <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 =//"[VERSION]/scripts/clipboard.swf";SyntaxHighlighter.config.bloggerMode = true;SyntaxHighlighter.all();//]]></script>

The SyntaxHightlighter.config.bloggerMode = true; is used to be able to use line breaks in your code snippets with blogger.

If you go here you can select your [VERSION] and if you then go to [VERSION]/styles/ you can see some shTheme*.css files where you can select the theme you would like to use.


One response to “SyntaxHighlighter with Blogger

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s