2010-12-01

SyntaxHighlighter

The first problem I ran into was of course how to include code snippets in my blog posts. So I stumbled upon SyntaxHighlighter and it works perfectly.

To use it on your own blog page, simply follow these steps.

1. On your blogger page, go to "Design/Template" -> "Edit HTML" and add these lines above the </head> tag:
<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'/>

2. Add support for the languages needed, a full list of supported languages can be found here. For example continue to add these lines:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.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'/>

3. Lastly add this line
<script language='javascript'> SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.config.clipboardSwf =
 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
 SyntaxHighlighter.all(); </script>

Click on Save to complete the implementation. Try it out by creating a new post and in the HTML section type:


<pre class="brush: java">
private void test() {
System.out.println("Testing code snippets");
}
</pre>

Inga kommentarer:

Skicka en kommentar