Format Source Code for Web

Introduction

As both a programmer and blogger, one needs to publish source code on blogs frequently. So how to do it? As a newcomer to blogger community, I looked into the problem for a while. There are two issues related to this if you only want to display your code plainly, without syntax highlighting:

1. HTML treats consecutive spaces, tabs, line breaks as a single space, which removes indentations of the code.
2. Special characters like &, <, >, and " need escaping, especially for HTML code itself.

My initial thought is to use sed, since the above issues can be simply solved with line by line processing, which is what sed is designed for. Later on I realized that why not use Javascript? Then I can publish code everywhere, which means that I can mobilize web authoring, in addition to mobilizing web surfing.

Solution

Following is the tool to convert source code to HTML fragments to be inserted in blogs or normal web pages. Simply paste your source code into the 1st textarea, and copy the HTML code out from the 2nd textarea.

It should be noted that I use CSS to format the source code in <pre> element, therefore one attribute "code" appears in the 1st line of the HTML output. One may tweak it according to his/her own preference, e.g. change to inline style sheets.

Source code:

HTML output:

Implementation

The source code for above form and related script is shown below formatted with itself.

<form name="converter" action="">
  <table>
    <tr><td>Source code:<br/>
      <textarea name="source" onchange="formatCode();" rows="10" cols="80">
      </textarea>
    </td></tr>
    <tr><td>HTML output:<br/>
      <textarea name="output" rows="10" cols="80">
      </textarea>
    </td></tr>
  </table>
</form>

<script type="text/javascript">
  //<![CDATA[
  function formatCode () {
    var form = document.converter;
    var s = form.source.value.replace(/&/g, '&amp;');
    s = s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    form.output.value = "<pre class=\"code\">\n" + s + "\n</pre>\n";
    form.output.select();
  }
  //]]>
</script>      

We use HTML element <pre> to solve the 1st issue listed above. In the script, function formatCode escapes special characters; note that we should handle character & first.

Update (2008-1-17): for Emacs users, you may find htmlize useful for this task (with many cool features). Gentoo users can simple emerge htmlize. I just stumbled upon this cool extension when reading the comments for Steve Yegge's nice post.

Mobilize Web Surfing

At first glance, web surfing is naturally in a mobile way. You can surf anywhere, anytime nowadays. However, the important data associated with web surfing are not mobilized at the begining. The most noteworthy example is your favorite websites. Traditionally, you have to store them locally in your computer, in a format only known by your chosen web browser. You have to copy your bookmarks around and import them whenever you use a different computer, or even try a new browser. That is possibly why web browsers are bundled with features like import/export bookmarks and even the tool to migrate bookmarks from competing browsers. Even armed with those weapons, you still have the problem of synchronizing your bookmarks between different computers; not to mention that the import/export process is really boring.

So here comes the so-called social bookmark, with the most successful example: del.icio.us. As its name suggests, it is really a delicious tool to use. After registration, you can install browser extentions to make the service provided by del.icio.us to integrate with your browser seamlessly. Now you can access your bookmark anywhere: even on a computer without the extension installed, you can simply access your bookmarks by visiting the del.icio.us website. With the latest Firefox extension, one bookmark sidebar is installed, which gives you instant access to your bookmarks. In addition to these handy bookmark functionalities, you also get social effects. When you add one nice page to your collection, you now can choose popular tags which is automatically provided by the service by examining who else chosen to tag the same page. You now can select the right tag easily.

A more efficient way, compared with checking updates of your favorite web pages individually, is to syndicate them and process them in a RSS reader. Most web surfers have already done so. At first, we use a offline RSS reader, i.e. subscription file is stored locally and RSS updates are also fetched to local computer. A question then arises, similar to the bookmark problem: how can we read RSS updates in different places: e.g. work and home? We can synchronize the subscription (although tedious), but we then have to manually mark those already read in one place (note that typically new items pop up very quickly). Online RSS reader comes into rescue now. Simple register one, e.g. Google Reader, import your subscription file and start reading everywhere. For my own experience, the online reader can compete with the offline reader in almost every area, and the developing pace of such online readers is also extremely fast!

