Easy formatting of source code in blogger: inlined and blocks

Add wiki-like code blocks and inlined code snippets in your blogger posts

Posting pieces of code to blogger is annoying. Reverting to HTML editor mode to insert special tags is not fun at all, and prone to inconsistency. I tried using external code-formatting libraries, such as the very nice SyntaxHighlighter, but it is very heavy and makes your site slow to load imho.

So here is a short hack to handle simple pieces of codes. Moreover it handles angled brackets completely transparently (resp. the < and > symbols), that often pollutes copy/pasted codes.

It only requires twenty lines of javascript and CSS to be copy/pasted in your blog.

How to?

Check the CSS class name of your posts. For the default blogger template, it is ''post''. Easiest way is to right-click / inspect your page, and find the ''<div class="post">'' or so, that matches the posts. This is the class name you will have to specify in the javascript function below. I used ''entry-content'' before, but it matched only the full views of the blog posts.

This is because, according to your template, you may have to change the ''.post'' in the javascript function (there is only one occurrence in the source code).

By the way, if it does not work for the mobile version of your blog, you may have to enable ''Template  ›  Choose mobile template'' and select ''Custom'' in blogger. Else the CSS class for the posts on mobile devices are not necessarily named alike (why?!). To benefit from web developer tools, you can get a mobile version of your blog on your desktop simply by appending ''?m=1'' to your blog url (e.g. http://oz4.us/?m=1).

Then, go to your ''Template'', then click on ''Edit HTML''.

Copy/paste the following piece of code just before the closing ''</head>'' block. Note how the CDATA protects the javascript source code, as blogger would otherwise complain about XML syntax, due to the presence of HTML tags in the javascript regular expressions).

''
<script language='javascript' type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function(event) {
  var divs= document.getElementsByClassName("entry-content")
  for(var i = 0; i < divs.length; i++)
  {
    h= divs.item(i).innerHTML;
    // Replace inline ' 'code ' ':
    h= h.replace(/'[']'?(@([a-zA-Z0-9_]+):)?(.+?)'[']'?/g, '<span class="oz4_dquot_$2">$3</span>');

    // Temporarily replace code block separator with a tag (readability)
    h= h.replace(/(\r|\n)'[']'?((<\/div>)|(<br\s*\/?>))/g,'_-_=_');

    h= h.replace(/_-_=_((.|\r|\n)+?)_-_=_/g,
                 function(whole, contents) {
                   return '<pre class="oz4_code">'
                   +contents.replace(/^\s*<br\s*\/?>/ig,'\n')
                   + '</pre>'
                 });
    divs.item(i).innerHTML= h;
  }
});
//]]>
</script>

<style type='text/css'>
 <!--
 span.oz4_dquot_ {
  font-family:monospace;
  font-size:90%;
  background-color:#EEE;
  padding-left:0.3em;
  padding-right:0.3em;
 }
 pre.oz4_code {
  display: inline-block;
width: 90%;
  font-family:monospace;
  font-size:90%;
  margin-left: 2px;
  border: 1px dotted #AAA;
  border-left: 3px solid #AAA;
  padding-left:0.3em;
  padding-right:0.3em;
  overflow: auto;
  white-space: nowrap;
 }
  span.oz4_dquot_hilite{
  text-shadow: yellow 0 0 3px;
 }
 -->
</style>
''

What do I get?

Now you get a much easier, shorter and controllable syntax to write pieces of code in your posts.
Note below that you need to use doubled single quotes (and not double quotes as I write here to illustrate the syntax -- I had to to prevent the javascript subroutine to parse the examples):
"
multiline
code blocks
"
i.e. when the double quotes are replaced with two single quotes:
''
multiline
code blocks
''

The second addition is for "inline stuff" (interpreted as ''inline stuff''), and even more "@hilite:specific texts" (i.e. ''@hilite:specific texts''). The latter will be formatted according to your own corresponding "oz4_dquot_xyz" CSS class in your blog template (see at the end of the inserted code above). You can check the source of this page to see how a ''<span class="oz4_dquot_hilite">'' was added around it. Of course you can use as many styles as you like, but only ''hilite'' was defined here.