Getting started with Markdown (Cheatsheet)

brettanda

Brett Anda 🔥🧠

Posted on February 19, 2020

Getting started with Markdown (Cheatsheet)

This article assumes that you don't know anything or very little about the Markdown language, or if you have just come to find out what you might have missed.

Why use Markdown?

Before we get into things let's talk about why you would want to use Markdown in the first place.

  • A great reason for using markdown is that it's everywhere. Some examples of websites that use Markdown are Reddit, Github, Medium, Dev.to, etc... You can also use it for many things outside of the web like for documents, books, presentations, and emails.

  • Because markdown is simple and easy to read it is future proof. If a website or service stops supporting Markdown you still have the formatted file.

The basics

These tags are probably what you will be using for the most part and will be important to remember.

Headings

Let's start at the beginning. To make a header or heading you add a # to the beginning of the line. One # is equivalent to an <h1> in HTML. To move down the line of headings you just add more #'s like so.

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6
Enter fullscreen mode Exit fullscreen mode

Paragraphs

Adding paragraphs is super simple. It is the default for writing with markdown. The only thing you need to do to write a paragraph is that you have nothing in front of your text.

# Heading 1

I am a paragraph, I have nothing to identify anything else so I will default to a paragraph.

I am another paragraph.
Enter fullscreen mode Exit fullscreen mode

Adding Links

While using Markdown you may wish to add a link to some website, like Developer Bacon ;). To add a link you just need [](). In the first square brackets, you will add the link text that shows on the websites, and for the round brackets that is where you add the link.

I am a paragraph, here is my text. [I am a link](http://example.com)
Enter fullscreen mode Exit fullscreen mode

Result:

I am a paragraph, here is my text. I am a link

For adding links you can also add the link directly like this:

I am a paragraph, here is my text. http://example.com
Enter fullscreen mode Exit fullscreen mode

Shopping Lists

So make a list is as simple as adding a - or 1. in front of some text. To make an ordered list you will just number the text like the below.

# Todo

1. Make some Bacon
2. Laundry
3. Vacuum the house
4. Take the dog for a walk
Enter fullscreen mode Exit fullscreen mode

Result:

  1. Make some Bacon
  2. Laundry
  3. Vacuum the house
  4. Take the dog for a walk

To make an unordered list you do the same thing just replace the numbers for a - or +.

# Shopping List

- Eggs
- Milk
- Ham

* Eggs
* Milk
* Ham
Enter fullscreen mode Exit fullscreen mode

Result:

  • Eggs
  • Milk
  • Ham

  • Eggs

  • Milk

  • Ham

Block Quotes

To add a blockquote you just need to add > to the front of the text.

> this is a blockquote
Enter fullscreen mode Exit fullscreen mode

Result:

this is a blockquote

Italics, Bold, and Strikethrough

You can also make Italic's, Bold text and Strikethroughs, just like these:

_This is italicized_

_This is italicized_

**This is bold**

**This is bold**

~~This is a strikethrough~~
Enter fullscreen mode Exit fullscreen mode

Result:

This is italicized

This is italicized

This is bold

This is bold

This is a strikethrough

The cool and extra tags

These tags are still very useful, but might not be as common as the above tags (depending on where you are looking).

Code

This one is a little different because you have to specify the start and end of the code block. For both the beginning and end of a code block you will just need to place `. With these blocks, you can also specify the coding language. To do so just add the language title right after the first `. A great list of how languages should be entered in for the title and a great code block color/pretifier is prismjs.com/#supported-languages.

```html
<h1>Heading 1</h1>

<p>I am a paragraph</p>
```
Enter fullscreen mode Exit fullscreen mode

Inline Code

If you want to add a code block inline with a paragraph it's as simple as adding backticks around some text like this:

This is some text about a `<p>` tag.
Enter fullscreen mode Exit fullscreen mode

Result:

This is some text about a <p> tag.

Because I am considering this article a cheat sheet for markdown I will update it if I find more features in markdown.

💖 💪 🙅 🚩
brettanda
Brett Anda 🔥🧠

Posted on February 19, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related