The Lowdown on Markdown
A free resource brought to you by webcrunch.comWelcome to a free resource for anyone looking for a quick way to use, understand, and implement markdown quickly. The language itself seems complex at first but in a short amount of time you can memorize characters that pertain to specific formatting options available to you. Gone are the days of unnecessary bulky word processing applications. Convert to markdown and experience writing freedom!
Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6
Want them underlined?:
# H1
======
## H2
------
visibilityOutput
H1
H2
H3
H4
H5
H6
Want them underlined?:
H1
H2
Emphasis
Emphasis otherwise known as italics, work with *asterisks* or _underscores_.
If you want to bold text, double them with **asterisks** or __underscores__.
Want to combine them? Use **asterisks and _underscores_**.
To strike through text use two tildes. ~~Omit this text.~~
visibilityOutput
Emphasis otherwise known as italics, work with asterisks or underscores.
If you want to bold text, double them with asterisks or underscores.
Want to combine them? Use asterisks and underscores.
To strike through text use two tildes. Omit this text.
Lists
Unordered Lists
Unordered lists (the bulleted type) use asterisks, pluses, and hyphens (*, +, -) as list markers. You can use these markers interchangeably
* Beer
* Whiskey
* Rum
------
- Beer
- Whiskey
- Rum
------
+ Beer
+ Whiskey
+ Rum
------
If you put blank lines in between items with list markers you get paragraph outputs on a new line.
+ Beer
+ Whiskey
Whiskey is likely my favorite alcohol that I love and hate for multiple reasons.
+ Rum
visibilityOutput
All list markers produce the same output.
- Beer
- Whiskey
- Rum
- Beer
- Whiskey
- Rum
Whiskey is likely my favorite alcohol that I love and hate for multiple reasons.
Ordered Lists
Ordered lists (the numerical type) use numbers as you would normally. (1., 2., 3.) as list markers. Remember to add the period trailing the number.
1. Buy more food
2. Ingest food
3. Repeat
visibilityOutput
- Buy more food
- Ingest food
- Repeat
Links
Links are created in two ways. Those two are inline and reference. Both styles use square brackets and parentheses.
[Inline Links](http://webcrunch.com)
[Inline Links with Title](http://webcrunch.com "Welcome to Webcrunch")
[Links for reference][Reference text]
You can refer to a link without reference text [my cool link]
If you're citing sources its a common pattern to use numbers [1]
Here's our Links for reference from earlier. You can use this for footnotes or citing for example.
[Reference text]: http://google.com
[1]: http://wikipedia.com "Wikipedia Page"
[my cool link]: http://github.com
The title attribute on all links are optional. Link names can contain letters, numbers, and spaces but are not case sensitive.
visibilityOutput
You can refer to a link without reference text my cool link
If you're citing sources its a common pattern to use a number as a referencer with your content
Here's our Links for reference from earlier. You can use this for footnotes or citing for example.
Images
Images are very much link links with one minor difference. Prefixing the !
sign before the link style syntax. As with links titles are optional. Images can be inline or reference based just like links.
#### Inline

#### Reference
![alt text for image][imageid]
[imageid]: http://lorempixel.com/450/350/animals "Title"
visibilityOutput
Both styles above produce the same output
Code
Inline
Code can be created inside paragraphs using backtick quotes. Any ampersands (&) and angle brackets (< or >) will be translated to HTML.
When defining a `html` document don't forget to include the `head` tags.
visibilityOutput
When defining a html
document don't forget to include the head
tags.
Block Level
Block level code can be created using three backtick quotes. Any ampersands (&) and angle brackets (< or >) will be translated to HTML.
```
#myelement {
font-family: 'Roboto', sans-serif;
margin: 2em;
}
```
visibilityOutput
#myelement { font-family: 'Roboto', sans-serif; margin: 2em; }
Blockquotes
Blockquotes are useful when calling attention to a passage of text. At each now line simply use >
before it.
> This is my blockquote which may extend a couple lines or more. You can format further with more **markdown**.
visibilityOutput
This is my blockquote which may extend a couple lines or more. You can format further with more Markdown.
Tables
Depending on your flavor of markdown you may have support for tables ready to go. Tables don't come ready out of the original markdown spec but Github supports them. Proceed with caution before going out of your way to make tables if you don't have support in your current editor.
Requirements / Notes- Colons (:) can be used to justify text within a cell or column (right-aligned, centered, left-aligned)
- There must be at least 3 dashes separating each header cell.
- The outer pipes are option but increase legibility for sure.
- You can use inline markdown for the same formatting but it's a pain to read so I wouldn't recommend it.
| Tables | Are | Killer|
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $100 |
| col 2 is | centered | $50 |
| col 1 is | left-aligned | $1 |
visibilityOutput
* Using [google material lite](http://www.getmdl.io/)
Tables | Are | Killer |
---|---|---|
col 3 is | right-aligned | $100 |
col 2 is | centered | $50 |
col 1 is | left-aligned | $1 |
Horizontal Rules
You can provide a horizontal rule in a few ways by placing three or more hyphens, asterisks, or underscores on a line independently. Each of the following produce a horizontal rule.
Asterisks
* * *
Asterisks no space
***
Many Asterisks
*****
Hyphens
- - -
Underscores
_______________
visibilityOutput
Subscribe to our mailing list
Want more free resources like this delivered to your inbox? Enter your email below. We promise not to spam you. Never ever.