Markdown Guide

Sachini Amarasinghe
Nerd For Tech
Published in
5 min readJun 28, 2022
Photo by Sofya on Unsplash

Hello everyone!😃

Through this Markdown Guide article, I’m going to discuss what is Markdown, why it is important, how it works, and also, the main functions that you must know when you are using Markdown. So, continue reading, and get a better understanding of the topic you searched for!

What is Markdown?

Markdown was created by John Gruber in 2004, and it has become one of the most widely used markup languages ever. Markdown is a simple free markup language, and you can add formatting components to plaintext documents using Markdown. Also, Markdown can be used to produce a variety of content, including notes, presentations, documentation, websites, and resumes. Due to its adaptability, Markdown is becoming more and more popular among authors, developers, and content creators.
To specify which words and phrases should have a distinct appearance in a document that has been formatted in Markdown, you must add Markdown syntax to the text. Don’t worry!🤗 you will learn about all the basic syntax through this article.
Some text editor applications can be used to add Markdown formatting elements to a plaintext file. Alternately, you can use one of the several Markdown programs available for macOS, Windows, Linux, iOS, and Android. Additionally, there are several web-based tools made especially for Markdown writing. You might not be able to preview the formatted document in real-time depending on the application you use. But it’s not a problem. Because the Markdown syntax is meant to be readable. It means the text in Markdown files can be read even if it isn’t rendered.

How does it work?

When you write in Markdown, the text is stored in a plaintext file that has a .md or .markdown extension. And then, the Markdown-formatted file is converted into HTML or a print-ready document. For that, we require a Markdown application which capable of processing the Markdown file. We can see there are several applications for that, and they all convert Markdown-formatted text to HTML so it can be displayed in web browsers.

Example: Dillinger

Markdown applications use something called a Markdown processor (“parser” or an “implementation”) to take the Markdown-formatted text and output it to HTML format. At that point, your document can be viewed in a web browser or combined with a style sheet and printed. You can see a visual representation of the process below.

Markdown process

Cool! 😎 Now we are good to go with markdown syntaxes!

Markdown syntaxes.

Since Markdown aims to be as simple a markup language as possible, the Markdown syntax is also virtually self-explanatory. However, before using it, you must first become familiar with the markup elements. For your convenience, I will mention the most important functions under this topic.

Markdown uses specific symbols as markups. Let’s identify them.

  • Asterisk: *
  • Hyphen: -
  • Underscore: _
  • Round brackets: ()
  • Square brackets: []
  • Curly brackets: {}
  • Period: .
  • Exclamation mark: !
  • Pound (Hashtag): #
  • Backtick: `
  • Backslash: \
  • Tilde: ~
  • Pipes: |

Bold

It is so easy to bold text in markdown. You just need only asterisk or underscore for that.

__Bold text one__**Bold text two**

Italic

Another main function that we need when we are creating a document. For that also, you can apply italic features to your text using an asterisk or underscore.

_Italic text one_*Italic text two*

Both Italic and Bold

___Italic and bold text one___***Italic and Bold text two***

Strikethrough

The tilde is used twice in a row in Markdown, to cross out the text.

~~This is a strikethrough text~~

Headings

In Markdown, a pound(hashtag) symbol is generally used to make a heading. It is inserted before the corresponding text with a space. Additional pound signs are applied to make headings smaller and higher in the hierarchy. Similar to HTML, this allows for headings with up to six levels.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Paragraphs

No such difference as we above did when we are writing normal paragraphs in Markdown. Only when you need to separate two paragraphs, you should leave an empty line between two paragraphs.

Quotes

In Markdown, quotes in a certain part of the text are indicated using a blockquote element. The greater-than sign is used for this purpose (>).

>This is the first quote section.>The section continues here.>This is the second type of the quote section.This section also continues in the second line

Lists

To create an unordered list, there are three ways we can use. Use plus sign, a hyphen, or an asterisk.

+ Type one- Type two* Type three

For an ordered list, we can directly use numbers.

1. One2. Two3. Three

Markdown also gives you the option of creating checklists. These appear with a box that can be activated by clicking on it. You can also add a checkmark when creating the list. To do so, insert square brackets and an X.

[X] Option one[ ] Option two[ ] Option three

Tables

Pipes allow tables to be drawn in Markdown. Each cell is separated by a pipe. To create the header rows that are visually distinct from the rest of the content, you highlight the corresponding cells with hyphens.

| Column 1 | Column 2 || ------ | ------ || Content-column 1 | Content-column 2 || Content-column 1 | Content-column 2 |

Codes

To mark a text as code in Markdown, a backtick is used.

`This is a code`.

If you need backtick on your code:

``This is a `code with backtick`.``

If you put codes as tabs, use the below markdown.

```shCode line oneCode line two```

Links and Images

When you need to put a text as a hyperlink without showing the original link:

This is a [Link](https://example.com/).

When you need to put the original link as a hyperlink.

<https://example.com>

As with hyperlinks, images can also be added to the Markdown document. To add images, start with an exclamation mark. Afterward again insert square brackets that contain the alternative text for the image and round brackets with the image URL.

![Here is an example](https://icatcare.org/advice/thinking-of-getting-a-cat/)

Comments

When you need to put some comments that you do not want to show in the browser, you can use the below syntax.

[//]: # (This is a comment)

Would you like to try all the above Markdown syntaxes by yourself? Hurry up and try out an online editor!

👉 https://dillinger.io/

Hope you got something important from this article. Thanks for reading!💖

--

--

Sachini Amarasinghe
Nerd For Tech

Former Trainee Software Engineer at Creative Software | Final Year Undergraduate at University of Moratuwa, Sri Lanka. https://sachiniamarasinghe.vercel.app/