Using Markdown In Hashnode: Beginners Guide
Published: 2023-04-23 11:28:03

---
title: Using Markdown In Hashnode: Beginners Guide
published: true
date: 2021-06-11 07:42:39 UTC
tags: 
canonical_url: https://chrisdevcode.hashnode.dev/using-markdown-in-hashnode-beginners-guide
---

[Hashnode](https://hashnode.com/@hashnode) is by far my best Developer blogging platform. One of the things making me love it is the use of markdown in writing and editing articles.

If you just created a [Hashnode](https://hashnode.com/@hashnode) blog or thinking of creating one, then this is the best article for you.

In few words, I will demonstrate how you can use **markdown** to create your articles.

[Join Hashnode](https://hashnode.com/@chrisdevcode/joinme)

* * *

## Markdown, what is it? 👀

Markdown is a very simple mark-up language using plain text. (very simple 😁😁)

## Cheat Sheet?

### Headings:

A heading usually starts with the "#" symbol

MARKRDOWN:

```
# This is Heading 1 (largest text) 
## This is Heading 2  
### This is Heading 3
#### This is Heading 4
##### This is Heading 5
###### This is Heading 6 (smallest text)

```

PREVIEW:

# This is Heading 1 (largest text)

## This is Heading 2

### This is Heading 3

#### This is Heading 4

##### This is Heading 5

###### This is Heading 6 (smallest text)

* * *

### Paragraphs:

To create a paragraph, use one or more lines of consecutive text followed by one or more blank lines.

> Note: If you don't leave a blank line between blocks of text, they will be collapsed into a single paragraph.

MARKDOWN:

```
This is the paragraph about me

Another paragraph, just keep writing

```

PREVIEW:

This is the paragraph about me

Another paragraph, just keep writing

> Unless the paragraph is in a list, dont indent paragraphs with spaces or tabs.

* * *

### Links

To create a link, add the link text in brackets, i.e `[link text]` and the URL in parentheses `()`

MARKDOWN:

```
[Link Text](https://enter-url.here/)

```

PREVIEW:

[Link Text](https://enter-url.here/)

> No space in between `[]` and `()` : `[]()`

* * *

### Images

To add an image, 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.

**NOTE** In Hashnode the image URL is automatically added after image upload. (Using the camera icon on the edit page menu, top right)

MARKDOWN:

```
![Code Snippet](https://source.unsplash.com/random/800x600)

```

PREVIEW:

![Code Snippet](https://source.unsplash.com/random/800x600)

* * *

### Embedded Links

An embedded link has its content appear as part of a post and supplies a visual element that encourages increased click-through and engagement.

For example: (The CodePen below is embedded)

```
%[https://codepen.io/chrisachinga/pen/rNjMxKX]

```

[https://codepen.io/chrisachinga/pen/rNjMxKX](https://codepen.io/chrisachinga/pen/rNjMxKX)

The tweet is also an embedded link:

```
%[https://twitter.com/achinga_chris/status/1400773052212944897]

```

[https://twitter.com/achinga\_chris/status/1400773052212944897](https://twitter.com/achinga_chris/status/1400773052212944897)

MARKDOWN:

```
%[link to embed]

```

[Hashnode](https://hashnode.com/@hashnode) has enabled various links from a number of sites to be embedded.

### Formatting Your Text

You can always format your text to bold, italics, or more using markdown. Hashnode has a ready-to-use toolbar for text formats on the edit page.

![Hashnode Tool bar](https://cdn.hashnode.com/res/hashnode/image/upload/v1623391914540/EGrSMCqhZ.png)

For a **bold** text; Wrap the text with double asterisks \*\* to make it bold.

```
**bold**

```

For _italics_ ; Wrap the text with a single asterisks character \* to make it italics.

```
*italics*

```

### Code Blocks:

Showing/Displaying demo code is a really important part of a technical/tutorial article. Markdown allows you to do that for any language, all you have to do is wrap the code blocks with Tripple Grave accent keys _```_

![Markdown Code Blocks](https://cdn.hashnode.com/res/hashnode/image/upload/v1623395613702/8gNQz5FX4.png)

```
print("Hello World")


console.log("Hello World")

```

#### Syntax Highlitings:

To enable syntax highlighting in code blocks, all you have to do is add the language name after the first/top triple grave accent keys:

![Markdown code syntax](https://cdn.hashnode.com/res/hashnode/image/upload/v1623396353398/ZF_Ap4Vep2.png)

```
print("Hello World")


console.log("Hello World")

```

## Resources

### 1. Online Markdown Editor

- StackEdit Online editor for markdown that enables you to sync files with GitHub and Google Drive

- Markdownsyntax One-stop site for all syntax in markdown and pretty great examples.

## Conclusion

I haven't covered all there is to know in markdown, but this is pretty much it to get you started up in writing an awesome article.

[Join Hashnode now and start sharing your knowledge!](https://hashnode.com/@chrisdevcode/joinme)