Syntax Highlighting on Blogger - Gist

Here is another way to paste code into blogger with nice syntax highlighting.

1. Go to http://gist.github.com
2. Past the code you want to post
3. Copy the embed tag
4. Go back to blogger, and select "Edit Html"
5. Paste the embed tag into your post

Below is the example source code using this tag: <script src="http://gist.github.com/467670.js?file=gistfile1.sql"></script>




A potential drawback of this approach might be the stability of github as a company. In a downturn, it may shut down with very short notice.

Compare to using SyntaxHighlighter, personally, I think this approach is way better:

1. No setup required (in a previous post I documented how to setup syntaxhighlighter for blogger, it took me half an hour to setup everything correctly. Now with gist, there is zero setup required );
2. Faster to create code snippet in a post;
3. Supports more languages;
4. No need to worry about pasting XML, HTML, or other special characters;

To paste script like below used to require replacing '<' with &lt; and '>' with &gt; manually. Now is simply copy paste without any manual changes:

Using SyntaxHighlighter on BLOGGER

SyntaxHighlighter is a

Free syntax highlighter written in JavaScript

It can insert colored code snippets on a web page using client-side javascript only. It is ideal tool for users of BLOGGER because we do not have server side resource to parse and highlight the code. And we are lazy, we do not want to write a lot of CSS to just post a code snippet. :-).

However it takes a little twisting to make it work properly.

Below are the steps to setup:
1. Download and find a place to host the library files for SyntaxHighlighter. A free choice is, of course, Google Page Creator;
2. Login to BLOGGER, go to: "Settings > Template > Edit HTML", make the following changes (credit goes to yehyeh's blog):

</div></div> <!-- end outer-wrapper -->
<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/>

<script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/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 =
//"http://[YOUR HOST]/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>

</body>
</html>

3. Now you can post code snippet on BLOGGER using either "pre" or "textarea" tag.

Notice:

1. The solution above is found here: http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html. That blog was written in Chinese. I made some minor changes and posted here. The reason for the Javascript code to remove <br/> tags is because BLOGGER has a setting to automatically add <br/> where there is line break. It is very convenient feature for blog posters, but somehow syntax highlighter will display the <br/> tag in plain text;
2. Clipboard for the SyntaxHighlither does not work well here. It tends to give you the text without line breaks, so I commented out the Javascript that setup the clipboard function;
3. When posting HTML code, remember to replace < with <, and replace > with >;
   

Next:
Now you've got beautiful code in your blog, next step might be some nice charts for your blog. You will find a way to embed a chart with one line HTML code here: Embedding Chart in Web Pages Made Easy
And, here is a post to show you how to Embed Silverlight video on Blogger:Embed Silverlight Streaming in Blogger

Update 11/11/2008
There are a few questions and comments regarding script hosting. .NET Dev posted an interesting idea here:
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

Basically, he setup the links directly to the trunk location of SyntaxHighlighter project.

Update 07/07/2010
I found using gist.github.com is way easier to paste syntax highlighted code in blogger. Here is my post showing you how to use it:

Syntax Highlighting on Blogger - Gist