Search This Blog

Monday, March 7, 2011

How to highlight source text on your blog

There are many time situation when you would like to publish a piece of code that should have a special formatting for the viewer.

This blog describe one of the possible solution base on the javascript library: SyntaxHighlighter

To integrate it with your blog follow the description there:

Adding a Syntax Highlighter to your Blogger blog

The list of brushes (javascript scripts) that you have to copy to your blog design template depends on your needs. If you want to use these 2 like 'plain' and 'bash' brushes you have to extend the list.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script language='javascript'>

The list of all brushes can be found at Bundled Brushes.

To convert the 'raw html' into the 'escaped' html code you can use this convert tool .

A basic example use in your blog post can look like this:

<pre class="brush:text; highlight: [1];">
<h2>This is an example.</h2>
</pre>

No comments:

Post a Comment