Markdown Introduction

Before we start developing our new fancy site. We are going to learn about Markdown.

Markdown is a language used for writing content. Content can be anything, like blog posts, food recipes, books, documentation, etc…Markdown is then converted to code like HTML that can be understood by browsers, like Chrome or Firefox to display on screen.

It is very simple to learn and it allows us to consistently and easily format our content, meaning all page titles and subtitles will look the same, all quotes and paragraphs will look the same, and all lists will look the same.

Sandbox

To play around with everything we will learn on this page, use the sandbox below for experimenting with Markdown. Write Markdown on the left hand side and look at the output it produces on the right hand side.

Headers

To create different sized headers or titles on a page, there are 6 available options.

# H1
## H2
### H3
#### H4
##### H5
###### H6

The smaller the number, the larger the text.

Try copy pasting that snippet into the sandbox and see the output it gives.

Italics

To italicize some text in your markdown, you can use underscores to surround the word, or sentence, that needs to be italicized.

Hello, _Lera_

Output of the above snippet would look like this –> Hello Lera

Bold

To bold some text, surround the word in double asterisks.

I am **bold**

Output –> I am bold

Lists

There are two types of lists that can be formatted with Markdown, ordered and unordered.

Ordered

For creating order lists, just write a number with a period after, then some text:

1. Item 1
2. Hello
3. Goodbye

Output:

1. Item 1
2. Hello
3. Goodbye

Unordered

For lists to use bullet points, use a dash in-front of the item.

- Item 1
- Hello
- Goodbye

Output:

• Item 1
• Hello
• Goodbye

Scratch

To scratch something out, use double tildes.

- Eggs
- ~~Milk~~

Output:

• Eggs
• Milk

Links

To create a link to another page, use square brackets for the text followed by parentheses for the link.

[Click me](https://google.com)

Output:

Click me

Images

Images take a URL, alternate text and a title. The URL is for loading the image, the alternate text is text that should be shown if the image can not be loaded properly and the title text is for when someone hovers over the image with their mouse so the title displays as a small tool-tip popup.

![alt text](https://hugo-mini-course.netlify.app/img/yellowduck.png "Logo Title Text 1")

Output:

Tables

We can also create nice tables easily in Markdown using Pipes and Dashes.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Output:

Blockquotes

Sometimes we like to quote a phrase, this can be accomplished with a > symbol.

> I think therefore I am

Output:

I think therefore I am

More

This information pretty much covers 95% of what you would need in markdown, but for further reference, check out this markdown cheat sheet on github.

** Fun fact: this whole mini course on Hugo is made with Hugo AND is written in Markdown!