Saturday, 4 February 2012

How to highlight code syntax in the blogger? Use SyntaxHighlighter!

I decided to use a library for highlighting code syntax. I have found SyntaxHighlighter. To install it you have to add some script in the html code. For my case I wanted to use it for java and xml code.
Here is what I have added (you can use hosted files or files from your server):
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css ' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
     SyntaxHighlighter.all()
</script>
Then you just need to put your code inside pre tag:
<pre class="brush: java">
  int add(int a, int b) {
     return a + b;
  }
</pre>
And you will get:
  int add(int a, int b) {
     return a + b;
  }
More info on the SyntaxHighlighter home page: http://alexgorbatchev.com/SyntaxHighlighter/
More on installation is described on: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
List of languages whose syntax are implemented are here: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/