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](/assets/img/blog/markdown/markdown.png)
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.
Proposal
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
name = ________
<label for="name">Name:</label>
<input type="text" id="name" name="name"/>
Radio buttons
sex = (x) male () female
<label>Sex:</label>
<input type="radio" name="sex" id="male" value="male" checked="checked"/><label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female"/><label for="female">Female</label>
Check boxes
phones = [] Android [x] iPhone [x] Blackberry
<label>Phones:</label>
<input type="checkbox" name="phones" id="Android" value="Android"/><label for="Android">Android</label>
<input type="checkbox" name="phones" id="iPhone" value="iPhone" checked="checked"/><label for="iPhone">iPhone</label>
<input type="checkbox" name="phones" id="Blackberry" value="Blackberry" checked="checked"/><label for="Blackberry">Blackberry</label>
Drop down
city = {BOS, SFO, (NYC)}
<label for="city">City:</label>
<select id="city" name="city">
<option value="BOS">BOS</option>
<option value="SFO">SFO</option>
<option value="NYC" selected="selected">NYC</option>
</select>
Required fields
zip code* = ________
<label for="zip-code" class="required-label">Zip code*:</label>
<input type="text" name="zip-code" id="zip-code" class="required-input"/>
Feedback
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!
Herman van der Veer
If you enjoyed this post, you may also like my books, Hello, Startup and Terraform: Up & Running. If you need help with DevOps or infrastructure, reach out to me at Gruntwork.