There are all sorts of tools that people use to write and I also had experimented with some of them. I got to know about Markdown a few years back but never paid heed to it, till I was exposed to some of it in Slack. I was intrigued and decided to explore more. Today markdown is a default way I write anything, be it my email drafts, my blog posts or my pull request text (Yes, I have started contributing recently :D)

In this blog post, I will note down some of the basic syntaxes that can get you started with using Markdown in your day to day life.

---

Tooling

If you are a developer, the code editor that you use to write your code is your best option to write Markdown. I use Visual Studio Code as my editor along with Markdown all in one.

---

Syntax

Headings

Whatever you write will have to be organised in a hierarchy and will need headings. You can create 6 headings using Markdown like you can do in HTML.

Markdown:

[code lang=”text”]
# H1
## H2
### H3
#### H4
##### H5
###### H6
[/code]

Output:

H1

H2

H3

H4

H5

H6

Paragraphs

To create paragraphs you just write what you want to and separate by atleast 1 line.

Markdown:

[code lang=”text”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
[/code]

Output:

Eg:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Formatting

There are multiple ways to add the bold, italics and ~~strikethrough~~ in your text. I am sharing what I use on regular basis.

Markdown:

[code lang=”text”]
**This is bold text**

_This is italic text_

~~This text will be strikethrough~~
[/code]

Output:

This is bold text

This is italic text

This text will be strikethrough

Links

Markdown supports linking in 2 different ways depending on how you want to use it.

Creating a simple link

Markdown

[code lang=”text”]
[Google Image Search](https://images.google.com)
[/code]

Output

Google Image Search

Creating a simple link with title tag

Markdown

[code lang=”text”]
[Google Image Search](https://images.google.com "Go to Google Image Search")
[/code]

Output

Google Image Search

Creating a link using reference to be reused at multiple places in the document

This type of link is convenient to use when the links keep on getting updated at regular intervals.

Markdown

[code lang=”text”]
//First square brackets will have text of the link. Second square bracket will have the tag that will reference to the link.

[Google Image Search][google_link]

// This is the reference to the link which is ideally placed at the bottom of the document. It is advisable to sort this alphabetically.

[google_link]: https://images.google.com
[/code]

Output

Google Image Search

Lists

Markdown lets you create ordered, unordered and nested lists.

Unordered List

Markdown

[code lang=”text”]
* Level 1 List item 1
* Level 1 List item 2
* Level 1 List item 3
* Level 2 List sub item 1
* Level 2 List sub item 2
* Level 3 List sub item 1
* Level 1 List item 4
* Level 1 List item 5
[/code]

Output

• Level 1 List item 1
• Level 1 List item 2
• Level 1 List item 3
  • Level 2 List sub item 1
  • Level 2 List sub item 2
    • Level 3 List sub item 1
• Level 1 List item 4
• Level 1 List item 5

Ordered List

Markdown

[code lang=”text”]
1. Level 1 List item 1
1. Level 1 List item 2
1. Level 1 List item 3
1. Level 2 List sub item 1
1. Level 2 List sub item 2
1 Level 3 List sub item 1
1. Level 1 List item 4
1. Level 1 List item 5
[/code]

Output

1. Level 1 List item 1
2. Level 1 List item 2
3. Level 1 List item 3
   1. Level 2 List sub item 1
   2. Level 2 List sub item 2
      1. Level 3 List sub item 1
4. Level 1 List item 4
5. Level 1 List item 5

Nested Ordered & Unordered List

Markdown

[code lang=”text”]
1. Level 1 List item 1
1. Level 1 List item 2
1. Level 1 List item 3
* Level 2 List sub item 1
* Level 2 List sub item 2
1. Level 3 List sub item 1
1. Level 1 List item 4
1. Level 1 List item 5
[/code]

Output

1. Level 1 List item 1
2. Level 1 List item 2
3. Level 1 List item 3
   • Level 2 List sub item 1
   • Level 2 List sub item 2
     1. Level 3 List sub item 1
4. Level 1 List item 4
5. Level 1 List item 5

Blockquotes

Adding the chevron ‘>’ in front of the paragraph will make it a blockquote in Markdown.

Markdown

[code lang=”text”]
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
[/code]

Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

Line Breaks

Giving one line’s space makes 2 paragraphs in markdown, but there are times when we want the line to break into the new line in the same paragraph. It can be done by using the HTML’s <br> tag.

Markdown

[code lang=”text”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
[/code]

Output

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

Tables

Markdown lets us organise and display information in table.

Create table

Markdown

[code lang=”text”]
|Column 1|Column 2|
|——–|——–|
|This will be in Column 1|This will be in Column 2|
|Small line|One more small line|
[/code]

Output

Column 1	Column 2
This will be in Column 1	This will be in Column 2
Small line	One more small line

Create table and align content to left, center and right in the columns

Markdown

[code lang=”text”]
|Column 1|Column 2|Column 3|
|!——–|!——–!|——–!|
|This will be in Column 1|This will be in Column 2|This will be in Column 3|
|Small line|One more small line|One more small line|
[/code]

Output

Column 1	Column 2	Column 3
This is left aligned column	This is center aligned column	This is right aligned column
Small line	One more small line	One more small line

Images

There are 2 ways of displaying images using Markdown. The markdown format is more or less similar to creating links with the only difference of ‘!’ at the start.

Display unreferenced image

Markdown

[code lang=”text”]
[/code]

Output

Display referenced image

Markdown

[code lang=”text”]
![Man in an Auto][autovala]

[autovala]:https://images.unsplash.com/photo-1540040586468-cfbbef75d9ca?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=932bda827b8b71305df7573fcdd09c53&auto=format&fit=crop&w=250&q=80 "Man in the Auto"
[/code]

Output

Code & Syntax Highlighting

Adding code references in your write-ups is a breeze with Markdown. You can add inline code by adding backticks and add multiline code snippets using 3 backticks at the start and at the end.

inline code

Markdown

[code lang=”text”]
To initiate flexbox apply `display: flex` to the parent element.
[/code]

Output

To initiate flexbox apply display: flex to the parent element.

multiline code snippet

Markdown

[code lang=”text”]
“`javascript
var name = "Jayman Pandya";
alert(name);
“`

“`
var name = "Jayman Pandya";
alert(name);
“`
[/code]

Output

[code lang=”javascript”]
var name = "Jayman Pandya";
alert(name);
[/code]

[code lang=”text”]
var name = "Jayman Pandya";
alert(name);
[/code]