Improving productivity with markdown

I have always found the idea of working with markup languages especially HTML which is used so often, quite cumbersome and repetitive. Most of the time we spend building a website is used up in generating and hosting useful content which means tons of p tags, hrefs and imgs to be dealt with. Now there are tons of tools out there which can improve our workflow as far as web application development is concerned.  I am particularly interested in markdown.

Markdown is an amazing utility that let’s us type in almost plain text to get rich HTML formatted documents. It’s according to me one of those WYSIWYG editors out there. Almost all of the blogging sites use it, stackoverflow uses it’s own flavor of markdown for posting answers and comments. Github uses it for showing a short description for every project it hosts, it’s called the md and markdown are the extensions to denote markdown source) file.

Paragraphs in markdown can be written exactly like normal text, it’s automatically surrounded by p tags. Images and links can also be easily embedded and code blocks can be as simple as indenting by 4 spaces or using backticks (`). It gives us the flexibility of adding classes and id’s in some flavors(not all).

I am not saying that markdown can completely replace HTML. Well not yet, but it’s getting there, there is still a lot of functionality missing in markdown. However we can tap all the goodies that it has to offer and generate good content on the web efficiently.

Where can I use markdown?

Markdown can be easily integrated into normal HTML documents thanks to this javascript port of markdown and this nice little script contributed by Paul Irish. The markdown tool is now available for most of the languages (Python, PHP etc.) and therefore can be seamlessly used with web frameworks in a plethora of languages.

HTML5 Slide shows!

Trust me guys, the era of powerpoint , keynote etc is long gone. We are living in the 21st century and HTML5 is the way to go. It allows us to develop slides for different devices and there are some very good javascript libraries out there to do the trick(and the best part is most of them are evolving for markdown support :D  Ex: Reveal.js , impress.js). I have also noticed that every year(at least for the last 3 years), presenters in googleIO use a very slick slidedeck and it’s a really popular HTML5 slidedeck these days.

Paul Irish on the revolution of chrome dev tools.

What interested me most was the slides he used were authored in markdown and during this presentation he edited some of the source in the chrome dev tools, saved and hit refresh and the HTML output was generated, local files were modified and all of this happend on the fly!

I really wanted to see this happen. So I made a little markdown preprocessor of my own currently hosted on githubhere. I have used PHP Markdown and google prettify for the markdown and code highlighting. If you want some client side utility for the same, I suggest getting started with showdown.js and highlight.js.

Using chrome dev tools to edit and save local files

Chrome dev tools are evolving to replace IDE’s in the future and with tools like livereload , live-edit(already embedded in chrome devtools) and the autosave feature(which lets you map local files to the sources in chrome dev tools- will ship with the later versions of chrome, those who want to try now can download a developer version of chrome canary), it’s already happening.

PS: This post was written in markdown :P


One thought on “Improving productivity with markdown

  1. This is the right blog for anyone who wants to find out about this topic. You realize so much its almost hard to argue with you (not that I actually would want

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">