Stack Overflow's Markdown Editor Adapted

Stack Overflow is a familiar, and cherished, name to many a programmer these days. No wonder, as it is nothing short of an ingenious way of finding answers to the many problems you come across as you’re writing code. Myself I can’t remember the last time I consulted a book on programming, since starting to use SO many years ago. One of the cool things about the site is that you write your questions/answers in the (now ubiquitous) Markdown language, which is a quite readable little language that translates to HTML with support for simple formatting such as italic and bold text, plus, not least, code blocks.

What makes the Stack Overflow experience especially neat is the embedded Markdown editor, which has a toolbar with formatting buttons (although you can just type the corresponding formatting syntax yourself) and perhaps most importantly live preview. It makes for a really nice experience when writing questions and answers, seeing the result instantly as you write should not be underestimated in the long run.

As it turns out, Stack Overflow have kindly released their editor into the public domain, as PageDown. MuzHack, on the other hand, was in need of a Markdown editor with live preview, so I decided to fork PageDown on GitHub and create my own version for this purpose.

After a couple of days of intensive hacking, I was able to mould PageDown into a version that integrates well with MuzHack and functions well enough that it made it into a new MuzHack release! There are probably bugs lurking, but I haven’t discovered them through my own testing, so I decided it was better to make available the new and improved experience over the old preview-less Ace editor.

Among the more noticeable changes compared to the original PageDown, I’ve converted the formatting icons into vector fonts rather than the original bitmaps. The rest of MuzHack uses icon fonts anyway, so it might as well hold true for the editor too. Plus, they’re easier to work with than bitmaps. I will probably keep reworking PageDown, in order to simplify the codebase (it’s pretty messy at the moment) and improve the editing experience, as work on MuzHack progresses.

So far, I can tell that the project editing experience in MuzHack has improved greatly. It feels so much better to have an instant preview while writing the Markdown as opposed to having to wait until changes have been saved. It might also save you from unintentionally publishing revisions with errors, and having to re-publish due to this. Feedback was favourable from showing live preview functionality during the recent presentation of MuzHack at the Norwegian Notam centre.