Dec 28, 2007

Syntax highliting in blogspot posts

So far Blogspot doesn't support syntax highlighting and "verbatim" mechanism, which could help to post C++ (or other languages) source code blocks.
I will try to summarize in the following post workarounds I found on the subject. This post should help to:
  1. make posts with blocks of source code (C++ for example) in it,
  2. enable syntax highlighting of source code blocks,
  3. add a word wrapping for source code blocks.
Let us start!

#1
You will need google-code-prettify, which does the main job of enabling source code blocks in you posts.
Please edit your HTML template by adding the following lines to the end of your "head" HTML block:

<!-- google-code-prettify -->
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

Also you need to change your "body" tag to the following:

<body onLoad='prettyPrint()'>


#2
To post source code blocks your will need to process HTML escaping of this block, this can be done with the help of the following tool (Quick Escape). What is quick escape? It's a tool that lets you quickly paste in HTML and for that to be converted to escaped characters which can be pasted back in to your HTML source code so that it renders on screen.
Now you can put the results between

<pre class="prettyprint">
<!-- Put your source code here -->
</pre>
tags.

#3
Now you need to enable a word wrapping mechanism for "pre" HTML tags. Put the following css code to your HTML template somewhere at the beginning, where you have your page defaults:

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space : normal;
}


#Example:
(Here you see a C++ code inserted into the blog post using the method above)
/**
*
* @brief A partial specialization of SCaller template with #MiscCommon::NullType.
* @brief Used to implement calls of commands \\b without a Return object.
*
*/
template<class _Parent, class _LogFun>
struct SCaller<_Parent, _LogFun, MiscCommon::NullType>
{
void call( _LogFun _log_callback, MiscCommon::NullType */*_ret_val*/)
{
_Parent *pThis = reinterpret_cast<_parent>(this);
pThis->command( _log_callback );
}
};

No comments: