Thursday, August 09, 2007

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 &lt;, and replace > with &gt;;
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

49 comments:

Robby O'Connor said...

Thanks a bunch!!

Guogang Hu said...

You are welcome.

Szymon Bochniak said...

Really helpful post ;)

Abhishek Mishra said...

I have noticed that throughout all the codes in your blog, each even numbered line is blank. This is a bug which i fixed today.
checkout the latest modified bugfree code at

http://ideamonk.blogspot.com/2008/06/adding-syntaxhighlighter-to-your.html

Unknown said...

I could not have found the solution without read this page. Thanks! :)

Guogang Hu said...

You are welcome. I am really glad that this post has been helpful. It is "thank you" notes like this that make the effort writing all these very rewarding. :)

Unknown said...

Thanks! This helped me out a lot.

.NET Dev said...

If you don't have hosting...
Don't worry ...
See
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

Rajmohan said...

New accounts for googlepages are no longer allowed. And Google sites doesn't allow to host .js files. I was wondering if you would be able to host shBrushPerl.js as well? Until it is added to the SyntaxHighlighter.

See here for more info - http://code.google.com/p/syntaxhighlighter/issues/detail?id=113#c0

It would be of help to others like me.

Guogang Hu said...

rajmohan:

This JS link might work for you:
http://syntaxhighlighter.googlecode.com/issues/attachment?aid=-373138434045331346&name=shBrushPerl.js

Rajmohan said...

Thanks guogang. When I put the following in the blogger template,

script src='http://syntaxhighlighter.googlecode.com/issues/attachment?aid=-373138434045331346&name=shBrushPerl.js'

I am getting the following error and points to the above line.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "name" must end with the ';' delimiter.

Can you please point me as to what I am missing here?

Thanks again.

Guogang Hu said...

rajmohan:

I guess you will have to check for typos or anything that is screwing up the XML format.

Anonymous said...

The steps are a lot easier now. No need for a host because you can just use Google Code. And very little JavaScript on the page. I posted the instructions at http://tech.element77.com/2008/11/syntax-highlighting-code-in-blog-posts.html

Anonymous said...

Thanks tech. Perfect.

Alex Wei said...

Thank you for sharing!

@Rajmohan, you need to change the ampersand (&) in your url to &. Otherwise, the XML parser will try to convert &name= into an entity, which is of course not defined...

Thanks again!

Anonymous said...

Thats Tizite!

Anonymous said...

Thanks so much! I was having lots of trouble to make it work, really thanks!

Debiprasad Sahoo said...

The code provided here to replace <br /> tags are really great. I have done a simple hack and trying to make it better and simpler, your code will help me to do better. Thanks. I will let you know, when I completes it.

Muthu said...

Thanks a lot.

Chris Staley said...

This was a great help. I published a follow-up that demonstrates how to modify the script for SyntaxHighlighter 2.0.

Jorge Valverde-Rebaza said...

this is good :D

Dinero Online said...

I really like this blog, you are very good making them. I say that the issue discussed in this blog is quite interesting and of high quality.

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

: RxN7 : said...

wow.. many thanks!

this post very useful for a programmer blog

ekozul said...

Thanks... great post..

Büyü Çeşitleri said...

You are welcome.

utari said...

nice post, so useful..

free casino said...

It's great your contribution on how to improve the services we give people blogs, thanks for the info

michaelvk said...
This comment has been removed by the author.
Guogang Hu said...

michaelvk,

The creator of SyntaxHighliter now offers free hosting. Information here: http://alexgorbatchev.com/SyntaxHighlighter/hosting.html

However, I recommend using GIST now due to its ease of setup and use. I no longer need to HTML encode my code before it's copied into blog post. My other post about using GIST on BLOGGER is here:
http://developertips.blogspot.com/2010/07/syntax-highlighting-on-blogger-gist.html

Anonymous said...

Here's the link on how to link the css and js using the creator free hosting:

http://practician.blogspot.com/2010/07/color-my-world-syntax-highlighter.html#links

RELOAD.ID said...

nice info
thanks for share

Sildenafil said...

a friend of mine told me about this SyntaxHighlighter on Blogger, he said it was pretty good and I tried to see if that was true, but when I was trying it I got some errors!

Guogang Hu said...

That is why I recently moved to GIST. No template editing, no errors. It just works.

It takes only a few sentences to explain how to do it. Please see my other post for details: Syntax Highlighting on Blogger - Gist

Anonymous said...

I will try GIST then, thank you very much bro!

Martin Thoma said...

Thanks for sharing this howto! I've just seen on my blog that it works fine: http://martin-thoma.blogspot.com/2011/01/how-to-post-code-on-bloggercom.html

Can I also get a highlighter for bash?

Inventory Management Software said...

Thanks for sharing your post and it was superb .I would like to hear more from you in future too.

Handwriting analysis said...

I enjoyed your entries on Toxic Words - such great thoughts and a wonderful reminder to watch the words I use - to be positive and kind and use words to build up rather than tear down. :)

Used Cars said...

Interesting and useful.

مدونة عربي كاش2 said...

Thanks a bunch!!

Mitchell said...

A very nice informational blog.Keep on making such important blog post.Your work is really being appreciated by some one.

Anonymous said...

Wow, nice post,there are many person searching about that now they will find enough resources by your post.Thank you for sharing to us.Please one more post about that..Cain

holoul said...

thanks men

website designing company said...

Your blog article is very intersting and fanstic,at the same time the blog theme is unique and perfect,great job.

Anonymous said...
This comment has been removed by a blog administrator.
Online Diploma said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.