Markdown code take from VSCode

Getting started with Markdown (Cheatsheet)

Updated | 4 min read

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

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.

While using Markdown you may wish to add a link to some websites, 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)

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

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 one below.

# Todo

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

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 with a - or +.

# Shopping List

- Eggs
- Milk
- Ham

* Eggs
* Milk
* Ham

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

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~~

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
&lt;h1&gt;Heading 1&lt;/h1&gt;

&lt;p&gt;I am a paragraph&lt;/p&gt;
```

You can also make a code block with a tab space containing the code block. As far as I know, there is no way to specify what language you're using with this method.

<h1>Heading 1</h1>

    <p>I am a paragraph</p>

Result:

&lt;h1&gt;Heading 1&lt;/h1&gt;

&lt;p&gt;I am a paragraph&lt;/p&gt;

One use I have found for this method is within markdown if you want to display the backticks and language along with the block without compiling that into HTML, that's how I am displaying the example above.

```html
    <code>This is some code.</code>
    ```

Result:

```html
&lt;code&gt;This is some code.&lt;/code&gt;
```

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.

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.