Show Menu
Cheatography

Markdown / HTML Comparison

Paragraphs

Mark­down
Paragraphs are lines of text
(single returns are collapsed into a space)

Blank lines indicate a new paragraph
HTML
<p>­Par­agraphs are lines of text (single returns are collapsed into a space)­</p>

<p>­Blank lines indicate a new paragr­aph­</p>

Images

Mark­down
Images can be embedded: ![Image of dog](h­ttp­://­www.do­gs.c­om­/to­p_d­og.png)
HTML
<p>­Images can be embedded: <img source= "­htt­p:/­/ww­w.d­ogs.co­m/t­op_­dog.pn­g" title=­"­" alt="Image of dog" /><­/p>

Ordered Lists

Mark­down
HTML
1. First Item
<li­>First Item</­li>
2. Second Item
<li­>Second Item</­li>
3. Third Item
<li­>Third Item</­li>
List items are enclosed in <ol­></­ol>

Unordered Lists

Mark­down
HTML
* Alpha
<li­>Al­pha­</l­i>
* Beta
<li­>Be­ta<­/li>
* Gamma
<li­>Ga­mma­</l­i>
List items are enclosed in <ul­></­ul>

Headers - atx style

Mark­down
HTML
# H1 Header
<h1­>H1 Header­</h­1>
## H2 Header
<h2­>H2 Header­</h­2>
### H3 Header
<h3­>H3 Header­</h­3>

Headers - Setext style

Heading Level 1
==========

Heading Level 2
------­---­-----

Text Effects

Mark­down
HTML
_Italic_
<em­>It­ali­c</­em>
**Bo­ld**
<st­ron­g>B­old­</s­tro­ng>
~~Strikethrough~~
<de­l>S­tri­ket­hro­ugh­</d­el>

Resources

John Gruber Markdown site: Daring Fireball
Markdown specification:CommonMark
GitHub flavored markdown:GitHub Help
 

Horizontal Rule

Mark­down
---
*
- - -
HTML
<hr />

Links

Mark­down
Links are added like this: [link to my websit­e](­htt­p:/­/ww­w.f­eed­mec­hee­se.o­rg/)
HTML
Links are added like this: <a href="h­ttp­://­www.fe­edm­ech­ees­e.o­rg/­"­>link to Cheato­gra­phy­</a>

Block Quotes

Mark­down
> This is a
> blockquote
HTML
<bl­ock­quo­te>
<p>This is a
blockq­uot­e</­p>
</b­loc­kqu­ote>

Code Blocks Option 1

Mark­down
 ­ ­ ­ ­Indent text 4 characters or one tab
HTML
<pr­e><­cod­e>I­ndent text 4 characters or one tab</c­ode­></­pre>

Code Blocks Option 2

Mark­down
`This is code`
HTML
<p>­<co­de>This is code</­cod­e><­/p>

Code Syntax Highli­ghting

Mark­down
Code fencing (with backticks) and language:
```­`j­ava­script
if (isBad) {
return false
}
````
HTML
<p>Code fencing (with backticks) and langua­ge:­</p>
<div class=­"­hig­hlight highli­ght­-ja­vas­cri­pt">
<pr­e>
if (isBad) {
return false
}
</p­re>
</d­iv>

(incom­plete, shown for GitHub)
           

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Metadata

  • Languages:
  • Published: 9th April, 2015
  • Last Updated: 2nd November, 2018
  • Rated: 5 stars based on 2 ratings

Favourited By

rubashov4 ann-marie-creates Larry Hamilton lukasfrydek Bg10k Lavysh drapja Top19 0x7b4 thegitfather DeeJRoth

Comments

Great cheat sheet, Simon! I think in the "text effects" section, you need to escape the asterisks around "Bold" (use a backslash), as Cheatography uses a variant of Markdown for its own formating.

Simon Fermor Simon Fermor, 00:22 13 Apr 15

Thanks, nice catch. I just need a way to avoid back ticks being interpreted too...

DaveChild DaveChild, 10:07 13 Apr 15

Hi Simon. No problem - you can now escape backticks in the same way as other special characters.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Markdown Cheat Sheet

          More Cheat Sheets by Simon Fermor

          TiddlyWiki Cheat Sheet
          Ruby Essentials for Kids Cheat Sheet