Markdown Cheat Sheet

Overview

Part of this cheatsheet is the original work of: revolunet (ongithub), with additions/modifications I gathered from other sources ( cse).

If you use the fabulous Sublime Text 2/3 editor along with the Markdown Preview plugin, open your ST3 Palette with CMD+⇧+P then choose Markdown Preview in browser to see the result in your browser.

Tool: md2html -- A web app ... paste your markdown into a browser form field and click "Convert".

Text basics
This is *italic* and this is **bold** . another _italic_ and another __bold__
This is italic and this is bold . another italic and another bold
Important Text: Surround with Grave symbol (backtick): ` some text `
This is important text or code.


Strikethrough Text

Place two tildes (~) on each side of text for strikethrough.

~~This is strikethrough text~~

This is strikethrough text

Superscript & Subscript

This is really just HTML and is included here as an additional reference. Markdown deficiencies are sometimes easily-remedied with HTML. Depending on the markdown environment, HTML is rendered properly alongside markdown — IFF there is no mixed nesting!

Surround with <sup> or <sub> HTML tags

<sup>superscript</sup>
<sub>subscript</sub>

Example

This is a phrase with superscript<sup>cool</sup> and with subscript<sub>sick</sub>

This is a phrase with superscript cool and with subscript sick

Indentation

> Here is some indented text
>> even more indented

Here is some indented text

even more indented

Table of Contents (TOC)

Insert [ TOC ] without spaces to generate a table of contents (builtin parsers only).

Footnotes

FOOTNOTE: [^footnote-1] [^footnote-2] [^cnn] …
    Later, your footnotes will appear at the bottom of the document regardless of where you place their definition

This is a paragraph with a footnote (builtin parser only). [^footnote-1] This is another footnote[^footnote-2]. Footnotes, they should be on the news[^cnn], but not the weather ^weather.