Yet another example is online notebook like Google Notebook. Remember those yellow stick notes? One certainly take many notes during web surfing. Now you can write and read them everywhere.

There seems to be endless examples to fully mobilize your web surfing experience: you can put your calendar online, write your report online, investigate your financial status online, or prepare your presentation online. Such experience is really excellent, and the only thing we should be cautious is to guarantee the network connection to avoid any agony.

Emacs + Firefox as Blog Development Environment

In my previous post, I advocated to use Emacs as a blog post editor. This post deals with how to setup a nice blog development environment with Emacs + Firefox.

Introduction

As discussed in the post on Immersing Tutorial, a development environment is more productive if it can reduce the time for context switching, i.e. keep edit, building and running in the same environment. With Emacs + nXhtml + w3m, we can achieve this goal. The only but critical problem is that the functionalities of w3m is quite limited compared with popular browsers like Firefox: e.g. it does not support Javascript!

After googling around the web, I got the conclusion that it is impossible to embed a Firefox browser within Emacs, i.e. there seems to be no interface like emacs-w3m, which links Emacs and w3m. I'm not sure whether this is due to the fundamental limitations of Emacs or there is purely no interest on such functionality (the former seems to be more likely since even Emacs guru Bill Clementson have to use both Emacs and Firefox).

I then started an adventure to investigate the alternatives. The first thing come into my mind is to resort to Eclipse. After setting up Eclipse + WTP and changing key scheme to Emacs, I successfully created a static Web project and started writing a new XHTML page. The problem I encountered next is that I cannot preview the web page just created! My intuition told me that the context menu "Run as Server" seems to be the solution, however "HTTP Preview" always complained that port 8080 is occupied by another process and I found nowhere to change the port setting. After long time searching, I finally gave up the Eclipse approach: I'm just such a novice to Eclipse that it may not be justified to learn this giant with the only purpose to write blogs.

I then settled down on the approaches to use Emacs and Firefox jointly. I first tried the Edit HTML Bookmarklet, it is quite handy to change the page you're viewing (with similar functionality as Firebug), but the drawback is that your changes are only saved in memory but not on disk. I then installed ViewSourceWith add-on. It can call an external application like Emacs to view and edit the web page you're viewing. It works pretty well but I soon realized that it is not a developing model I like. The underlying concept for this add-on is that your main environment is Firefox and you occasionally invokes Emacs to tweak the HTML code. However what I need is on the contrary: I'd like to work mainly in Emacs, and use Firefox to preview the blog post when necessary.

Finally I come to the current solution I'm using: setup Emacs browse-url functions for Firefox. By doing so, I can edit post in Emacs, and preview it with nXhtml key binding C-C C-h b f. Following is the detailed setup process.

Installation

We are going to look at how to setup the BDE (please do not confuse the term with Borland Database Engine). The easier part is on Firefox, so we treat it first.

Firefox

Just install the latest Firefox distribution. To make efficient usage of Firefox for blog development, one may need Firebug and Web Developer. If you are a fan of Emacs, you may also try Conkeror, but be warned that you should read the manual carefully since it will dramatically changes your Firefox (and your just installed Firebug or Web Developer may not work well with Conkeror).

Emacs

If you read this long, you should be a regular Emacs user therefore you may not need to install Emacs additionally. But just for my future reference, I'd like to note that Emacs 23 worked fine with nXhtml.

Following is a list of Emacs extensions and programs related to Emacs for blog development.

Aspell

We should strive to remove spelling errors from our blog posts. We may use spell checking functionalities provided by blog services, however this is inefficient considering that we are mainly editing our blogs offline. Therefore on-the-fly spell checking within Emacs is needed. Aspell is a popular spell checker and Emacs has built-in support for it. So just install aspell and the dictionary for your language, and add the following lines to your .emacs:

