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.
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
- Item 1
For lists to use bullet points, use a dash in-front of the item.
- Item 1 - Hello - Goodbye
- Item 1
To scratch something out, use double tildes.
- Eggs - ~~Milk~~
To create a link to another page, use square brackets for the text followed by parentheses for the link.
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")
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 is||right-aligned||$1600|
|col 2 is||centered||$12|
|zebra stripes||are neat||$1|
Sometimes we like to quote a phrase, this can be accomplished with a
> 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!