Flowing Markdown Upstream

Markdown has gained a foothold as one of the most popular (of not the most popular) alternative markup language recently. One of the reasons is that it has been ported to most platforms (Or is it the other way around?). Recently, I’ve tried using it as an input format for end users, although with mixed results. Those who are tech savvy, learn it quite quickly, and the results are far better than traditional wysiwyg editors, based on contentEditable. However, the less technical people have come to expect wysiwyg, and the idea of writing a markup language – even as elegant as markdown – is alien to them.

Inspired by the markdown port to javascript, I got an idea, which I have been fleshing out for the last couple of weeks. The idea is to combine markdown input with real-time preview, and the result is a sort of middle ground between raw markdown input and wysiwyg; As a user, you still have to write markdown, but the feedback is visual and immediate.

Unfortunately, I don’t have any candidates for trying it out on, but I’ve now put it on github, so now it’s out there. There are of course room for improvements, but the basics are in place. I’ve even incorporated an extension-capability, since this is something I’ve used myself, when using markdown in a CMS.

There’s a demo at: http://troelskn.googlepages.com/upflow.html

And you can fetch the code from: http://github.com/troelskn/upflow/tree

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.magain.com/ mattymcg

    This is really cool Troels.

    Only criticism I’d make (and it’s possibly only an issue for this demo, not for every usage of it) is that there is no obvious place to click to see what your markup will look like. Sure, you could click on an adjacent edit-in-place field, but that could be confusing if you weren’t intending to edit that other field.

    Possible worth taking a leaf out of Flickr’s edit-in-place script, which displays a “Save” and “Cancel” button. I think it’s important to let users explicitly indicate “Hey, I’ve done this, and I’m happy with it… let’s run with it”.

    Otherwise, impressive work!

  • Anonymously

    HTML… was suppose to be “markdown”, but they made it read only….

  • Troels Knak-Nielsen

    @Matt
    Thanks, and I concur; It’s not obvious how you leave the focus area. Although you – technically – don’t need to be able to do it, it’s a natural thing to attempt to. I’ve added a “Close” button per your suggestion.

    @Anonymously
    Judging from the discrepancies between browsers, I wonder if it’s even that.

  • xxparanormalxx

    wow. bloody cool.

  • webaddictz

    You know, there’s a website in the Netherlands that uses some kind of syntax and there’s a preview pane floating near the textarea. Now that I’m writing this comment, I see sitepoint does the same :) I think that having the preview pane directly and being able to your changes instantly would help many users.

    Anyway: the thought is great, so good even I might just implement it in the Wiki I’m writing.

  • Simon

    Hi,
    I’m looking into exactly this problem now, but my preferred solution is a bit different. I would like a editor where you can choose to enter content in a wysiwyg way with basic formatting and the editor takes care of storing it as markdown. Then you would get easy editing capabilities for almost all tastes.
    Any thoughts on this? Possible?

  • Troels Knak-Nielsen

    @Simon

    You could use a tool such as pandoc to convert from html to markdown, but there will be a lot of edge-cases that simple can’t be transformed reliably. Some contentEditable editors try to restrict the formatting through javascript, so you might want to turn on such features.

    Ultimately, I think it’s better to require users to enter text in a non-visual form, since it makes them think differently about the task. Of course, this won’t work with all kinds of users, so I guess your solution might be needed in some cases.