Sunday, July 10, 2011

How to add code Syntaxhighlighter to your blog or website

I wish we had access to wiki like syntax everywhere. Until now I never paid attention on syntax high-lighting but a quick search on the topic led me to the discovery of Alex Gorbatchev. Please visit the website here http://alexgorbatchev.com Apache, SpringSource and Worldpress etc are using this. This is cool stuff :)

System.out.println("Hello World");

To do the above you would simply use the java brush.
System.out.println("Hello World");

To make this work you just have to copy paste following code after the <title></title> tag in your html or if using blogspot.com then go to Design-->Edit html

<!-- SYNTAX HIGHLIGHTER --> 
<link href='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shCore.js' type='text/javascript'/>
<script src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushJScript.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- END SYNTAX HIGHLIGHTER -->

More stuff...
You can also get more brushes specific to your code from Alex's website e.g. sql, xml etc.

One thing you will stumble on is the different versions of javascripts. The one that I like and Spring is also using is 2.1.364 however the current version right now is 3.083 You can play around to see which one you like.

The best way is to link these files directly from his website e.g.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

Happy Blogging!

No comments:

Post a Comment