Show Menu
Cheatography

Markdown / HTML Comparison

Paragraphs

Markdown
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

Markdown
Images can be embedded: !Image of dog
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

Markdown
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

Markdown
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

Markdown
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

Markdown
HTML
_Italic_
<em­>It­ali­c</­em>
**Bold**
<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 specif­ica­tion:CommonMark
GitHub flavored markdown:GitHub Help
 

Horizontal Rule

Markdown
---
*
- - -
HTML
<hr />

Links

Markdown
Links are added like this: link to my website
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

Markdown
> 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

Markdown
 ­ ­ ­ ­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

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

Code Syntax Highli­ghting

Markdown
Code fencing (with backticks) and language:
````ja­vas­cript
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)
           
 

Metadata

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

Favourited By

rce343 lucas0080 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