Markdown – The holy grail of writing for web

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:

# H1
## H2
### H3
#### H4
##### H5
###### H6

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:

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.

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:

**This is bold text**

_This is italic text_

~~This text will be strikethrough~~

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

[Google Image Search](https://images.google.com)

Output

Google Image Search

Creating a simple link with title tag

Markdown

[Google Image Search](https://images.google.com "Go to Google Image Search")

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

//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

Output

Google Image Search

Lists

Markdown lets you create ordered, unordered and nested lists.

Unordered List

Markdown

* 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

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

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

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

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

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

> 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.

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. &amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;gt;Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.

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

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

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

|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|

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

![Man in an Auto](https://images.unsplash.com/photo-1540040586468-cfbbef75d9ca?ixlib=rb-0.3.5&amp;amp;amp;amp;amp;amp;amp;amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;amp;amp;amp;amp;amp;amp;amp;s=932bda827b8b71305df7573fcdd09c53&amp;amp;amp;amp;amp;amp;amp;amp;auto=format&amp;amp;amp;amp;amp;amp;amp;amp;fit=crop&amp;amp;amp;amp;amp;amp;amp;amp;w=250&amp;amp;amp;amp;amp;amp;amp;amp;q=80)

Output
Man in an Auto

Display referenced image

Markdown

![Man in an Auto][autovala]

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

Output
Man in an Auto

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

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

Output

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

multiline code snippet

Markdown

    ```javascript
    var name = "Jayman Pandya";
    alert(name);
    ```

    ```
    var name = "Jayman Pandya";
    alert(name);
    ```

Output

    var name = "Jayman Pandya";
    alert(name);
    var name = "Jayman Pandya";
    alert(name);    
User Interface Designer/Senior Front-end Developer with an experience of about 13 years, I am a go-to guy for a lot of startups & digital agencies in Mumbai. I have served at the position of Creative Head or equivalent at companies like Zee TV, Indigo Consulting (A Leo Burnett Company), J.P. Morgan, ICICI Bank. I have worked on projects for companies like Godrej, Mahindra Agri, JCB, Boehringer Ingelheim, Johnson & Johnson, 9XMedia, DittoTV, Axis Bank, Birla Sun Life, ICICI etc to name a few. I am currently available for hire. I would love to talk and connect with you’ll. To reach out to me send me an email on converse@jaymanpandya.com or fill the below form.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: