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.