Markdown Language Tutorial - You Need to Learn It
Markdown Language Tutorial - You Need to Learn It

In this post you will learn what is markdown language, why do we need it and how you can apply it to your everyday need.

The first question is what is markdown at all?

It's a markup language where we can apply different formatting.

How markdown looks like

But why do we need it at all? If you think about writing text then we really don't have a lot of possibilities to write and format it.

For example we have Microsoft Word which is the most popular solution to write texts. The main problem is that inside Word it is super difficult to format text correctly. It can be broken at any moment. Also you can't simply take formatting from the Word and paste it to another place. It will be broken for sure.

The main idea is that markdown is a special markup language that you can learn in a minutes and you can use it in different environments. You can simply take your markdown file that you wrote in one machine, transfer it to another machine and open it in any application that can read markdown.

Markdown to html

Or maybe you need to generate HTML or PDF file from your markdown. This is all completely possible and it will work really smoothly because it is much safer to use it in comparison to Word for example.

Now let's have a look how we can typically write markdown. Let's say that I'm writing a post.

# This is my first post

As you can see we just push a hash before the text to say that it's a title. If you are familiar with HTML you know that we have there tags from h1 to h5. This works in exactly the same way. We can write markdown similar to HTML but it is much easier to read and support markdown than plain HTML.

If we need subtitle we can just write like this

# This is my first post
## And sub title
### And sub sub title

This is really easy to remember.

After this we can simply provide some text.

# This is my first post

Let's write some text.

But at some moment you decided to add a link. If we are talking about HTML again you need to write a href tag and it won't be that readable. How we can add links inside markup?

# This is my first post

Let's write some text. Here is [a link](http://google.com). Some more text.

We wrap text of the link with square brackets and write a link directly after in round brackets.

But let's say that now we want to add an image.

# This is my first post

Let's write some text. Here is [a link](http://google.com). Some more text.

![Image](https://picsum.photos/seed/picsum/200/300)

Write more text.

As you can see adding image looks exactly the same like adding a link but we put an exclamation mark beforehand.

What is important here? We are writing markdown but it is completely readable. It is not like we are writing some programming language and nobody can understand it and then it is being compiled to for example HTML page.

You can directly read markdown even if we never saw it in your life. It is readable because it's a plain text.

Now we can throw this markdown in any tool which can generate an HTML page from it and get a solid HTML file without any unnecessary symbols. If you tried previously some text editors like CK Editor for example they will generate lot's of not needed tags inside a resulting HTML.

Generated HTML

As you can see our HTML looks correct.

How to learn it?

But here you might say that it's difficult to learn markdown language and syntax. You can just go to markdownguide.org and there you have all basic syntax that you need every day like headlines, paragraphs, line breaks, lists, code, links, images and html.

As you can see it is not a lot to remember and you can always look in the documentation if you forgot something.

Real example

Now let's look on one of the files that I have here. Actually I write all posts for the website by using Markdown. This is extremely efficient because I have them just like plain text without any additional editors, it works offline, out of the box until the end of my life.

This is how one of the posts look like.

How markdown looks like

As you can see here we start with the title. After this we have just some text with highlighted properties that we escape as code. Later I used subtitle and a code block.

Compiled post

Here is how our HTML looks like when we convert our markdown file to HTML. We have nicely formatted page without not needed tags.

Use case - Writing Notes

Now your question is for sure "What are use cases for markdown?".

First of all, as I already said, you can use it to write notes. This is exactly what I have. I have all my notes during last 10 years as markdown files. I simply have them inside a Git repository. I don't need any program.

But if you want some program for notes that supports Markdown there are lots of programs out there. For example one popular program is a Bear for MacOS which looks ling of similar to Evernote but inside you can write Markdown.

Use case - Writing texts for web

Second important use cases is writing anything for websites. For example I write posts for my websites and it is much more comfortable to use Markdown and then just convert it to HTML.

Rendered post

As you can see here is a post that you saw previously on my website. This all is created with Markdown.

Use case - static generators

Another use case for the websites is Markdown in static generators. A lot of popular static site generators support Markdown. Like for example Jekyll. It can use markdown files to generate all your pages.

Use case - writing texts and books

Another great use case is to use Markdown if you write lots of text. You can simply write them in Markdown in some of Markdown applications like for example iA Writer. There are lots of editors that support Markdown. After writing you can directly generate PDF, HTML or Word document from it.

Use case - making presentations

The last use case is creating presentations. Sure you can use something like Power Point but you have exactly the same problems like inside Word. It is difficult to position elements, you are never sure that is won't be broken. The popular solution to write Markdown presentations is RemarkJS. The whole presentation there is created with Markdown.

And actually if you want to improve your Javascript knowledge and prepare for the interview I highly recommend you to check my course Javascript Interview Questions.