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.

Success

First success!
I managed to redirect my domain to blogspot....

not that it took much effort at all, uh?

Startup.

Ok, time to put on (e)paper some of my work, findings, exploration in the world of java programming, traveling, technology, and whatever crosses my mind :)

I don't know if I'll ever publish little, or much, or at all on this, I just need a place to share my thoughts and findings (if there's anyone who cares).