This guide is a better way to write in your markdown editor of Hashnode. Markdown is a lightweight markup language for creating formatted text using a plain-text editor. In past days I didn't take much care of my markdown files. Usually when documenting a project am not formated it correctly because most of my projects are backed by me only from the start to finish. For this reason, am not inspired to spend my time on a markdown file. When I get more and more experience working in a team or working for a community, I find the importance of a proper documentation page or a readme file (as a developer term). At this time markdown gets the love from every developer around the world due to its simplicity and power. Markdown is now one of the world's most popular markup languages. Using Markdown is different than using a WYSIWYG editor.

This is a guide that helps me write markdown in a more formatted way in Hashnode. It is good to have an understanding of the results live in a published article. Hashnode platform made a great job in styling the markdown to the readers in the most aesthetic way. The Hashnode design team did a great job. Let's see how this team styled the resulting markdown.

1. Heading

A heading in markdown is created by typing # followed by the text of your heading with a single space in between them. Space is necessary. Font size increased upon adding more # 's.

Example Markdown:

# This is a Heading 1
## This is a Heading 2  
### This is a Heading 3
#### This is a Heading 4
##### This is a Heading 5
###### This is a Heading 6

#This is a Heading without space between

Preview:

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

#This is a Heading without space between

2. Paragraph

Paragraphs in markdowns are created by adding a blank line (more than one blank line is ok) in a block of text.

Example Markdown:

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


Started after double blank lines. It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here, making it look like readable English.

Preview:

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Started after double blank lines. It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here, making it look like readable English.

3. Bold

Bold text in markdowns is created by wrapping the text inside a ** character. Hashnode's markdown editor has a keyboard shortcut CTRL + B which will turn the selected text into a bold text.

Example Markdown:

This text is a **bold** text

Preview:

This text is a bold text

4. Italic and Italic bold

An Italic text style in markdowns is created by wrapping the text inside a * character. Hashnode's markdown editor has a keyboard shortcut CTRL + I which will turn the selected text into an Italic text style. In order to create an Italic font bolder, Wrap your italic text with a * which is equivalent to ***.

Example Markdown:

This text is an *Italic* text  
This text is an ** *Italic bold* ** text

This text is an ***Italic bold*** text

Preview:

This text is an Italic text
This text is an Italic bold text

This text is an Italic bold text

5. Code Blocks

Code blocks in markdown are created using backtick ` . In order to display as a code block, whether it is a single, multi-lined or inline. We first need to wrap our code inside a pair of three backticks ``` .

Example Markdown of an inline or single lined code block:

This sentence contains an inline code block ```var x = "Hello World!"```.

Preview:

This sentence contains an inline code block var x = "Hello World!".

Example Markdown of a multi-line code block:

Below this sentence, there is a multi-line code block do you see that 

```
var x = "Hello World!"

console.log(x)

```

Preview:

Below this sentence, there is a multi-line code block do you see that

var x = "Hello World!"

console.log(x)

6. Links

In order to create a link in Hashnode editor, I primarily use the keyboard shortcut Ctrl + K and the syntax is [Link Title](Link)

Example markdown:

