Sunday, October 11, 2009

Code Syntax Highlingting plugin


If you post any source code on your blog (site) and want to have some syntax highlighting like this on your website then this posts is for you:

alert("Hello World");
 // Example of code


I will concentrate here on how to set it up for blogger but it's basically vadid for any website. More details on that at the end of the post. But let's talk about the plugin a bit.


Supported Languages

This plugin at the time I'm writing this article supports the following languages:
  • ActionScript3
  • Bash/shell
  • C#
  • C++
  • CSS
  • Delphi
  • Diff
  • Groovy
  • JavaScript
  • Java
  • JavaFX
  • Perl
  • PHP
  • Plain
  • PowerShell
  • Python
  • Ruby
  • Scala
  • SQL
  • Visual Basic
  • XML (as well as xslt, html, xhtml)
Not bad heh ;) And there are much much more which haven't made they way to the official package.

Installing the plugin

In order to set this up you will have to edit your template layout. To do that, go to your blogger dashboard and click on "Layout" and then click on "Edit HTML", and search for:

]]></b:skin>

and paste the following code.

<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 src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<!-- add brushes here -->
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>


Using the plugin

Once you've completed previous step, all you have to do is to start writing a post, and when you have to put some code, switch to the "Edit HTML" tab and use pre tags as follow: 
<pre class="brush: js">
 <!-- Your code goes here -->
</pre>

You need to change the language code (in this case js) to match the language you want to highlight.

Make sure to replace all instances of < with &lt;.

Don't worry if your text looks funny in the "Compose" tab, it's going to be fine when you few the post normally.

Where to know more about it: 

This little baby is named SyntaxHighlighter ans it is the fruit of several years of Alex Gorbatchev efforts. You can find more on his website. You will find there the full list of scripts you can include to get syntax highlighting for different languages. There's also different theme css.


I hope this will be useful to you as well.
Libellés : , ,