FOOTNOTE DEFINED HERE … placed at 'foot' of document
[^footnote-1]: This is the text of the first footnote.
[^footnote-2]: This is the text of the second footnote.
[^cnn]: [CNN](http://cnn.com] - Cable News Network
[^weather]: [TWC]

[TWC]: http://weather.com

[^footnote-1]: This is the text of the first footnote. [^footnote-2]: This is the text of the second footnote. [^cnn]: CNN - Cable News Network

Titles

# Big title (h1)

## Middle title (h2)

### Smaller title (h3)

#### and so on (hX)

##### and so on (hX)

###### and so on (hX)

Big title (h1)

Middle title (h2)

Smaller title (h3)

and so on (hX)

and so on (hX)
and so on (hX)

Lists

 - bullets can be `-`, `+`, or `*`
 - bullet list 1
 - bullet list 2
    - sub item 1
    - sub item 2

        with indented text inside

 - bullet list 3
 + bullet list 4
 * bullet list 5


This is an [example inline link (google)](http://google.com/) and [another one with a title](http://google.com/ "Hello, world").

Links can also be reference based : [reference 1 (google.com)][ref1] or [reference 2 with title (google.com)][ref2].

This is an example inline link (google) and another one with a title/tool-tip.

Links can also be reference based : reference 1 (google.com) or reference 2 with title (google.com).

References are usually placed at the bottom of the document like this: 

[ref1]: http://google.com/

Anchors / Navigation (Link in-document)

Offer navigation within your document with something like this:

## Overview

* [Features](#features)
* [Commands](#commands)
* [Installation](#anchor-name)

THEN, place anchors throughout the document which correspond to the intra-document links noted in "Overview".

<a name="anchor-name"></a>

Images

A sample image (hosted on codebehold.com):

![Lena - Public Domain](https://mazey.cn/asset/lena-128-indexed.png)

Lena - Public Domain

Local relative path IFF converted HTML is final render 

![](lena-128-indexed.png)

As links, images can also use references instead of inline links :

![lena][] … Then, later in document, usually bottom …
[Lena]:https://mazey.cn/asset/lena-128-indexed.png

lena

Embed base64 images within the markdown!

Ensure the base 64 image is all on a single line -- no spaces!

Tool: Image to Base 64 Converter WebApp

Embed Format

//ref in doc
![tag_txt][]

//link (at bottom of md file)
[tag_txt]:data:image/png;base64,iVBORw0KGgo...

Example

// inline
![Redragon M901 PERDITION](data:image/webp;base64,UklGRngWAABXRUJQVlA4IGwWAABweA … BnABNEAAAAAAA)

Better for the readability of your markdown file to include/embed base64 images as references

Redragon M901 PERDITION 16400 DPI High-Precision Programmable Laser Gaming Mouse for PC, MMO, 18 Programmable Buttons, Weight Tuning Cartridge, 12 Side Buttons, 5 programmable user profiles, Omron Micro Switches (Black) 

// linked (better)
![Redragon M901 PERDITION][]
... then, at the bottom of your markdown file, place the reference
[Redragon M901 PERDITION]:data:image/webp;base64,UklGRng ... ABNEAAAAAAA

Redragon M901 PERDITION

Code

It's quite easy to show code in markdown files.

Backticks can be used to highlight some words.

Also, any indented block is considered a code block. If enable_highlight is true, syntax highlighting will be included (for the builtin parser - the github parser does this automatically).

<script>
    document.location = 'http://lmgtfy.com/?q=markdown+cheat+sheet';
</script>

Comments

Method 1 

<!---
    comment
-->

Method 2: Doesn't show up in the converted source code

[//]: # (This may be the most platform independent comment)

Math

When enable_mathjax is true, inline math can be included \(\frac{\pi}{2}\) $\pi$

Alternatively, math can be written on its own line:

$$F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt$$

\[\int_0^1 f(t) \mathrm{d}t\]

\[\sum_j \gamma_j^2/d_j\]

GitHub Flavored Markdown

If you use the Github parser, you can use some of Github Flavored Markdown syntax :

Some Python code :

import random

class CardGame(object):
    """ a sample python class """
    NB_CARDS = 32
    def __init__(self, cards=5):
        self.cards = random.sample(range(self.NB_CARDS), 5)
        print 'ready to play'

Some Javascript code :

var config = {
    duration: 5,
    comment: 'WTF'
}
// callbacks beauty un action
async_call('/path/to/api', function(json) {
    another_call(json, function(result2) {
        another_another_call(result2, function(result3) {
            another_another_another_call(result3, function(result4) {
                alert('And if all went well, i got my result :)');
            });
        });
    });
})

The Github Markdown also brings some nice Emoji support : :+1: :heart: :beer:

Parsers and Extensions

Markdown Preview comes with Python-Markdown preloaded.

Python-Markdown

The Python-Markdown Parser provides support for several extensions.

Extra Extensions

You can enable them all at once using the extra keyword.

extensions: [ 'extra' ]

If you want all the extras plus the toc extension, your settings would look like this:

{
    ...
    parser: 'markdown',
    extensions: ['extra', 'toc'],
    ...
}

Other Extensions

There are also some extensions that are not included in Markdown Extra but come in the standard Python-Markdown library.

3rd Party Extensions

Python-Markdown is designed to be extended.

Some included ones are:

There are also a number of others available:

Just fork this repo and add your extensions inside the .../Packages/Markdown Preview/markdown/extensions/ folder.

Check out the list of 3rd Party extensions.

Default Extensions

The default extensions are:

Use the default keyword, to select them all. If you want all the defaults plus the definition_lists extension, your settings would look like this:

{
    ...
    parser: 'markdown',
    extensions: ['default', 'definition_lists'],
    ...
}

Tables

The tables extension of the Python-Markdown parser is activated by default, but is currently not available in Markdown2.

The syntax was adopted from the php markdown project, and is also used in github flavoured markdown.

| Year | Temp °C (low) | Temp °C (high) |
| --- | --- | --- |   ←  notice only three dashes are needed for each column
| 1900 | -10 | 25 |
| 1910 | -15 | 30 |
| 1920 | -10 | 32 |

Yields:

Year Temp °C (low) Temp °C (high)
1900 -10 25
1910 -15 30
1920 -10 32 
COLON  — COLUMN ALIGNMENT
| ----: |   ← Right Align
| :---: |   ← Center Align
| :--- |    ← Left Align (default if no colons are used)

Alignment shown below: Right, Center, Center

Directional Number Char
Left 1 J
Up 2 K
Down 3 L
Right 4 ;

Wiki Tables

If you are using Markdown2 with the wiki-tables extra activated you should see a table below:

|| Year || Temperature (low) || Temperature (high) ||
|| 1900 || -10 || 25 ||
|| 1910 || -15 || 30 ||
|| 1920 || -10 || 32 ||

Definition Lists

This example requires Python Markdown's def_list extension.

Apple
:   Pomaceous fruit of plants of the genus Malus in
    the family Rosaceae.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

Apple : Pomaceous fruit of plants of the genus Malus in the family Rosaceae.

Orange : The fruit of an evergreen tree of the genus Citrus.