mercoledì 7 dicembre 2011

On code block and syntax highlighting

The first problem to solve to keep a technical blog alive, is code block insertion and highlighting.

On Blogger, there's no built-in tool to support my needs, so I ended up looking around for an easy and functional solution, and I found SyntaxHighlighter.

Neat, easy to setup (if you are a techie, of course, but not that hard for the average person as well), very nice results.

To setup the blog to use SyntaxHighlighter, you have to modify your html template:


Click on 'Proceed', then locate the following line:

   <meta expr:content='data:blog.metaDescription' name='description'/>

Just below this line, paste the links to the SyntaxHighlighter css and javascripts:

<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/shBrushCss.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/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>


<script type='text/javascript'>
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all()
</script>

You need to add all the shBrush*.js scripts for the language you need to use, refer to this page for a list of available languages. Please note that the hot linking of the javascript and css from the author site is allowed, but a donation to fund the needed bandwidth is welcome: see here for further details.

All you need to do to have a code block in your post is to go in HTML mode, and surround your pasted code with the <pre></pre> tags like this:

<pre class='brush: html'>
Your code block here
</pre>
You need to adjust the brush: tag according to the language of the pasted code, refer to  the page mentioned above for a list of available language, you must have the corresponding javascript loaded on your template.

Nessun commento:

Posta un commento