Tuesday, July 26, 2011

Proposal: extend Markdown syntax to support form elements

Markdown is a lightweight markup language that can be converted into HTML. The main inspiration behind its syntax is to copy what most people have used for years to decorate plain text emails. For example, if you emphasize a word by surrounding it with *asterisks*, you get <em>asterisks</em>. If you try to put in a page divider with a bunch of dashes ---------------, you get <hr/>. The syntax visually represents the type of HTML output you desire; in a way, Markdown is the onomatopoeia of markup languages.

Markdown was created by John Gruber and Aaron Swartz

Markdown is VERY easy to read and write, so it's a great choice for CMS, wiki and WYSIWYG use cases. GitHub and StackOverflow both make heavy use of Markdown and have created their own Markdown extensions and implementations: GitHub flavored Markdown and MarkdownSharp. I too am a fan of Markdown: I think it's perfect for formatting answers on StackOverflow, it's a slick way to support rich text formatting in Resume Builder, and in my open source projects, it's an elegant solution for readme files that are perfectly readable with or without a Markdown interpreter.


In this blog post, I'm going to propose a small extension to the Markdown syntax: support for forms. There are a number of CMS and wiki use cases where I've wanted to allow users to create a custom form (e.g. a simple poll or event RSVP) without having to write out the full HTML for it. I even created a github project (forked from wmd) to try to implement this extension, though I've been too damn busy to get to it. Perhaps someone will be inspired by this post and help me get this thing rolling :)


Text fields

Radio buttons

Check boxes

Drop down

Required fields


Hopefully, merely looking at the examples above makes my proposal clear. If not, I've clearly failed, as Markdown's central goal is readability. Either way, let me know what you think in the comments. Also, feel free to fork my github project for this proposal and start hacking away!

Update: Geoff saw this post, forked my project, and implemented the proposal! Awesome work Geoff!


Geoff said...

I went ahead and forked your project, and added implementations for text input boxes, radio buttons, and checkboxes. My fork is at https://github.com/maleldil/wmd

Jim Brikman said...

@Geoff: dude, awesome! Crazy fast work too! I can't wait to play around with this. I wonder if you should do a pull request to the original wmd library I forked.

Geoff said...

I still have to implement drop-downs and required fields before doing a pull. Should be able to bang it out sometime tomorrow, though. Then I need to learn how git/Github work to merge the changes (haven't ever used any of the branching/forking functionality of any DVCSes yet). Should be fun :)

Jim Brikman said...

@Geoff: nice. Make it happen :)

Tiger said...

Jim & Jeff --

This is really useful! Please keep me posted!

Tiger said...

Oops... Geoff, not Jeff. Sorry! Thanks again!

Geoff said...

I finished implementing the rest of the features. I sent you a pull request if you want to merge it back into your repo.

Jim Brikman said...

Will merge it in soon as I can. Just signed a lease for a new apartment and am totally buried with moving. Thanks for the crazy fast work :)

Tiger said...

Very cool. I would like to put up my modded version of this to get your feedback.

Karn Chandra said...

Great work, Geoff and Jim. I have downloaded Geoff's code from Github to use it into my project.

Could you please guide on how to use Geoff's code on command-line to generate pages with HTML forms?

Thanks a lot!