Mastering Markdown

Return to Demo

This file was originally produced in Visual Studio Code and later updated using MacDown and following along with the Wes Bos Mastering Markdown course.


A single '#' is an H1 header more ... is h2, h3, h4 etc. Note that you can also do Heading 1 with equal signs or Heading 2 with dashes underneath them to create headings. There is no 3, 4, 5... examples:

Heading 1

Heading 2

Heading 1
=========

Heading 2
---------

Moving on to the rest...

Things learned while taking a course from Web Bos named Mastering Markdown.

italics or italics

bold or bold

*italics* or _italics_ 

**bold** or __bold__ 

A single of an item is always going to be italics. Double of an item is always going to be bold.

Double tilde - ~ - is ~~strike through~~.

Links

wrap your link in this... '<' and '>' and that makes a standard link https://www.steili.com a clickable link like so: https://www.steili.com

wrap your link in this... '<' and '>' and that makes a standard link https://www.steili.com a clickable link like so: <https://www.steili.com>

You can also wrap your text in brackets [ ] and then put your link in parenthesis. Add some text in quotes inside the parenthesis and you have a popup hint. My Website

 You can also wrap your text in brackets [ ] and then put your link in parenthesis. Add some text in quotes inside the parenthesis and you have a popup hint.
 [My Website](https://www.steili.com "This is my website!")

Even cooler you can do a "key"... which allows you to paste the link at the bottom of your markdown page.

So I could do a link like this and not futz up all the text. And it allows me to re-use that same link over and over again.

  So I could do a [link][1] like this and not futz up all the text. And it allows me to re-use that same link [over][1] and [over][1] again.

Images

! - identifies this as an image

[] - Will contain the description text for a screen reader

() - will contain the link to the image. Put quotes in here for the tooltip.

Example:

Random Image from Unsplash

![Random Image from Unsplash](http://unsplash.it/500/500?random)

You can also make it clickable. Requires some funky syntax:

[![](http://unsplash.it/100/100?image=1000)](http://unsplash.it/500/500?image=1000)

Unordered Lists

Put a *, +, or - and then a space in front of the items

* milk
* cereal
* eggs

### Ordered Lists

Just put a number in front of the items.

  1. milk
  2. cereal
  3. eggs

    (it will put the right numbers in place of the numbers.)

    1. milk
    1. cereal
    1. eggs

Sub items are simple. Just indent.

  1. milk
  2. cereal

  3. eggs

1. milk
    * subitem
1. cereal
    * subitem

        Sub paragraph with a [link][1]
1. eggs

Checkboxes

Put square brackets and a space between them. Note: This is not part of the spec and may not be implemented everywhere.

* [ ] Item 1 
* [x] Item 2 
* [ ] Item 3 
* [ ] Item 4 

Linkbreaks

Just use a br tag from HTML

Horizontal Lines

Use at least 3 dashes (or three eqaul signs) on a line by itself. Be careful ... remember the dashes and equals stuff about headers!

----

Block Quotes

Put a > in front of whatever the quote is.

This is a block quote.

-First spoke by someone

> This is a block quote. 
> 
>   -*First spoke by someone*

How to display code

You can either indent your code:

var = x;
const dog = "Bob Barker";
 
    var = x;
    const dog = "Bob Barker";

or you can designate it using three backticks and the language:

var = x;
const dog = "Bob Barker";
```Markdown
var = x;
const dog = "Bob Barker"; 

Put ``` at the end

You can use a surrounding text to signify it in code in the middle of a sentence`.

You can use a ` surrounding text to signify it in code ` in the middle of a sentence`.

You can also do something like this: Diff var x = 100 - var y = 200 + var y = 300 ``` Which displays like this:

var x = 100
- var y = 200 
+ var y = 300

Tables

Tables - put pipes around everything. Under the first line of text put a pipe then a colon then dashes, then pipe, colon dashes to a final pipe. The colons determine if the text is right aligned or centered or left aligned. Like so:

|Left Aligned|Centered|Right Aligned|
|:-----------|:------:|------------:|
|Left1|Center1|Right1|
|Left2|Center2||Right2|
Left Aligned Centered Right Aligned
Left1 Center1 Right1
Left2 Center2 Right2