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 FilesjEdit 4.3pre8jedit.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 responses to “How to publish a good looking code on Blogger? – take 2”

  1. @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.

Leave a Reply to Milton Ramirez Cancel reply

Your email address will not be published. Required fields are marked *