Markdown – The holy grail of writing for web

Follow me on twitter @jaymanpandya

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);    
I am an UI designer with a flair for front-end development that makes any brand shine at what they do best. I am right now building amazing products for our clients both Indian and International at Interactive Digital Labs. I am part of the Design and Marketing Teams for Make WordPress and has spoken at local camps on Gutenberg as well as the importance of user experience. I am not intimidated by markup, languages, or tools: HTML to CSS, wireframing to prototyping, JavaScript to agile development, and design programs including Sketch, Adobe XD, Figma, Photoshop, Illustrator, InDesign etc. I love languages, and not just programming either. I speak English, Hindi, Marathi, and Gujarati. When I am not taking courses to improve my skills, I am trying new food, dabbling in filmmaking and photography, and running and cycling. Say hi to me on Twitter here @jaymanpandya.

Leave a Comment

Your email address will not be published. Required fields are marked *

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