Markdown: the language of the web

The PHP of Markup Languages

You've been browsing reddit for a while. You think you have waited long enough, and accumulated enough courage to finally post your opinion again. When you get to the commenting section. You want to format your creative thoughts but it says, it only supports Markdown formatting. "Never heard of it!"

The same goes if you are trying to use Stackoverflow, they support Markdown. Or Github for that matter. Any respectable website that allows user input allows you to use Markdown. What the hell is Markdown?

What is Markdown?

Markdown is a markup language. Let's call it a set of simple rules you can use to format your text. It was created by a word class jerk, John Gruber(I have my reasons). But still, it makes it easy to create complex text formatting that is easily readable by humans and parsers.

It is not the only one that exists, there are other popular ones like BBCode or Textile. There's a whole bunch.

The reason we need such markup instead of just using HTML tags to format is because, well, not everyone knows HTML. HTML does not stand for stand for Human Markup Languge, and HTML is fairly complicated if you just want to make a simple word bold.

HTML: 
<b>Bold</b>

Markdown:
**Bold**

This seems simple for both cases, but a simple mistake in HTML can ruin the flow of the whole page. If I forget the closing tag </b>, it will turn the rest of my page bold, at least until it encounters another </b> on the page.

Also, it is never a good idea to allow users to enter HTML directly on the page. It opens up your page to Cross Site Scripting, or more importantly, your website may end up looking like Myspace.

My space

MySpace, at the height of its glory.

So we use Markdown. It is still legible even with the code, and it prevents simple user errors from happening. Also, it is fairly simple to learn. When I created this blog, I didn't think of what markup to use. Because I am a developer and I have been writing HTML for more years then I can remember, it was perfectly normal for me to avoid it all together.

But it didn't take very long before I started forgetting to close a tag here and there, and my whole page started to look like a mess. I moved to markdown, and I will never go back. It allows me not only to use it, but I can also use HTML for some custom section of my code. For example, I think it is much easier to use HTML to build a complex table than any markup language.

How do I markdown?

Markdown has a very simple syntax. Let me show you how I wrote two of these paragraphs:

The reason we need such markup instead of just using HTML tags to format is because, well, not everyone knows HTML. And HTML is fairly complicated if you just want to make a simple word **bold**. 

    HTML: 
    <b>Bold</b>

    Markdown:
    **Bold**

This seems simple for both cases, but a simple mistake in HTML can ruin the flow of the whole page. If I forget the closing tag `</b>`, it will turn the rest of my page bold, at least until it encounters another `</b>` on the page.

There are small differences in the syntax of every website. Everyone adds few features or removes some for their own needs. I will give you the basic that can be used in most.

Paragraphs

To create a paragraph just press enter twice.

Look at me, I am paragraph one.

And I appear in a second paragraph.

Italic text

You can surround your text with a single star * or underscore _

*Italic* and _italic_

Bold text

Like we stated above, you can use double stars ** on each side or double underscore __,

I am **Bold** and __Beautiful__

Lists

There are two types of lists, ordered and unordered. Ordered lists has a number preceding it for its position on the list. Unordered lists just show a bullet.

Here is why Gruber is a jerk

1. He didn't update Markdown in years.
2. He got mad at anyone that tried to standardize markdown.
3. I guess he created it so he earned the right to be a jerk about it. 

So here is what I have to say in an unordered manner:

* Thank you for this cool markup language.
* standardmarkdown.com is more informative than commonmark.org
* work with Jeff Atwood, he means well.

You can replace the star * with - or +. You also don't need to have the numbers be consecutive.

Links

This was the most unusual for me to learn, but it is in to stay in my brain now:

You can learn about [Markdown here](http://commonmark.org/)

[Click Me!](http://lolcats.com)

Images

Images Are very similar to links, all you have to do is add an exclamation point ! in front of it.

![Alternative Text](http://cdn.idiallo.com/photo/13/beachbum.jpg)

Blockquote

This is a block quote. To create it, just add a greater than sign > before your text

> This is a block quote. To create it, just add a greater than sign `>` before your text

Headers

You can create headers simply by using #. One for h1, two for h2 and so on.

# Big giant title

## Not so big title

### You are not very big now are you?

Most website implement these basic ones and add more syntax made special for their own needs. However, the list I provided should be a good place to get started.

How do I add support for markdown on my website?

Almost every language today has a library to parse markdown. Whether you are using PHP, JavaScript, C# or Ruby you are covered. Commonmark.org is a good place to find all the resources you need. Just type <your language> markdown library on your favorite search engine and you will find a nice library.


Markdown allows you to create complex formatting of your text without having to write complex HTML. It is gaining more and more support on more websites. It is the Wordpress of Markup languages. Learn the basic syntax so you can finish writing that comment on reddit.

By the way, the comments of this post supports Markdown. Feel free to try it and say Hi!


Comments

There are no comments added yet.

Let's hear your thoughts

For my eyes only