Implementing MarkDown for comments

I haven’t been too happy about the facilities for commenting in GraffitiCMS ever since I started using it. Great for minor feedback, but awful for pasting code when crafting an implementation detail as an example. Since StackOverflow uses MarkDown for its comments and I’ve grown used to that, I decided to experiment adding it to my blog here as well.

photo © 2006 David Boyle | more info (via: Wylio)

Problem number 1: finding a JavaScript implementation of a MarkDown parser. As Jeff Atwood found out: the archetypal implementation is by John Fraser of AttackLabs who, basically, has fallen off the face of the Earth. In fact, the AttackLabs web site is no longer active and is generically parked. Not to worry: the code is still available. It turns out it’s called showdown.js and you can get it here.

(It’s hosted elsewhere as well, by the way. It seems that several people have copied it into various software repositories.)

Problem number 2: GraffitiCMS modifies the text of a comment when you save it. The first is to encode the text so that entities like left angle bracket are converted to < and so on. The rest of the modifications are pretty benign — essentially converting paragraphs by surrounding them with <p></p> tags — so I wrote a small bit of JavaScript on the client to remove those tags and then convert the result from MarkDown to HTML.

That seemed like the simplest way out since I didn’t want to pre-process all the comments I already have in the database. Although this solution may be the easiest, it is a bit of a hack to be sure. Then again, I don’t particularly want to change the GraffitiCMS code either – I did that before and ran into issues when I wanted to refresh from the latest code from the GraffitiCMS project on CodePlex. I may be revisiting this decision later but for now I’m winging it.

Problem number 3: providing a preview panel so that you can see what your comment will look like before you submit it. Well, OK, that wasn’t really a problem: it just amounted to modifying the page templates and writing a bit more CSS and JavaScript. Cool.

So, there you have it. Rich text comments using MarkDown on the boyet blog.

  Loading links to posts on similar topics...