Dear reader of Juri's TechBlog,
I moved my blog to a new domain and a new hosting solution as well. I'm now blogging on juristr.com.

Posting Source code on Blogger

When you have a blog (like this here) whose content is dedicated to Computer Science related stuff you will often have to post pieces of source code. In such a case the best thing is to create a CSS class which takes care of the areas containing your source code where you can set the font, colours, background, etc...You may also like to add syntax highlighting for a better viewing of your code.
Besides this "nice-to-have" stuff, there are however some difficulties you may encounter with Blogger. What I discovered is that it tries to do corrections on your HTML code which you can type when creating a new post. So for instance it does the following:
When you switch to the "Edit Html" tab and you type <pre class="code"> and then you switch to the "Compose" tab and immediately back to html viewing, you'll see that Blogger corrected your HTML code by automatically adding the closing tag </pre>. This seems to be nice and useful from a first perspective, but it gets really annoying if you try to paste some C, C++ or Java code where it happens that you have pieces between arrow brackets. In such a case Blogger will try to automatically close all your tags such as an C++ library import <iostream> Obviously this has the effect that your code gets displayed in a wrong manner.

It would be nice to have the Blogger team implement these things in a nicer way. To overcome these problems in the meantime I did (and I suggest you) to do the following things:

  1. First of all, paste your source code once you've finished writing the post. While writing you may put a blank row or something as a placeholder.
  2. Download WebCodeFormatter from my OS projects download page which is a small Java app which replaces all the critical characters in your code with the appropriate unicode notations which is safer.
    I'll release a slightly modified version in the next days or weeks which will allow you to do some customizations on the way the program translates the source code
  3. On your "Blogger" post, switch to the html view. Don't switch back to "Compose" mode from now on!!
  4. Start WebCodeFormatter and paste your source code into it. Convert the source code and then copy it to your blog post.
  5. As soon as you have "copy & pasted" all of your code click directly on the "Publish post" button on Blogger. As before don't switch to "Compose" mode since in this way Blogger will again mess up your code.
If you have questions, feel free to put comments. Actually there are not so many comments on my blog here so far. Either I'm explaining myself extremely well and clearly such that there are no open questions left at all :) or things are soo boring that nobody wants to comment on them (which I hope isn't the case ;) ).

Posts you might also be interested in..

Credits: Hoctro | Jack Book

5 Comments:

.NET Dev said...

If you don't have hosting...
Don't worry ...
See
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

Anonymous said...

Thanks!

Java said...

simple and great

thanks!

Martin Thoma said...

Hi,

you may also be interested in my article about posting source code on blogger: http://martin-thoma.blogspot.com/2011/01/how-to-post-code-on-bloggercom.html

Martin

.Net Developer said...

Great job. Because I'm a newbie in this area this topic was the most useful for me.

Post a Comment