(setq-default ispell-program-name "aspell")
(autoload 'flyspell-mode "flyspell" "On-the-fly spelling checker." t)
(add-hook 'nxhtml-mode-hook 'flyspell-mode)

Note that you should ensure that aspell is in your searching path.

nXhtml mode

After download and extracting the package, add the following lines to your .emacs:

(load "/path/to/nxhtml/autostart.el")
(eval-after-load 'nxhtml '(define-key nxhtml-mode-map [f2] 'nxml-complete))
(setq nxhtml-skip-welcome t)

Some explanation of above code:

• 1st line: change it to match the directory where you installed nXhtml.
• 2nd line: if you are working in Windows, you need this line since normally nxml-complete is bound to M-tab which is used by Windows itself. You may use keys other than f2 of course.
• 3rd line: this is to remove the welcome message.

Link Emacs with Firefox

Add the following code to your .emacs:

(setq browse-url-browser-function 'browse-url-firefox
      browse-url-new-window-flag  t
      browse-url-firefox-new-window-is-tab t)

Make sure Firefox is in your search path. Note that currently there is one issue here on Windows (I have not tested under Linux). If there is no running Firefox, the preview works just fine; otherwise, preview actually opens two new Firefox tabs (in addition to those already existed). This is annoying but not a big issue. I have tried a few browser-url related changes in .emacs but failed.

Other Emacs Extensions

You may install other Emacs packages e.g. CSS mode and Javascript mode if you like.

Final Words

After installation, we can now edit blog posts in Emacs (with the help of nXhtml), and preview it in Firefox. So far, so good. It would be exciting if we can embed Firefox in Emacs or vice versa.

Is Gentoo Linux the Choice for Minimalists?

Merriam-Webster defines minimalist as: one who favors restricting the functions and powers of a political organization or the achievement of a set of goals to a minimum. I tends to believe that myself is a minimalist, especially in the areas of computer usage. So what should be my choice for Linux distribution?

There are hundreds of Linux distributions listed in distrowatch while my favorite is Gentoo. To discuss whether it is suitable for minimalists, we need one example for comparison. Here I will choose popular Ubuntu, without any intention to start a flamewar between the two distributions.

If one is the minimalist in terms of installation procedure, Ubuntu seems to be a better choice: the setup procedure may take less than half an hour on modern systems, and during setup, one only needs to make a few selections. Gentoo, on the contrary, requires a rather long process: if you perform a stage 1/3 install, you need to type many commands, setup some configuration files, and modify other configuration files; you need a decent Internet connection, and the compilation process might be quite long (if not longer than LFS). On a not-so-modern setup, to build a system with similar functionalities as what Ubuntu offered, you may need several days. So why bother?

The reasons are:

• Minimal Components: you can build a minimal system out of your own taste with Gentoo: you only need to install programs you like to use (and their dependencies of course, note that you also have some freedom to choose which dependencies to install by control the USE flag), you also specify the minimum number of services to start at boot time. In the end, you have setup your own system with minimal components.
• Minimal Upgrade: The upgrade system is also minimal. After installation, Gentoo is versionless. For example, you may use your Gentoo box for a long time without any upgrading. But one day, you may be tempted to upgrade one program, say Firefox, since the new features attract you. Then after synchronization of portage, one simple emerge command can bring this particular program up to date (this may update some dependencies or install new dependencies if needed).
• Minimal Security Risk: you are less prone to security problems since you have less programs installed.

In summary, the installation for Gentoo can not be labelled as minimal, however this is only needed once for one computer. After installation, you can enjoy all the other benefits from Gentoo. The customization capability of Gentoo tends to encourage me to link it with Emacs: if you like Emacs and want to customize everything, Gentoo might be your favorite distribution.