Back to Top

Thursday, October 12, 2006

How to publish a good looking code on Blogger?

This article is considered obsolete. Please read the followup post.

From time to time I would like to publish a post in which I can show code snippets. However the standard <code> or <pre> tags look way too boring. Something with color stands much more out. I was thinking: if I had my own server and would host my blog there, I could add automatic syntax highlighting in no-time using GeSHi (Generic Syntax Highlighter). Then it hit me: why not use the demo hosted by them and copy the output over as HTML? It's not as elegant or simple as having a server-side script taking care of it, but it's better than the standard look. So here are the steps:

  1. Head over to the GeSHi demo page and plug your source in. Play around with the settings until you get a satisfying result.
  2. Save the resulting page (it would easier to use view source, but since this is a dynamically generated page using parameters passed with the POST method - rather than GET - it doesn't work).
  3. Open it in a text editor (like gedit or notepad) and find the style section where it says <style type="text/css">/* GeSHi (c) Nigel McNie 2004 (http://qbnz.com/highlighter) */ and copy it over to the blog post
  4. Find the start of the code (you can do this easily by searching for style="border: 1px dotted and copy it over until the end of the code. This you can recognize by the sequence </div></li></ol>
  5. Add a final </div> after the part you just copied.
  6. Because I use a Blogger template which styles list items in a special way and also restricts the width of the part where the post is displayed, I have to add the following lines to the style sheet:
    div.code { overflow: auto; width: 100%; }
    div.code li {
     list-style: decimal outside;
      padding-left: 0px;
      margin-bottom: 0px;
      background: none;
    }   
    
    and also add the code class to the starting div (to do this go to the start of the part you copied and where it says class="[something]" add code, so that it looks like this: class="[something] code"
  7. Enjoy :)

There are a few problems with this approach: (a) the biggest is that it's a multi-step fairly complicated procedure (b) If you have multiple post with source code on your page you will have duplicate style-sheet information in your page (c) It is not recommended to include style information in-line or in the main body (the style tags you copy will end up in the body instad of the header where they should be put) (d) While copying the code you might have some weird characters appear (e) GeSHi is not perfect (for example in the code below it gets confused by the embedded javascript), but it's the best I've found so far. It is a beta solution and if any of you have ideas on how to improve it, please take the time to write a comment. As a bonus you find below the source code for my Javascript random password generator (not that you couldn't do a view source until now, but this is more accessible).

8 comments:

  1. Thx. I have found this kind function for a long time, and I found serveral solutions. However, I thought GeSHi is the best soultion so far.

    ReplyDelete
  2. Could not get the highlighting ( probably my mistake ) but still great posting !!!

    ReplyDelete
  3. See alternate approach for all blogs:
    http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

    ReplyDelete
  4. Nice, it is a little bit complicated.

    ReplyDelete
  5. how to write code on posting blogger, see like notepad,.. can u tell me,..
    sorry my english is not well, i'm indonesian,..
    i'm looking for tips n trick blogging to make my blog nicely,..

    ReplyDelete
  6. Anonymous6:21 PM

    Use my free web app BlogTrog CodeWindow http://www.blogtrog.com

    It works in Blogger and RSS Feeds (including Google Reader). In RSS feeds, just the highlighted code is shown. When Javascript is available, the fancy CodeWindow is shown.

    ReplyDelete
  7. Anonymous12:05 AM

    great post

    ReplyDelete
  8. u can use a simple online app, TOHTML 

    here u can enter the source code , select the language and style and get html code ,that u can paste in the editor to get a formatted code, i have used it and it also highlights different syntax.. check a post for demo a post for demo here

    ReplyDelete