Saturday, March 18, 2006

Using Emacs to Edit Blog Posts

I use a modified HTML mode in Emacs to write most of my Blogger posts. I've been using GNU Emacs for years, so I'm comfortable with it, and the Blogger post editor is quite lacking as far as editors go (or perhaps the standard I'm used to with Emacs is just way too high).

You can add the Emacs lisp code shown below to your .emacs file, feel free to change the key bindings to suit - I chose most of them based on what would be mnemonic, or what was not already taken by HTML mode. One note, you could use html helper mode, but I find that mode overkill for simple blog posts, and HTML-mode is already built in to Emacs' SGML-mode, while html-helper-mode is an addon. The tags I tend to use most are href anchors (<a href...) and the eight that I've defined new key bindings for below, so standard HTML mode works fine. Update: It seems copying & pasting the text from the code section at the end of this post results in a large block of newline-less Emacs lisp. I've only tested this under Linux copying from Firefox to Emacs, but I've made the elisp available for download anyway. Update II: There is also a comment from Jason Dunsmore, below, that links to a short tutorial on using atom-blogger mode to post directly from Emacs. I've tested it and it works great, although the key bindings I have defined below will have to change, using atom-blogger-mode-map and atom-blogger-mode-hook instead of their html-mode equivalents. It's also possible to post from Emacs via email, using Blogger's email-to-post gateway (Settings->Email) and Emacs' message mode. The drawback to this is that it is text-only, no HTML. Atom-blogger mode has the advantage of allowing you to edit/delete posts within Emacs.

To get started, create a new buffer in Emacs and give it a ".html" extension, or if you've just started up, just switch the *scratch* buffer over to HTML mode by doing 'M-x html-mode'.

Once in HTML mode, just start typing away. If you have to enter one of the tags below, just use the key sequence listed. So , for example, if you need a <blockquote>...</blockquote> section, just hold down the Control key, hit the letter 'c' twice, then release the Control key and hit the letter 'q'. The cursor will be placed between the start and end tags for you. Control-c is a common key-sequence in Emacs for user-defined keys, and in the case of HTML mode, there are already some other tag insertion commands defined. To see them, type 'C-h m' while in HTML mode, and the screen will split in two, with the bottom half showing a help buffer that describes the current major mode (in this case, HTML mode). Type 'C-M-v' to scroll the help window from your current editing session, until you get to the 'C-c C-c' key bindings (Type 'C-x 1' to close the help window):

HTML mode help

You can see that 'C-c C-c h' is bound to html-href-anchor, which will insert <a href=""></a> into the current buffer, prompting you for a URL as it does so. 'C-c C-c u' might also be useful - it inserts an unordered list template into the current buffer:
<ul> <li> </ul>

So what is the 'html-span-fullpost' function for? This is because I use this technique for expandable post summaries to allow my longer posts to have the 'Read More...' links in them. So when I type 'C-c C-c s', I get this:
<span class="fullpost"></span>
with the cursor sitting between the '><'. Anything I type between these start and end span tags becomes part of the 'hidden' post, and is only shown when the reader clicks on the link to read more.

Finally, the html-lt, html-gt, and html-amp functions just insert common html-entities into the current buffer. I used this quite heavily when I was editing this post, for example, since anytime I wanted a literal '<' or '>' in the code snippets, I had to use the corresponding HTML entities, which are &lt; and &gt;, respectively.

Once you are done with your post, just mark and copy the entire buffer with 'C-x h M-w', then switch to your browser window and click the middle mouse button. You should see the entire post appear in Blogger's editor window (this is rather Unix-centric, I know. No apologies, but if you are stuck with NTemacs, I think just the standard Windows paste key-sequence 'C-v' will work). If you want, you can spell check your post from within Emacs first with 'M-x ispell-buffer'.

Here is the elisp code for your .emacs. If you don't want to restart Emacs, just mark the region containing the code below, and do 'M-x eval-region'. The idea for this code was taken from the excellent chapter on Emacs Lisp programming in the third edition of Learning GNU Emacs.
;;HTML mode customization (add-hook 'html-mode-hook '(lambda () (define-key html-mode-map"\C-c\C-cd" 'html-code) (define-key html-mode-map"\C-c\C-cq" 'html-blockquote) (define-key html-mode-map"\C-c\C-cb" 'html-bold) (define-key html-mode-map"\C-c\C-ct" 'html-italic) (define-key html-mode-map"\C-c\C-cs" 'html-span-fullpost) (define-key html-mode-map"\C-cl" 'html-lt) (define-key html-mode-map"\C-cg" 'html-gt) (define-key html-mode-map"\C-ca" 'html-amp))) (define-skeleton html-code "HTML code block" nil "<code>" _ "</code>") (define-skeleton html-blockquote "HTML blockquote" nil "<blockquote>" _ "</blockquote>") (define-skeleton html-bold "Bold text" nil "<span style=\"font-weight:bold;\">" _ "</span>") (define-skeleton html-italic "Italic text" nil "<span style=\"font-style:italic;\">" _ "</span>") (define-skeleton html-span-fullpost "HTML fullpost span" nil "<span class=\"fullpost\">" _ "</span>") (defun html-lt () "HTML less-than entity (<)" (interactive) (insert "&lt;")) (defun html-gt () "HTML greater-than entity (>)" (interactive) (insert "&gt;")) (defun html-amp () "HTML ampersand entity (&)" (interactive) (insert "&amp;")) ;; End HTML mode customization Technorati Tags: , , ,

1 comment:

jason said...

You can post to blogger without ever leaving emacs. See this howto: