Skip to content

Latest commit

 

History

History
974 lines (657 loc) · 17.4 KB

cheatsheet.md

File metadata and controls

974 lines (657 loc) · 17.4 KB

Cheatsheet - Markdown Syntax with GFM

This cheatsheet uses markdown syntax based on:

Table of Contents

Headers

# h1

## h2

### h3

#### h4

##### h5

###### h6

h1 Alternate
============

h2 Alternate
------------

h1

h2

h3

h4

h5
h6

h1 Alternate

h2 Alternate

Paragraphs and Line Breaks

A paragraph is a paragraph is a paragraph is a paragraph is a paragraph. Is a paragraph is a paragraph is a paragraph is a paragraph is a paragraph. Is a paragraph is a paragraph is a paragraph.
This is a not a new line.
This as not as well..

This is a new paragraph.

Forcing a new line with `<br>` <br> causes a new line.

Or ending a line with two spaces  
causes a line break as well

A paragraph is a paragraph is a paragraph is a paragraph is a paragraph. Is a paragraph is a paragraph is a paragraph is a paragraph is a paragraph. Is a paragraph is a paragraph is a paragraph. This is a not a new line. This as not as well..

This is a new paragraph.

Forcing a new line with <br>
causes a new line.

Or ending a line with two spaces
causes a line-break as well

Styling Text

**Bold** Text      === __Bold__ Text
*Emphasised* Text  === _Emphasised_ Text
`monospaced` Text
~~strikethrough~~ Text
Wi*thin*Words   - but not -   Wi_thin_Words

Bold Text === Bold Text

Emphasised Text === Emphasised Text

Monospaced Text

Strikethrough Text

WithinWords - but not - Wi_thin_Words

Escaping

\\   backslash
\`   backtick
\*   asterisk
\_   underscore
\{\}  curly braces
\[\]  square brackets
\(\)  parentheses
\#   hash mark
\+   plus sign
\-   minus sign (hyphen)
\.   dot
\!   exclamation mark

\ backslash
` backtick
* asterisk
_ underscore
{} curly braces
[] square brackets
() parentheses
# hash mark
+ plus sign
- minus sign (hyphen)
. dot
! exclamation mark

Lists

Unordered

* Cyan
* Magenta
* Yellow

- Red
- Green
- Blue

+ Black
+ Gray
+ White

* Cyan
  * No Red
  * Green
    * Is a color
      * like the grass
  * Blue
    * Another color
    * like the sky
* Magenta
* Yellow
  • Cyan
  • Magenta
  • Yellow
  • Red
  • Green
  • Blue
  • Black
  • Gray
  • White
  • Cyan
    • No Red
    • Green
      • Is a color
        • like the grass
    • Blue
      • Another color
      • like the sky
  • Magenta
  • Yellow

Ordered, Mixed

1. Red
2. Green
3. Blue

2. Black
3. Grey
1. White

<!--- -->

40. Cyan
   1. RGB (0, 255, 255)
   1. A color between green and blue
      * Green
      * Blue
2. Magenta
10. Yellow

Note: Wrong numbers get corrected into right order!

  1. Red

  2. Green

  3. Blue Note: Counting continues with line-breaks

  4. Black

  5. Grey

  6. White

  1. Cyan Note: Counting is restarted with 40 after <!--- -->
  2. RGB (0, 255, 255)
  3. A color between green and blue
    • Green
    • Blue
  4. Magenta
  5. Yellow

Tables

| Column 1 | Column 2 | Column 3 |
| ---      | ---      | ---      |
| Row 1    | 1        | 2        |
| Row 2    | 3        | 4        |
Column 1 Column 2 Column 3
Row 1 1 2
Row 2 3 4

Column Alignment

| Left Aligned | Center Aligned | Right Aligned |
| ---          | :---:          | ---:          |
| Row 1        | 1              | 2             |
| Row 2        | 3              | 4             |
Left Aligned Center Aligned Right Aligned
Row 1 1 2
Row 2 3 4

Links

http://example.com

<http://example.com>

[Linktext](http://example.com)

[Reference][Referenced Link]

[Referenced Link][]

[Referenced Link]: http://example.com

http://example.com

http://example.com

Linktext

Reference

Referenced Link

Link within document

<a name="cross-reference">

[Cross-Reference](#cross-reference)

Cross-Reference

Block Quotes

> Block Quoted Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Or line
> by line

You need "text" to break block quotes

> Or with a
> > nested quote

> line

Block Quoted Text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Or line by line

You need "text" to break block quotes

Or with a

nested quote

line

Horizontal Ruler

Three or more Hyphens, Asterisks, Underscores

---

***
___




Images

<style> img[alt=img100x] {width: 100px; border: 5px solid red; border-radius: 25%} </style>
![Alt Text](path_to/img.png)
![Alt Text](path_to/img.png "Optional Title")
![Alt Text](http://placehold.it/150x100)
![broken image](http://localhost/my-broken-image)

Alt Text Alt Text Alt Text broken image

Using plain html can be used to size images:

<img src="path_to/img.png" title="Optional Title" alt="Alt Text" style="width: 50px;">

Alt Text

Styling images can also be done by hijacking on the alt attribute.

<style>
img[alt=img100x] {width: 100px; border: 5px solid red; border-radius: 25%}
</style>
![img100x](path_to/img.png)
<style> img[alt=img100x] {width: 100px; border: 5px solid red; border-radius: 25%} </style>

img100x

Code

`a line of code`

``literal backtick (`)``

a line of code

literal backtick (`)

Indented Block

    a line of code
    literal backtick (`)

outputs:

a line of code
literal backtick (`)

Highlighting

```javascript
(function(){
  "use strict";
  var t = "a string";
  console.log(t);
}())
```

outputs:

(function(){
  "use strict";
  var t = "a string";
  console.log(t);
}())

Inline HTML

<dl>
  <dt>A Definition List</dt>
  <dd>Mixing Markdown might **not** work *everywhere*. <br>
      Use HTML <em>tags</em> <strong>instead</strong>.</dd>
</dl>
A Definition List
Mixing Markdown might **not** work *everywhere*.
Use HTML tags instead.

Inline Comments

<!---
This is a comment (!NOTE the 3 <!--- dashes)
-->

Extensions

Styles

<kbd>

Press <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>F5</kbd>

Press Ctrl + R or F5

Abbreviation

Provided by markdown-it-abbr.

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C.

Admonitions

See markdown-it-admon for supported admonitions.

!!! note 
    A note with some text

!!! note A note with some text

!!! warning Warning with custom Title
    *Here be dragons!*

!!! warning Warning with custom title Here be dragons!

!!! info nested admonitions
    An info box

    !!! snippet

        ```js
        console.log('Hello World')
        ```

    !!! tip ""
        This box has not title.


Two empty lines auto-close

!!! info nested admonitions An info box

!!! snippet

    ```js
    console.log('Hello World')
    ```

!!! tip ""
    This box has not title.

The following admonition types are supported:

  • note,
  • summary, abstract, tldr,
  • info, todo,
  • tip, hint,
  • success, check, done,
  • question, help, faq,
  • warning, attention, caution,
  • failure, fail, missing,
  • danger, error, bug,
  • example, snippet,
  • quote, cite

however, you’re free to use whatever you want

Attributes

Provided by markdown-it-attrs.

<style>
.style-me { color: magenta; border: 1px solid cyan; padding: 0 0.25em; }
.red { color: red; }
.border { border: 2px solid grey; }
</style>
#### header {.style-me}

paragraph {data-toggle=modal .style-me} 

paragraph *style me*{.red} more text

```python {.border}
nums = [x for x in range(10)]
```
<style> .style-me { color: magenta; border: 1px solid cyan; padding: 0 0.25em; } .red { color: red; } .border { border: 2px solid grey; } </style>

header {.style-me}

paragraph {data-toggle=modal .style-me}

paragraph style me{.red} more text

nums = [x for x in range(10)]

Definition Lists

Provided by markdown-it-deflist.

Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

Term 1

: Definition 1

Term 2 with inline markup

: Definition 2

    { some code, part of Definition 2 }

Third paragraph of definition 2.

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Emoji

Provided by markdown-it-emoji. See http://www.webpagefx.com/tools/emoji-cheat-sheet/ for supported emojis.

😄 :smile:
😊 :blush:
☀️ :sunny:
✖️ :heavy_multiplication_x:
✔️ :heavy_check_mark:

Footnotes

Provided by markdown-it-footnote.

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

Footnote 1 link1.

Footnote 2 link2.

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference2.

Mark

Provided by markdown-it-mark.

A ==marked== text.

A ==marked== text.

Math with KaTeX

See KaTeX for supported functions

The Pythagorean Theorem, $a^2 + b^2 = c^2$, is useful for computing distances.

Formula is one that you learned in Calculus class.

$$\int_0^1 x^n dx = \frac{1}{n+1}$$

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

The Pythagorean Theorem, $a^2 + b^2 = c^2$, is useful for computing distances.

Formula is one that you learned in Calculus class.

$$\int_0^1 x^n dx = \frac{1}{n+1}$$

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

MultiMarkdown table syntax

Provided by markdown-it-multimd-table.

Grouping

|             |          Grouping           ||
First Header  | Second Header | Third Header |
 ------------ | :-----------: | -----------: |
Content       |          *Long Cell*        ||
Content       |   **Cell**    |         Cell |

New section   |     More      |         Data |
And more      | With an escaped '\\|'       ||
[Prototype table]

| | Grouping ||

First Header Second Header Third Header
Content Long Cell
Content Cell Cell

New section | More | Data | And more | With an escaped '\|' || [Prototype table]


Multiline

|   Markdown   | Rendered HTML |
|--------------|---------------|
|    *Italic*  | *Italic*      | \
|              |               |
|    - Item 1  | - Item 1      | \
|    - Item 2  | - Item 2      |
|    ```python | ```python       \
|    .1 + .2   | .1 + .2         \
|    ```       | ```           |
Markdown Rendered HTML
Italic Italic
- Item 1 - Item 1
- Item 2 - Item 2
```python ```python \
.1 + .2 .1 + .2 \
``` ```

Rowspan

Stage              | Direct Products | ATP Yields
-----------------: | --------------: | ---------:
Glycolysis         | 2 ATP           ||
^^                 | 2 NADH          | 3--5 ATP |
Pyruvaye oxidation | 2 NADH          | 5 ATP |
Citric acid cycle  | 2 ATP           ||
^^                 | 6 NADH          | 15 ATP |
^^                 | 2 FADH2         | 3 ATP |
**30--32** ATP     |||
[Net ATP yields per hexose]
Stage Direct Products ATP Yields
Glycolysis 2 ATP
^^ 2 NADH 3--5 ATP
Pyruvaye oxidation 2 NADH 5 ATP
Citric acid cycle 2 ATP
^^ 6 NADH 15 ATP
^^ 2 FADH2 3 ATP
30--32 ATP
[Net ATP yields per hexose]

Headerless

|--|--|--|--|--|--|--|--|
|♜ |  |♝ |♛ |♚ |♝ |♞ |♜ |
|  |♟ |♟ |♟ |  |♟ |♟ |♟ |
|♟ |  |♞ |  |  |  |  |  |
|  |♗ |  |  |♟ |  |  |  |
|  |  |  |  |♙ |  |  |  |
|  |  |  |  |  |♘ |  |  |
|♙ |♙ |♙ |♙ |  |♙ |♙ |♙ |
|♖ |♘ |♗ |♕ |♔ |  |  |♖ |

|--|--|--|--|--|--|--|--| |♜ | |♝ |♛ |♚ |♝ |♞ |♜ | | |♟ |♟ |♟ | |♟ |♟ |♟ | |♟ | |♞ | | | | | | | |♗ | | |♟ | | | | | | | | |♙ | | | | | | | | | |♘ | | | |♙ |♙ |♙ |♙ | |♙ |♙ |♙ | |♖ |♘ |♗ |♕ |♔ | | |♖ |

Subscript

Provided by markdown-it-sub.

H~2~0

H20

Superscript

Provided by markdown-it-sup.

29^th^

29^th^

Tasklists

Provided by markdown-it-task-lists.

- [ ] Open
- [x] Done
  • Open
  • Done

Preprocessor

Check markedpp for further options.

Include other files

See https://github.com/commenthol/markedpp#include

Syntax:

!include(path_to/include.md)

This is an included file.

!include (path_to/include.md)


Table of Contents

See https://github.com/commenthol/markedpp#toc for more options

Syntax:

!toc

!toc(minlevel=3 maxlevel=4 omit="h3;Unordered")

Reference list

See https://github.com/commenthol/markedpp#ref

Syntax:

!ref

Footnotes

  1. Footnote can have markup

    and multiple paragraphs.

  2. Footnote text. 2