Overview and Basics of Markdown

Guide to Basic Working and Formatting of Markdown

Overview and Basics of Markdown

Hey all👋, Hope you all are good and doing well, so in this post we going to cover the most important part of writing a Blog or the Article and that is Markdown. We are going to see the Basic of Markdown.

Many of you would have heard of this term and may be don’t know how to format an article or the blog using the Markdown. As we have seen that many of the blogging platforms uses the Markdown to format and write the articles, some examples of the known platforms which uses Markdown to format articles are DEV Community, Hashnode, daily.dev (All in one developer news reader) and the most known platform is GitHub which uses the Markdown to format a Readme file.

Many of you have visited among these platforms and viewed or read an article on either of these platforms but never wondered on formatting and writing one which can be read and accessed by a larger community of learners and developers who are in need of new information which you can share with them. If you have never heard about these or want to start now you can read this complete guide to know how to start your Blog with Free Platforms.

Now let’s know What is Markdown📑?

Markdown is one of the most popular mark-up languages with the extension as .md, for example lets a Markdown file be XYZ.md. It was developed and created by John Gruber and Aaron Swartz in 2004. You can create a basic Markdown file using the Markdown elements and save it with the extension .md and use it afterwards wherever you need it. It is lightweight markup language that you can use to add formatting elements to plain text documents. Markdown is popular because you can use it for everything like - to create Websites, documents, e-mail messages, presentation, books, technical documents and much more.

Most Popular Platforms using Markdown to update the text, documents and information are DEV Community, Hashnode, daily.dev, GitHub etc.

Many of you would be knowing that we can create the Web Pages using the Markdown and it is very easily possible using the GitHub. Yes, I am not joking, you can really make the Readme files with the Markdown and make it live using the GitHub pages and their free domain.

We can use Markdown everywhere it's fast and easy to take notes, create contents for website, from email messages to create content on the web pages, we can do it using Markdown. It is very much portable and once one start to use it I am sure that everyone going to love it, this is because of its simplicity and easy to use syntax and the elements.

Basic Markdown Syntax to use🐱‍🏍

📜Headings

