Lesson Overview

Markdown Introduction

Learn the basics of Markdown, the language used for writing content.
3 minutes 561 words

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.


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.


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.


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


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

I am **bold**

Output –> I am bold


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


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

1. Item 1
2. Hello
3. Goodbye


  1. Item 1
  2. Hello
  3. Goodbye


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

- Item 1
- Hello
- Goodbye


  • Item 1
  • Hello
  • Goodbye


To scratch something out, use double tildes.

- Eggs
- ~~Milk~~


  • Eggs
  • Milk

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

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


Click me


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")


alt text


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 |


col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1


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

> I think therefore I am


I think therefore I am


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!

Share this page