Subscribe to Our Newsletter
§ Markdown Crash Course | Learn Markdown in 60 minutes + Markdown Cheatsheet
Markdown can be used for everything you can create - Websites, Documents, Notes, Books, presentations, Emails and even this blog article you are reading is in Markdown
As you are here, reading about Markdown, I am sure you have heard about Markdown. You can use Markdown for a lot of purposes. We will talk about everything you need to know about markdown. So, let’s get started.
If you are interested in watching a video rather than reading, please check out my video on youtube. The code that is used in the video, is documented below in the blog for your easy access.
Here is everything we are going to cover in this article:
- Markdown Crash Course | Learn Markdown in 60 minutes + Markdown Cheatsheet
- What is Markdown?
- Why Use Markdown as opposed to a WYSIWYG Editor?
- Where can I use Markdown?
- Markdown Syntax with Examples
- Headings in Markdown
- Paragraphs in Markdown
- Line Breaks in Markdown
- Horizontal Rule in Markdown
- Escape characters in markdown
- Emphasis - Bold Text in Markdown
- Emphasis - Italics Text in Markdown
- Emphasis - Bold & Italics Text in Markdown
- Strike Through in Markdown
- Links in Markdown
- Images in Markdown
- Block-quotes in Markdown
- Lists in Markdown
- Code blocks using Markdown
§ What is Markdown?
Markdown is a lightweight markup language. Just like HTML (Hyper Text Markup Language) is used for formatting elements in documents, markdown is also similar, it is used for formatting. The beauty about Markdown is it’s simplicity and the less fuzz fuzz around learning and writing it.
Markdown was created by John Gruber in 2004. Markdown is one of the most popular markup language and is getting more popular amongst the programmers. Specially, after they start working with git and writing their Readme.md files. As you guessed it, the “.md” extension is for a markdown file.
You may have the same question as I did when I learned about markdown.
§ Why Use Markdown as opposed to a WYSIWYG Editor?
I am sure most of you know or have used a WYSIWYG (What You See Is What You Get) editor. Your word documents, email composers, notes as well as many modern day web application tools they all are WYSIWYG editors. Clicking that button to format the words and phrases, and the changes reflect immediately. Markdown is a little different. When you see a markdown formatted file, you add markdown syntax to the text to indicate which words and phrases should look different. We will look at all the examples and possible markdown syntax below.
So all the text you just read, was written in Markdown and here is how it looks like.
# Markdown Crash Course | Learn Markdown in 60 minutes + Markdown Cheatsheet
Markdown can be used for everything you can create - Websites, Documents, Notes, Books, presentations, Emails and even this blog article you are reading is in Markdown
As you are here, reading about Markdown, I am sure you have heard about Markdown. You can use Markdown for a lot of purposes. We will talk about everything you need to know about markdown. So, let's get started.
If you are interested in [watching a video][youtube-video] rather than reading, please check out my video on youtube. The code that is used in the video, is documented below in the blog for your easy access.
## What is Markdown?
Markdown is a lightweight markup language. Just like HTML (Hyper Text Markup Language) is used for formatting elements in documents, markdown is also similar, it is used for formatting. The beauty about Markdown is it's simplicity and the less fuzz fuzz around learning and writing it.
Markdown was created by [John Gruber][john-gruber] in 2004. Markdown is one of the most popular markup language and is getting more popular amongst the programmers. Specially, after they start working with git and writing their Readme.md files. As you guessed it, the ".md" extension is for a markdown file.
You may have the same question as I did when I learned about [markdown][this-article].
- If you observed in the above code snippet. Reading a markdown file is super easy. As far as it goes for me, I can organize all me links in one place with the reference to them. That ways, if I used the same link in multiple places, I don’t have to replace them all (as I would do in an online editor). I can just update the reference and the link correctly reflects everywhere.
- Another big advantage of markdown files is that you can practically open and edit it in any of the text editors. More so, you will get a long list of online editors that will let you write in markdown and show you an equivalent html/pdf. Once you have a pdf of your notes, it’s one of the easiest form to share with friends and colleagues. One of the features that are a must for any developer to adapt something is the support the tech or language has. Markdown is present everywhere and with the easiest learning curve, is ideal for you to learn it and use it.
§ Where can I use Markdown?
Markdown can be used for almost everything that we use these days. Let us look at the various areas where people use it.
§ Website Creation using Markdown
This is my personal favorite and one of the prime reasons I got into learning and teaching markdown was to create my website. Well, it all started with creating a website with using one of the static site generators. Believe it or not, Markdown was designed for creating website content. These days, for any blog, it is super important to be server side rendered (don’t worry) - It just means that your page or blog article is ready for any bot or crawler that is available online to scan. The faster the bot gets your data, the better performant is your page. Which means, search engines love it.
This is one of the primary reasons why so many of the static site generators have popped up. Each trying to solve a problem and make creating a website easy.If you are a little familiar with HTML, CSS and version control, check out Jekyll. It is one of the most popular static site generators that takes markdown files and builds an HTML website using it. The biggest advantage of this is Github Pages provides free hosting for Jekyll generated websites.
If you thought, that is it for the static website generation, you may be surprised to know that there is a whole list of applications that are getting popular for static site generation. You can visit this website to see how they rank against each other. You may wonder, how can a markdown file be converted to a webpage. Exactly, this is where these static site generator applications come into picture. They convert your markdown to a beautiful looking webpage.
§ Document Creation with Markdown
Once you know markdown, mostly none of the online editors will be able to catch pace with it. Markdown is as simple as it gets and as easy as it gets. However, without the amazing features of a Word document or Adobe you can still create amazing documents using markdown. There are many online and operating system specific applications that will help you convert your markdown documents to a pdf document and once that is done, sharing it on any platform is easy as a breeze.
Here are some of the popular applications that you can consider for document writing
§ Notes taking using Markdown
After learning markdown, and writing these blog articles using markdown, I was super impressed by the ease of writing and formatting anything using Markdown. I do take a lot of notes while I am working on something and having a good formatted document is always a pleasure to go back to. That made me search and look for some of the notes taking applications. I personally was used to taking notes using Evernote, but now I have moved onto Notable
However, here is a complete list of markdown note taking apps that you can work and consider using.
§ Books - Writing Book using Markdown
We all know that e-publishing is the next big thing and can be a good source for spreading information or for making a good passive income. My personal favorite it is Leanpub, a service that can take your markdown-formatted file and turn it into an electronic book. Leanpub can output your books in pdf, epub and mobi file formats. The other big option is using [Kindle Direct Publishing]:kindle-direct-publish which lets you publish your ebook or paperback book and lets you keep 70% of the value (at the time of this writing).
There are many good options, if you intend to write and self-publish your books online.
§ Presentations using Markdown
Yes, my reaction was also being “shocked” when I read about it the first time. You can create a presentation using markdown. I will admit, it is not very easy and friendly to create your presentations using markdown. However, if you are writing in markdown day in and day out, creating presentations may not be that difficult after all. It definitely has a lot less learning curve as compared to Microsoft Power Point or Keynote.
Github launched a Remark, a tool for creating slides/presentation using markdown. Cleaver is another such project created by Github.
§ Emails using Markdown
You can spice up your email writing game with Markdown. It is easy and there is also a free tool available for it, it is called Markdown Here. It is free, easy and works like a charm. Do give it a try.
§ Documentation using Markdown
Considering that markdown is a markup language. It is very obvious that developers already know and love it. With the static websites, it was a very obvious choice for capturing technical documentation using markdown. Most of the free, open source tools available these days are based on Markdown. In fact, Github itself has followed this approach to use GitHub to document github, you can read about it in this blog post.
§ Markdown Syntax with Examples
Now that we know how awesome Markdown is, let us get started by looking at the various features it holds. Let us look at the syntax for writing our markdown files. The way the documentation works is, first I will talk about an item, then show the markdown version of the syntax in a code block and finally, the result. So you know how your output will look like.
For anyone going through the below documentation, I will recommend that you practice them as you learn them. That ways, you can grasps these faster.
P.S. Almost all of the markdown syntax we will talk is mostly supported by most of the markdown application. It is inline with John Gruber’s original design document. There are minor variations and features that are specific to different markdown processors, we will look at these differences as we go through each one of them.
§ Headings in Markdown
Every document needs to have a structure. The best way, is to split the document in different sections and have headings and sub-headings. Giving headings is the easiest thing you can do with Markdown. To create a heading, add the number sign (# or the hash sign) in front of your word phrase or sentence. For people who know how HTML works, there are 6 different levels of headings. Each of the processor that you will use, will support it. In fact, if you are using a static site generator, you may have different styling applied to each heading.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
§ Heading 1
§ Heading 2
§ Heading 3
§ Heading 4
§ Heading 5
§ Heading 6
In addition to the above, you can also write Heading 1 and Heading 2 differently. You can add any number of ===== characters after the word phrase for Heading 1 or — characters after the word phrase for Heading 2. Here is an example,
This is Heading 1
=================
This is Heading 2
-----------------
§ This is Heading 1
§ This is Heading 2
§ Paragraphs in Markdown
Writing a Paragraph in Markdown is really simple, it is as good as writing a paragraph. I mean it, just leave a blank line and it the text will start in a new paragraph. It is as good as wrapping the statements in the <p> tag for HTMLhtml
This is paragraph 1
This is paragraph 2
This is paragraph 1
This is paragraph 2
Make sure to not have any indentations or tabs when you are starting a new paragraph.
§ Line Breaks in Markdown
Line breaks are the easiest. As compared to their HTMLhtml counter parts. All you need to do is start on a new line by pressing Enter (line break) on the first line. Some editors may also use "Two blank spaces and then Enter(line break). So, whenever you are writing it, make sure to validate the response in your application.
This is line 1
This is line 2
This is line 1 This is line 2
§ Horizontal Rule in Markdown
If you compare markdown with HTMLhtml, it has a good similarity between the two. Just like in HTMLhtml we also have horizontal rule in markdown.
To use the horizontal rule or a line separator, simply add either of the characters 3 times - dash (-), underscore ( _ ) or asterisks ( * )
---
___
***
§ Escape characters in markdown
You would have already noticed that we have been using characters like *, -, _, etc. These are some of the characters that you may want to use in your actual file. So, how do you manage that? Well, in Markdown, we have an escape character, if you add it in front of any special character, it loses it’s special powers and just acts as a character.
Let us see an example:
\*
will result in *
You can give it a try, here is a list of all the special characters that you can escape.
| Character | Name |
|---|---|
| \ | backslash |
| ` | back-tick |
| * | asterisk |
| _ | underscore |
| { } | curly braces |
| [ ] | brackets |
| ( ) | parentheses |
| # | pound sign |
| + | plus sign |
| - | minus sign (hyphen, dash) |
| . | dot |
| ! | exclamation mark |
| | | pipe (see also escaping pipe in tables) |
§ Emphasis - Bold Text in Markdown
To make a text bold, all you need to do is wrap it in between double * signs. Something like below.
This text is **Bold**
This text is Bold
You can also wrap the text in between 2 underscores to make a text bold.
This text is __Bold too__
This text is Bold too
§ Emphasis - Italics Text in Markdown
To make a text bold, all you need to do is wrap it in between single * signs. Something like below.
This text is *Italic*
This text is Italic
You can also wrap the text in between 2 underscores to make a text bold.
This text is _Italic too_
This text is Italic too
§ Emphasis - Bold & Italics Text in Markdown
You can also use the bold and italics together.
This text is ***Bold and Italic***
This text is ___Bold and Italic___
This text is **_Bold and Italic_**
This text is _**Bold and Italic**_
This text is __*Bold and Italic*__
This text is *__Bold and Italic__*
This text is Bold and Italic
This text is Bold and Italic
This text is Bold and Italic
This text is Bold and Italic
This text is Bold and Italic
This text is Bold and Italic
§ Strike Through in Markdown
You can easily create a Strike through text in markdown. It is as simple as wrapping the content in between 2 tildas (~) - Let’s look at an example.
This is a ~~Striked Text~~
This is a Striked Text
Just like we have handled a combination of bold and italics, the same applies to your strike through text. So, if you wrap a bold text in between the 2 tildas, your text will be striked and bold.
This is a ~~**bold and striked text**~~
This is a bold and striked text
You can play around all the above combinations of bold, italics and strike through. As a practice, I will advice you to always keep one style of coding, so it is easier for you to get back to it.
§ Links in Markdown
As you know, having or embedding links in a document is so important. Therefore, Markdown has made it easier for us to embed links. To be honest, I am in love with the way I can handle links in markdown. The reason being, I have created a table of links that I am going to use in the article. If I reuse those links, I just need to use their reference.
The best part, your social search engines will love your internal links and if you are writing a blog, surely your blog will shine better.
So, let us look ar our first example on how we can create a link in markdown.
To add a link, you need to wrap the text that will be used as a link in a square bracket ‘[]’ followed by your actual link wrapped in brackets.
[Abhay Talreja](https://www.abhaytalreja.me)
The result will look like this - Abhay Talreja
Now, one of the common practices when you are writing a link is to include a link title. In html you will do something like below:
<a href="https://www.abhaytalreja.me" title="Abhay Talreja website link">Abhay Talreja</a>
It’s markdown equivalent will be:
[Abhay Talreja](https://www.abhaytalreja.me "Abhay Talreja website link")
Here is how the result will be, go ahead and hover over the link, you should see the title “Abhay Talreja website link” show up.
§ Links with a reference in Markdown
Now, this is one of my favorite pieces in terms of writing a link. After reading a lot of SEO blogs, I realized that internal linking is super important, so having a list of all your links is always helpful.
Let us see how to create links with a reference that you can reuse. It is as simple as assigning a variable to a link and then you can reuse that variable whenever you want in your document.
[Abhay Talreja with reference][website]
[website]: https://abhaytalreja.me
So first we wrap the text that is going to act as our link in square brackets. Then assign use a reference next to it, again wrapped in a square bracket. I call this variable or reference as “website”
Then, we use the same reference/variable and assign it a value using a colon “:”. As you can see in the above code block, I have assigned the value of “https://www.abhaytalreja.me” to the reference of website. Now, in my application, whenever and wherever I want to use the link, I can use the same reference.
Another cool thing about creating links with reference is adding the title too. A title can be easily added with the same pattern.
[Abhay Talreja with reference][website]
[website]: https://www.abhaytalreja.me "Abhay Talreja's website"
Abhay Talreja with reference and title
That was easy, right!
§ Auto linking in Markdown
Just like you will expect, if you copy and paste a link in your markdown file, by default it will make it a hyperlink in your document, this link won’t have any text or title just a clickable link.
https://www.abhaytalreja.me
Now let us say, if you wish to just add a text link and don’t want the link to be clickable, you can wrap it up in a single back-tick also used for incline code, more on it later
`http://www.example.com`
http://www.example.com
Similarly, if you wish to wrap the link in a bracket, it will still behave the same.
<https://www.abhaytalreja.me>
The same rules also apply if you are writing an email address in markdown, it will convert it into a hyper link with “mailto:” - What this will mean is anyone who clicks on your link, their default mail app will open up and they will be able to send an email to the email link.
This behavior is the same as you would expect, when you are putting emails on your website.
<hi@abhaytalreja.me>
hi@abhaytalreja.me
hi@abhaytalreja.me hi@abhaytalreja.me
§ Images in Markdown
To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title after the URL in the parentheses. Here is an example of the Markdown Logo
The rendered Image will look like below:
§ Linking Images in Markdown
To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.
Just hover over this image as well as the previous image. You will notice that when you hover over the 2nd image, your pointer turns into a hand, indicating it is a link.
Just like you can give a reference to a link, you can also add link references for the images too. Let us write the above example with a link reference.
[][my-website]
[my-website]: https://abhaytalreja.me "Click to see Abhay Talrejas website"
§ Block-quotes in Markdown
To create a block-quote, simply add the > character in front of the line or the start of the word phrase.
> This is a block-quote
This is a block-quote
You can also create block-quotes with multiple paragraphs by adding more lines.
> This is a block-quote
>
> More of the block-quote
The output will look like the below:
This is a block-quote
More of the block-quote
You can also have nested block-quotes
> This is a block-quote
> This is a nested block-quote
This is how the output will look like
This is a block-quote This is a nested block-quote
You can also add other formatting in a block quote, like bold text, italic text or lists and headings too.
> #### This is an important block-quote
>
> - This is item 1 in block-quote
> - This is item 2 in block-quote
>
> This was said by someone really **important**
The output looks like below:
§ This is an important block-quote
- This is item 1 in block-quote
- This is item 2 in block-quote
This was said by someone really important
§ Lists in Markdown
There are 2 types of lists, ordered and unordered list. We will see both of these lists in detail.
§ Ordered List in Markdown
Ordered list is basically, a numbered list of items when we represent it. In HTMLhtml it is created using a combination of below:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
And this is how you will do it in markdown, it is actually very simple and you don’t need to write as much too.
1. Item 1
2. Item 2
3. Item 3
4. Item 4
Output:
- Item 1
- Item 2
- Item 3
- Item 4
It really doesn’t matter if you number them in the same sequence. You can also have random numbers or the same number. The only thing that is important is to start the list with the first item.
1. Item 1
1. Item 2
1. Item 3
1. Item 4
1. Item 1
7. Item 2
2. Item 3
5. Item 4
Output is still the same:
- Item 1
- Item 2
- Item 3
- Item 4
§ Nested Ordered List in Markdown
Just like you would want to nest your list in any application, nesting the ordered list is also possible in markdown. Here is how we do it.
1. Item 1
2. Item 2
3. Item 3
1. Nested Item 1
2. Nested Item 2
4. Item 4
Output:
Item 1
Item 2
Item 3
- Nested Item 1
- Nested Item 2
Item 4
§ Unordered lists in markdown
To create an unordered list is very similar to creating ordered list except that there is no need to maintain an order. So, to achieve an unordered list you can add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.
- Item 1
- Item 2
- Item 3
- Item 4
* Item 1
* Item 2
* Item 3
* Item 4
+ Item 1
+ Item 2
+ Item 3
+ Item 4
* Item 1
- Item 2
+ Item 3
* Item 4
- Item 1
- Item 2
- Item 3
- Item 4
- Item 1
- Item 2
- Item 3
- Item 4
- Item 1
- Item 2
- Item 3
- Item 4
- Item 1
- Item 2
- Item 3
- Item 4
I will personally recommend to go with 1 approach for both ordered and unordered list that works the best for you and follow it. That ways, you consistently know what you are doing and it takes the process of thinking out of it.
§ Nested Unordered List in Markdown
Just like you can nest the ordered list, you can also nest the unordered list.
- Item 1
- Item 2
- Nested Item 1
- Nested Item 2
- Item 3
- Item 4
Item 1
Item 2
- Nested Item 1
- Nested Item 2
Item 3
Item 4
§ Adding block-quotes in a list
You can also add block-quotes in the list and still preserve the look and feel of a list. Here is an example:
- First Line
- Second Line
> A block-quote
- Third Line
You just need to make sure to indent the block quote by 4 spaces or a tab.
First Line
Second Line
A block-quote
Third Line
§ Code blocks using Markdown
You have seen me adding code blocks above every example we have seen. There are 2 ways of adding a code block one is inline code block and the other is the code block that you have been seeing across this documentation.
§ Inline Code blocks using Markdown
Here is an example of inline code block - `var x = 10;`
Here is an example of inline code block - var x = 10;
When you wrap up any content in between a single back tick, you make it an incline code block.
If you want to enclose a piece of code which already has back-tick in it, you will want to escape the back-tick. In that scenario, you can enclose it in double back-tick.
You can use var x = `'hello' + ${firstName}` in your file
§ Code blocks using Markdown
Being technical and documenting technical aspects has never been easier. When I used to write in blogger, it used to be a pain to include code in your blog. But with markdown, it is super easy. All you need to do is indent your code with a tab (or 4 spaces) Here is an example of code I am writing without any special characters.
<html>
<head></head>
<body></body>
</html>
If you think, indenting is painful? Try using fenced code blocks. Depending on your Markdown processor or editor, you’ll use three backticks (`) or three tildes (~) on the lines before and after the code block. The best part? You don’t have to indent any lines!
```
<html>
<head></head>
<body></body>
</html>
```
<html>
<head></head>
<body></body>
</html>
Now, watch this html code turn into html style formatting using the word html after the first set of back-ticks.
```html
<html>
<head></head>
<body></body>
</html>
```
<html>
<head></head>
<body></body>
</html>
Similarly, if you have a json file, you can style it as a json object, so it is easy for your readers to consume it.
```json
{
firstName: "John",
lastName: "Doe",
age: 30
}
```
{
"firstName": "John",
"lastName": "Doe",
"age": 30
}
With that being said, that brings us to the end of this article. If you enjoyed the video or reading this article, please make sure to add your comments below and share it with your friends. Do subscribe to my youtube channel and hit the bell icon.
If you have any other topics that I should be covering next, please let me know in the comments of the youtube video.
Subscribe to the email updates for new blog articles.
Happy Learning! Keep Sharing!
Related Posts
Load Comments