Markdown Cheat Sheet

Author: MikeW    Date: 2016-09-19 17:28   


Table of Contents

Phrase Markup

Markdown Syntax

  • *i am italic* or _i am italic_
  • **i am bold** or __i am bold__

HTML Generated

  • <em>i am italic</em>
  • <strong>i am bold</strong>

Sample Output

  • i am italic
  • i am bold

Links

Markdown Syntax

  • Inline
    An [example](http://url.com/ "Title")

    Link to [google](http://www.google.com "Google Title")
  • Reference-style labels (titles are optional):

    An [example][id]. Then, anywhere else in the doc [like here][id], or maybe [here][id]. You can reuse the [link][id].

    Define the link like this:
    [id]: http://google.com/ "Google Link"

HTML Generated

  • Link to <a href="http://www.google.com" title="Google Title">google</a>
  • <p>Reference-style labels (titles are optional):</p> <p>An <a href="http://google.com/" title="Google Link">example</a>. Then, anywhere else in the doc <a href="http://google.com/" title="Google Link">like here</a>, or maybe <a href="http://google.com/" title="Google Link">here</a>. You can reuse the <a href="http://google.com/" title="Google Link">link</a>.<br/></p>

    Define the link like this:

Sample Output

  • Link to google

  • Reference-style labels (titles are optional):

    An example. Then, anywhere else in the doc like here, or maybe here. You can reuse the link.

    Define the link like this:

Images

Markdown Syntax

  • Inline (titles are optional):
    ![alt text](/path/img.jpg "Title")
    ![Internet Icon](internet-icon-sm.png "Internet")
  • Reference-style:
    Picture goes here ![alt text][id] and here again ![alt text][id] and here again ![alt text][id].
    [id]: /url/to/img.jpg "Title"

    Picture goes here ![Internet Icon][id] and here again ![Internet Icon][id] and here again ![Internet Icon][id].
    [id]:internet-icon-sm.png "Internet"

Sample HTML Generated

  • <img src="internet-icon-sm.png" alt="Internet Icon" title="Internet" />
  • Picture goes here <img src="internet-icon-sm.png" alt="Internet Icon" title="Internet" /> and here again <img src="internet-icon-sm.png" alt="Internet Icon" title="Internet" /> and here again <img src="internet-icon-sm.png" alt="Internet Icon" title="Internet" />.

Sample Output

  • Internet Icon
  • Picture goes here Internet Icon and here again Internet Icon and here again Internet Icon.

Headers

Markdown Syntax

  • atx-style:
    # Header 1
    ## Header 2
    ###### Header 6
  • Setext-style:
    Header 1
    ========

    Header 2
    --------

HTML Generated

  • <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h6>Header 6</h6>
  • Setext-style:
    <h1>Header 1</h1>
    <h2>Header 2</h2>

Sample Output

  • Header 1

    Header 2

    Header 6
  • Setext-style:

    Header 1

    Header 2

Lists

Markdown Syntax

  • Ordered, without paragraphs:
    1. Foo
    2. Bar
  • Unordered, with paragraphs:
    *   A list item.

    With multiple paragraphs.

*   Bar
  • You can nest them:
    *   Abacus
    * answer
*   Bubbles
    1.  bunk
    2.  bupkis
        * BELITTLER
    3. burper
*   Cunning

HTML Generated

  • <p>Ordered, without paragraphs:</p>
    <ol>
    <li>Foo</li>
    <li>Bar</li>
    </ol>
  • <p>Unordered, with paragraphs:</p>

    <ul>
    <li><p>A list item.</p>

    <p>With multiple paragraphs.</p></li>
    <li><p>Bar</p></li>
    </ul>
  • <p>You can nest them:</p>

    <ul>
    <li>Abacus
    <ul><li>answer</li></ul></li>
    <li>Bubbles
    <ol>
    <li>bunk</li>
    <li>bupkis
    <ul><li>BELITTLER</li></ul></li>
    <li>burper</li></ol></li>
    <li>Cunning</li>
    </ul>

Sample Output

  • Ordered, without paragraphs:

    1. Foo
    2. Bar

  • Unordered, with paragraphs:

    • A list item.

      With multiple paragraphs.

    • Bar

  • You can nest them:

    • Abacus
      • answer
    • Bubbles
      1. bunk
      2. bupkis
        • BELITTLER
      3. burper
    • Cunning

Blockquotes

Markdown Syntax

  • > Email-style angle brackets
    > are used for blockquotes.

    > > And, they can be nested.

    > #### Headers in blockquotes
    >
    > * You can quote a list.
    > * Etc.

HTML Generated

  • <blockquote>
    <p>Email-style angle brackets
    are used for blockquotes.</p>

    <blockquote>
    <p>And, they can be nested.</p>
    </blockquote>

    <h4>Headers in blockquotes</h4>

    <ul>
    <li>You can quote a list.</li>
    <li>Etc.</li>
    </ul>
    </blockquote>

Sample Output

  • Email-style angle brackets are used for blockquotes.

    And, they can be nested.

    Headers in blockquotes

    • You can quote a list.
    • Etc.

Code Spans

Markdown Syntax

  • `<code>` spans are delimited by backticks.

    You can include literal backticks like `` `this` ``.

HTML Generated

  • <p><code>&lt;code&gt;</code> spans are delimited by backticks.</p>

    <p>You can include literal backticks like <code>`this`</code>.</p>

Sample Output

  • <code> spans are delimited by backticks.

    You can include literal backticks like `this`.

Preformatted Code Blocks

Markdown Syntax

  • Indent every line of a code block by at least 4 spaces or 1 tab.

    This is a normal paragraph.

        This is a preformatted
        code block.

HTML Generated

  • <p>Indent every line of a code block by at least 4 spaces or 1 tab.</p>
    <p>This is a normal paragraph.</p>

    <pre><code>This is a preformatted
    code block.
    </code></pre>

Sample Output

  • Indent every line of a code block by at least 4 spaces or 1 tab.

    This is a normal paragraph.

    This is a preformatted
code block.

Horizontal Rules

Markdown Syntax

  • Three or more dashes or asterisks:

    Some Text

    ---

    Some Text
    * * *

    Some Text
    - - - -

HTML Generated

  • <p>Three or more dashes or asterisks:</p>

    <p>Some Text</p>

    <hr />

    <p>Some Text</p>

    <hr />

    <p>Some Text</p>

    <hr />

Sample Output

  • Three or more dashes or asterisks:

    Some Text

    Some Text

    Some Text

Manual Line Breaks

Markdown Syntax

  • End a line with two or more spaces:

    Roses are red,
    Violets are blue.

HTML Generated

  • <p>Roses are red, <br />
    Violets are blue.</p>

Sample Output

  • Roses are red,
    Violets are blue.