The link to my blog homepage is  [here](https://blog.rahulkrishnakumar.com)

Preview:

The link to my blog homepage is here

7. Underline

No markdown for underline 😮

Let check whether Hashnode supports some alternative ways:

Method 1: Using an HTML <u> tag

<u> tag not supported yet.

This is an <u>underlined</u> word

This is an underlined word

**Method 2: Using the Unicode combining character U+0332

This a bad U̲n̲d̲e̲r̲l̲i̲n̲e̲d̲ text

This a bad U̲n̲d̲e̲r̲l̲i̲n̲e̲d̲ text

8. Line Breaks

HTML Line breaks <br> is supported. Also, support <br/> as well.

Example Markdown:

This wonderful line is going to be a break <br> and the new line begins already.

Also, This another line is going to be a break <br/> and the new line begins already.

Preview:

This wonderful line is going to be a break
and the new line begins already.

Also, This another line is going to be a break
and the new line begins already.

9. Quotes

To create a quote, we need to add > to the starting of a line with a space after is a must. The same spacing rule that we seen on the heading section. For creating a nested block quote, >> is the rule.

Example Markdown:

> This is a single line blockquote

> This is the first line of a multi-line blockquote
>
> This is the second line of the same multi-line blockquote

>This is the First paragraph of a nested blockquote
>
>>This is the nested content

Preview:

This is a single line blockquote

This is the first line of a multi-line blockquote

This is the second line of the same multi-line blockquote

This is the First paragraph of a nested blockquote

This is the nested content

10. Horizontal Line

To create horizontal lines, we can use--- or HTML <hr> tag, Also <hr/> is also supported. Using more than three - is okay.

Example inside markdown:

Below is a horizontal line created using <hr> tag

<hr>

Below is a horizontal line created using ---

---

Below is a horizontal line created using --- variant

------

Preview:

Below is a horizontal line created using

---

tag

---

Below is a horizontal line created using ---

---

Below is a horizontal line created using --- variant

---

Important: Blank lines before and after are important. If we didn't have a blank line below a --- it will be converted as a heading.

Without blank lines
---

With blank lines

---

Without blank lines

With blank lines

---

11. Lists

Lists are by far the tricky one and I love it. Let view the example and compare it with the preview. In lists, the blank lines play an important role. Space in front means something is nesting. Propper indentation (space before a newline) is very important. Creating a list with some content like paragraphs and images is tricky when we need the content of a listed item to be intended.

Example Markdown of Ordered List:

1. Apple
2. Orange
3. Mango


1. Apple 
<br>
Some description of apple with ```<br>``` tag
continue the description of apple without ```<br>``` tag

again continued after one blank line
2. Orange
3. Mango



1. Ford
1. BMW
1. Tesla



2. Parrot
1. Eagle
3. Crow

Preview:

1. Apple
2. Orange
3. Mango

1. Apple
   Some description of apple with <br> tag continue the description of apple without <br> tag

again continued after one blank line

1. Orange
2. Mango

1. Ford
2. BMW
3. Tesla

1. Parrot
2. Eagle
3. Crow

Example Markdown of Nested List:

1. Fruits
 1. Apple
 2. Orange
 3. Mango
2. Cars
 1. Ford
 1. BMW
 1. Tesla
3. Birds
 2. Parrot
 1. Eagle
 3. Crow

Preview:

1. Fruits
   1. Apple
   2. Orange
   3. Mango
2. Cars
   1. Ford
   2. BMW
   3. Tesla
3. Birds
   1. Parrot
   2. Eagle
   3. Crow

Example Markdown of an unordered list:

- Apple
- Mango
- Orange

+ Apple
+ Mango
+ Orange

+ Apple
* Mango
- Orange

Preview:

• Apple
• Mango

• Orange

• Apple

• Mango

• Orange

• Apple

• Mango
• Orange

Example markdown of a nested unordered list:

Note: Nesting of an unordered list is not supported

-Fruits
 -Apple
 -Orange
 -Mango

Preview:

-Fruits -Apple -Orange -Mango

12. Heading ID and Linking to Heading ID

Example markdown of creating an ID:

### My heading {#custom-id-for-heading}

Dummy content for "My heading"

Preview:

My heading

Dummy content for "My heading"

Example shows the linking of above heading ID

[Goto My Heading](#custom-id-for-heading)

Preview:

Goto My Heading

14. Images

The primary way that I add an image in the hashnode markdown editor is by simply copy the image and paste it using the key shortcut Ctrl + V . The correct syntax is ![image name](image-url).

Example markdown:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631057088927/PCyicbd7L.png?auto=compress,format&format=webp)

Preview:

15. Table

Example Markdown:

| Fruits         | Cars            |
| ----------- | ----------- |
| Apple         | Ford            |
| Orange      | BMW           |
| Mango       | Tesla           |

Preview:

Embedded links

Embedding a link is supported in Hashnode. The syntax to create an embedded link is %[Link]. where Link is the URL that you need to embed. It is useful when sharing a social media post or any useful reference, it's more effective than a normal link.

Example markdown:

Here is a tweet that I shared when this guide is published.

%[https://twitter.com/rahulkrishnacom/status/1435379127129763842]

Preview:

Here is a tweet that I shared when this guide is published.

Content is Updating...

Try CTRL + R

Want to Know More About Markdown go to the official page.

Official Markdown source: daringfireball.net/projects/markdown