Sunday, 4 September 2011

Markdown in Blogger

I'd been avoiding blogger for while because I like neither wysiwyg
editors nor raw HTML.  I find wysiwyg annoying because I never know
what the editor is doing and what sort of weird codes it is inserting
which will come back and bite me later.  I find HTML has a horrible
authoring user experience: it is way too easy to forget to close some
tags and end up with non-conforming HTML.

I have been a fan of
[Markdown](http://daringfireball.net/projects/markdown/) for many
years. I find its light weight mark up to be very good for authoring
content.  Wordpress has long supported markdown but it wasn't right
for me: the free hosted wordpress.com service couldn't support vanity
domains properly (and doesn't include the markdown plug in); I don't
write enough in my blog to justify paying for hosted Wordpress; and I
didn't fancy running my own web server with Wordpress (and its
security updates).  What I really wanted was Markdown support in
Blogger which offered free hosted blogs with support for vanity
domains.

My investigations into existing options found solutions which only
really solved the problem for post creation rather than authoring in
general which includes editing.  Typically, they were along the lines
of

  1. write blog post in markdown
  2. convert (and save) as HTML
  3. publish.

The problem now is that the post is in its converted form which means
you cannot edit the post in its original markdown syntax any more.

Instead, I decided to "roll my own" (well, reuse what exists out there
to do it my way).  The basic idea is:

   1. write and save post in markdown syntax between `pre` tags
   2. convert markdown syntax on the client-side using a javascript
      markdown implementation.

Now, if you happened to be using a browser that doesn't support
javascript, at worst you'd have an unrendered post in markdown syntax
which thankfully is quite readable already.

Fortunately, most of the hard work had already been done by
[showdown](http://softwaremaniacs.org/playground/showdown-highlight/)
which is a javascript port of a markdown.  I just took showdown and
plumbed it together with some more javascript which

   1. finds `pre` elements marked with `class='markdown'`
   2. call showdown to convert their contents into html and inject
      that back into the post inside a `div`.

It was a actually a bit trickier than I had first thought.  I'd had to
fight to check it worked in a reasonably recent version of IE which
always seemed to behave differently from the other browsers (Chrome,
Safari and Firefox).  I also fell into some weird javascript holes
(yeah, my javascript-fu mostly sucks).

The result is a .js file which you use by adding one `script` tag to
your Blog template.  It's still work in progress so I'll hold off
sharing the code (properly) until I think it's ready.

There is one major caveat.  Though I am now freed from the tyranny of
angle brackets and matching open and close tags, I still have to make
sure I escape special characters such as <, > and
& since the content of the `pre` tag still has to be html.

This article is written in markdown.  What do you think?

I hate capslock

Update 4.ix.2011: I'd originally written this in April 2006 but it
appears the following instructions still work in Windows 7.

The standard UK and US 102-ish keyboard layouts annoy me: the capslock
is in the wrong place.

I used to swap the capslock and the left control key, but this usually
caused problems whenever someone else tried to use my computer,
because they'd inevitably hit the key labelled "Ctrl" and end up
turning on capslock.  Eventually, I finally accepted that I _never_
use capslock (well, maybe once a year - max!) and now use three
control keys (i.e. the two standard ones, plus the key which is marked
"capslock").  Note: don't do this if you're a FORTRAN77 programmer AND
PROGRAM EXCLUSIVELY IN CAPITALS.

In Windows 2000 and XP, there's a feature called the [Scan Code Mapper
for
Windows](http://www.microsoft.com/whdc/device/input/w2kscan-map.mspx)
which allows you to remap keys.

You can either try to understand the scan code mapper by reading the
page linked above, or just believe that I did it once, trust me and
paste the following lines into a file `ihatecapslock.reg` (or
something similarly imaginative), and then run it through the Windows
Explorer interface.

    REGEDIT4
    ; make capslock key another control key
    [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]
    "Scancode Map"=hex:00,00,00,00,00,00,00,00,02,00,00,00,1d,00,3a,00,00,00,00,00

If you ever want to scrub your scan code map, i.e. return your
keyboard settings back to the factory default, paste the following
into a file called `resetscanmap.reg` and use it analogously:

    REGEDIT4
    [-HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]

You will have to reboot your PC for the scan code mapper to notice the
registry changes (log-out/-in might be enough to do it too).