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

55 comments:

Robert O'Connor said...

Thanks a bunch!!

Guogang Hu said...

You are welcome.

Pientka 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

.:: m3rLinEz ::. 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. :)

orip 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.

tech 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!

giacomo said...

This is exactly what I needed, thanks! You're linked in my blog (gsscoder.blogspot.com).

Mad Java said...

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

Debiprasad 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.

rosy said...

Very informative article, thank you for your suggestions and tips.
Web Designer Web development

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.

daves said...

It is nice blog,Thanks for sharing resources related to website design

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

RAZIEL2099 said...

Creo que lo que estan buscando son resaltadores de codigo

http://www.elwebmaster.com/general/los-mejores-resaltadores-de-sintaxis-de-codigo-para-tu-web

Para los blogs El punto 11 es el que mas mola, diablos!, incluso para desarrollar en modo local o una web, pues te da el archivo CSS y ofrece una gran variedad de diseños, ademas es compatible con varios tipos de sistemas operativos.

Yo lo postearia en mi blog, pero no tendria sentido (quisas en otra ocasion). si quieren visitenlo y vallan a

http://raziel2099.blogspot.com/2009/04/analizadorlexjava.html

Veran un ejemplo.

Aunque para mas seguridad he sustituido los espacios en blanco y tabs por &_n_b_s_p;_ (espacio HTML) jeje... pero el codigo que ofrece es bastante bueno... lo unico que hay que fijarse es que no haya espacios en blanco al final de las lineas del codigo fuente que se va a convertir... el editor de blogger da ese problema, pues le agrega una linea mas al codigo que ofrece el programa (en el caso de que haya espacios en blanco al final).

Tambien te da la opcion de embeber el codigo CSS en las etiquetas y asi tener todo el codigo.

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

Oemar 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!

kate79502 said...

Your blog is really helps for my search and i really like it.. Thanks a lot..:)
Term Papers Writing Services

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.

instantinsurance 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

Aishwarya Rai Actress said...

This is a really great post, thanks for sharing. I’m glad I got a chance to check out your blog!
thanks,
http://www.aishwaryaraiactress.com/

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.

website design 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.
Rehan Khatri said...
This comment has been removed by a blog administrator.