Back to Top

Sunday, December 03, 2006

How to publish a good looking code on Blogger? - take 2

Update - there seem to be some issues with iframe-s and google reader (in the sense that its not displaying them :( ). I'll investigate the issue further shortly and hopefully can post a solution.

Hello all! First of all I would like to apologize to all of you who in the last couple days tried to access my random password generator or my password combinator. I was in the process of moving them from my free host to a google pages account. There were no major problems with it, but Google seems more reliable and also doesn't put any ads in your content. Of course you don't get any server side code execution possibilities (Perl, PHP, SSI), but currently I don't need them. To sum up: both of my scripts are available:

And I also updated the bookmarklet so that it points to the new location.

Now for the main feature: from this point I'll be using a new method to publish syntax highlighted code on the blog. My problem with the old method was that it inserted a blob of CSS in every post. The new way used is formed from an IFRAME, an HTML document which contains the highlighted source code and a small JS source which adds the expand / collapse link to the code. Here is the procedure step by step:

  1. Install jEdit. You will have to have Java installed. I recommend that you download the latest (development) version. If you use the Java based installer, it doesn't create shortcuts in the start menu or on your desktop, so you have to start it manually by issuing the command c:\Program Files\jEdit 4.3pre8\jedit.jar (unless you have installed it in an other directory).
  2. Start jEdit, and go to Plugins -> Plugin Manager. Press the Download Options button and select an other mirror. Restart jEdit.
  3. Go to the plugin manager again, and in the install tab (you'll have to be patient until the list of plugins gets downloaded) check Code2HTML (the current version is 0.5 for the development version of jEdit and 0.3.5 for the stable one) and click install.
  4. Now upen up the code you want to highlight. Make sure that the file it's saved in has the appropriate extension so that jEdit can highlight it properly (as an added bonus, jEdit correctly highlights the different languages which may be present in the same file - for example PHP, CSS, HTML and Javascript). Now go to Plugins -> Code2HTML -> HTMLize current buffer
  5. Tweak the resulting HTML code. For example I add the style body { margin: 0px; } to the stylesheet to avoid wasting screen realestate. I also add the snippet which is the google analytics tracking code.
  6. Save the HTML file and upload it (as mentioned earlier I use google pages to host them).
  7. Now in the page you wish to insert the sample code, enter the following: <iframe src="...link to the highlighted source code..." class="source_code" style="width: 100%; height: 20em;"></iframe>. Of course you can change the styling so that it blends nicely with your blogger template
  8. If you link to the javascript code show below (with a <script> tag), you will get an expand / collapse link before each iframe if the client has javascript activated
  9. Enjoy!

8 comments:

  1. It helped a lot doing my trackback page. I was struggling to put code but I kind of figure it out!

    ReplyDelete
  2. Hi,

    it looks good but there are line numbers at the left side which are selected when you select the code, so people should manually strip them before using the code you provided.

    Slavi
    http://devcha.blogspot.com

    ReplyDelete
  3. Yes, this is a problem. I'm working on a different approach and will post about it when I get it working.

    ReplyDelete
  4. I know it's a couple of years on now, but I've found a very neat solution using Live Writer and a Source Code formatter plugin. This means no external hosting of code snippets and no hackering around in the HTML. Info on how to configure and use is at http://skotl.blogspot.com/2009/02/posting-code-snipped-on-blogspotcom.html

    ReplyDelete
  5. Hello, nice article. Can i translate it into Czech language and publish it in my blog? (komihoblog.blogspot.com)
    Please, let me know. My emali adress is michal.komar@centrum.cz.
    Thaks a lot

    ReplyDelete
  6. @Komi: sorry for replying so late. As you can see, the content on this blog is licensed under a CC-BY-SA license, which means that you are free to modify and republish it (including translating it), as long as you specify the source of the article and the derived work is also under the same license.

    Regards.

    ReplyDelete