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 README.md( 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.
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 github , here. 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.
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.