eating cucumbers without permission...

Announcing js-markdown, a (partial) implementation of Markdown in JavaScript.

I was most annoyed a few months ago to realize that a regular JavaScript “Live Preview” would be useless on a site with Markdown-enabled comments. Worse than useless: showing an incorrect preview is worse than none at all. If it was about functionality, the preview could always be done server-side; having it “live” was more about being cool than being useful.

The answer was a full Markdown implementation in JavaScript. I couldn’t find any such implementation, so resolved to attempt one myself — how hard could it be, really?

Obstacle 1: I had never used regular expressions.

As regular expressions are the very substance of Markdown, this was something of a problem. For those unfamiliar with this particular brand of voodoo, a simple expression looks something like this:

/bb|[^b]{2}/

(In case you couldn’t tell, that was actually a joke.)

If I’d been experienced with JavaScript, or any scripting language, things might’ve turned out better. That was not the case. It was a disaster.

• The longer the text, the slower it got. A live preview with a five-second delay after each keystroke is no good at all.
• With no built-in md5 functions, I had to use an external library almost as large as the Markdown script itself.
• Certain regular expression functions were only implemented in Mozilla-based browsers — why bother with a live preview that works in less than 5% of web browsers?
• It didn’t work.

Abandoning that project, I moved on to greener pastures. It was only when I got into writing Firefox extensions that both my problems disappeared. Firstly, it’s self-evident that cross-browser compatibility is not of great importance to a Firefox extension. More importantly (regarding: “It didn’t work.”), until then I’d had no idea that it was possible to do something like this:

str = str.replace(/([0-9]*)\.([0-9]*)/g, function(match, $1, $2) {
    return $2+"."+$1;
}

You really don’t want to know what I was using the first time around, but it was much more complicated. And didn’t work.

Now it was just a matter of copying the functions over and changing the syntax.

Using an md5 library was a waste of space and processing power; I replaced it with a random string generator, and the script ensures they’re unique. It shouldn’t increase the risk of collision, and it’s almost certainly faster.

The real problem was the lack of support in JavaScript regular expressions for lookbehind, atomic matching, and certain characters (e.g. \z). It’s because of this that the port isn’t perfect: I tried, and failed, to get the expressions to work properly without.

Still, work it does, though held together with a few unpleasant kludges. The fact that I Am Not A Programmer is likely to be driven home by the worst of these. As far as simple usage goes, the big one is that sometimes it needs extra whitespace before lists, paragraphs, etc., or some blocks aren’t processed correctly.

Live previewing is still problematic. I know this version doesn’t work with Internet Explorer, but I’m no longer sure why. I don’t think it has the same level of regular expression support as Mozilla, but it’s possible that it’s failing for some other reason. I’m wholly indifferent, though.

I wrote a simple Firefox extension which adds the option to run Markdown on the contents of HTML textarea elements to the context menu. That’s all I really wanted it for, this time around. It’s nice to be able to write in Markdown when slumming at heathen sites not supporting the syntax.