To create the headings, we have to add the number signs (#) just before the phrase or the word. The number of signs (#) you use corresponds to the level of heading you want to use. For example, to create a heading of level two or the <h2> heading, you have to use the two number signs. For example – ( ## My H2 Heading).

Make sure to have a space between the number sign (#) and the word you are going to use. You should also put blank lines before and after a heading for compatibility.

The below table illustrate the different levels of headings using the Markdown.

Markdown

Output/Preview

# This is level-1 Heading

This is level-1 Heading

## This is level-2 Heading

This is level-2 Heading

### This is level-3 Heading

This is level-3 Heading

#### This is level-4 Heading

This is level-4 Heading

##### This is level-5 Heading

This is level-5 Heading

###### This is level-6 Heading

This is level-6 Heading

 

📜Paragraphs

To create the paragraphs, you can use the blank line to separate the paragraphs. Just take the preview of the paragraph is a line done not move to new paragraph, make it by giving one more space line. It’s just like writing a document on the word or any other editor.

Below is the table to look and understand it better.

Markdown

Output/Preview

This is a Paragraph.

This is a Paragraph.

This is the 1st paragraph in which I’m writing about The Coding Bro.

 

This is the 2nd paragraph in which I’m writing about the Markdown.

This is the 1st paragraph in which I’m writing about The Coding Bro.


This is the 2nd paragraph in which I’m writing about the Markdown.

 

📜Bold

To make the text bold, we use the two asterisks (**) or underscores (__) before and after the text, phrase or the word. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters. Do not use double underscore in the middle of a word, use only the asterisks while bolding any text in middle of a phrase.

Below is the table to look and understand it better.

Markdown

Output/Preview

**The Coding Bro**

The Coding Bro


__The Coding Bro__

The Coding Bro


The **Coding** Bro

The Coding Bro

 

📜Italics

To make the text italic, we use one asterisks (*) or underscores (_) before and after the text, phrase or the word. To italicize the middle of a word for emphasis, add one asterisks without spaces around the letters. Do not use underscore in the middle of a word, use only the asterisks while italicizing any text in middle of a phrase.

Below is the table to look and understand it better.

Markdown

Output/Preview

*The Coding Bro*

The Coding Bro


_The Coding Bro_

The Coding Bro


The *Coding* Bro

The Coding Bro

 

📜Bold and Italic together

To make Bold and italic together we have to add three asterisks (***) or three Underscores (___) before and after the text, phrase or the word. To italicize and bold the middle of a word for emphasis, add three asterisks without spaces around the letters. Do not use underscore in the middle of a word, use only the asterisks while italicizing and bolding any text in middle of a phrase.

Below is the table to look and understand it better.

Markdown

Output/Preview

***The Coding Bro***

The Coding Bro


___The Coding Bro___

The Coding Bro


The ***Coding*** Bro

The Coding Bro

 

📜Blockquotes

In order to create a blockquote or the quote text just add the (>) symbol before starting the paragraph or the line. Let call this sign as greater than sign (>). Make sure to have a space between the sign and the text or phrase. You can also make the nested quotes using the double (>>).

For Example - 

> Kill them with your Success, Worry them with your Smile😎

>> Learning is Endless

Refer the image below to know better how it looks upon Preview and output

Blockquote image of Markdown

📜Lists

To make the text, elements or the things as a list, there are two options to do so. One is the Unordered list and the other is Ordered list.

💨Ordered list - For ordered lists we use the numbering 1., 1., 1.. Wait — no consecutive numbers? No! Markdown takes care of the correct numbering automatically which is very useful if you want to add an additional element within your list at some later point.

 See the example below to know how to do it.

Markdown

Output/Preview

1.This is item-1

2.This is item-2

1.    This is item-1

2.    This is item-2

1.This is item-1

1.This is item-2

1.    This is item-1

2.    This is item-2

1.This is item-1

4.This is item-2

1.    This is item-1

2.    This is item-2

 

💨Unordered list - With Markdown it is very easy to create bulleted (unordered) and numbered (ordered) lists. For bulleted lists we use *, + or - for each bullet point.

Markdown

Output/Preview

- This is item 1

- This is item 2

·      This is item 1

·      This is item 2

+ This is item 1

+ This is item 2

·      This is item 1

·      This is item 2

* This is item 1

* This is item 2

·      This is item 1

·      This is item 2

 

💨Checkboxes - If you want to check a box just add (x) in the square brackets.

Checkbox for Markdown

📜Code Block

To write a code using the Markdown, ident it usually by at-least four spaces or use the backticks sign (`) three times. Input the whole of the code inside these six backticks signs. 

(e.g., ``` code ```). Most preferred way is to use the backtick sign.

Check this basic example of how code is written and how it is shown upon output or the preview.

```

Print("The Coding Bro")

```

Code Implementation using Markdown

💨Inline Code – This is used to put certain text or phrase as a high lighten way. You can put the text in Inline code by using the single backtick sign (e.g., `Inline code`)

For example – ` There is lot to learn and learning is endless. `

There is lot to learn and learning is endless. 

📜Links

To create a link, enclose the link text in brackets (e.g., [The Coding Bro]) and then follow it immediately with the URL in parentheses (e.g., (www.thecodingbro.xyz)).

For example -

My Favourite Technical Blog is [The Coding Bro.](www.thecodingbro.xyz)

The rendered output looks like this:

My Favourite Technical Blog is The Coding Bro.

You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in parentheses after the URL.

E.g., My Favourite Technical Blog is [The Coding Bro.](www.thecodingbro.xyz “The Best Blog to read Technical Articles.”)

Images

To add an image using the Markdown, we have to 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.

For example –

![This is my sample Image](Enter the URL of Image here)

Let's add an Image using thie format.

![The Coding Bro](https://tinyurl.com/thecodingbro)

Preview of the image is - 

Image Preview of Markdown
You can also perform the embeded operation using the same syntax. Just replace the exclamation mark by the percentage sign (%) and you can embed the Tweets, Videos, Youtube videos, codepen codes and many more things.

Here is the syntax - %[here goes the URL].

For Example - %[https://twitter.com/mayankp4513/status/1416345713861005313]
Preview is shown below 

Hope this small learning helps you to know about Markdown. There is much more and small things which can be done using the Markdown. Here is a link if you know and learn in detail about the Markdown – Click this link.

Thank you for Reading, would Love  to hear your valuable feedback.

If anything is confusing or incorrect then let me know in the comment section. Thanks, from my side, this is Mayank, keep learning and exploring!!

Next Post Previous Post
No Comment
Add Comment
comment url