This cheatsheet uses markdown syntax based on:
- Markdown
- Extensions
- Preprocessor
# h1
## h2
### h3
#### h4
##### h5
###### h6
h1 Alternate
============
h2 Alternate
------------
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
**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
\\ 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
* 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
- Is a color
- Blue
- Another color
- like the sky
- Magenta
- Yellow
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!
-
Red
-
Green
-
Blue Note: Counting continues with line-breaks
-
Black
-
Grey
-
White
- Cyan Note: Counting is restarted with 40 after <!--- -->
- RGB (0, 255, 255)
- A color between green and blue
- Green
- Blue
- Magenta
- Yellow
| 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 |
| 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 |
http://example.com
<http://example.com>
[Linktext](http://example.com)
[Reference][Referenced Link]
[Referenced Link][]
[Referenced Link]: http://example.com
<a name="cross-reference">
[Cross-Reference](#cross-reference)
> 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
Three or more Hyphens, Asterisks, Underscores
---
***
___
<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)
Using plain html can be used to size images:
<img src="path_to/img.png" title="Optional Title" alt="Alt Text" style="width: 50px;">
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)
`a line of code`
``literal backtick (`)``
a line of code
literal backtick (`)
a line of code
literal backtick (`)
outputs:
a line of code
literal backtick (`)
```javascript
(function(){
"use strict";
var t = "a string";
console.log(t);
}())
```
outputs:
(function(){
"use strict";
var t = "a string";
console.log(t);
}())
<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.
<!---
This is a comment (!NOTE the 3 <!--- dashes)
-->
Press <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>F5</kbd>
Press Ctrl + R or F5
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.
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
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)]
```
paragraph {data-toggle=modal .style-me}
paragraph style me{.red} more text
nums = [x for x in range(10)]
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
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:
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.
Provided by markdown-it-mark.
A ==marked== text.
A ==marked== text.
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,
Formula is one that you learned in Calculus class.
When
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
|--|--|--|--|--|--|--|--|
|♜ | |♝ |♛ |♚ |♝ |♞ |♜ |
| |♟ |♟ |♟ | |♟ |♟ |♟ |
|♟ | |♞ | | | | | |
| |♗ | | |♟ | | | |
| | | | |♙ | | | |
| | | | | |♘ | | |
|♙ |♙ |♙ |♙ | |♙ |♙ |♙ |
|♖ |♘ |♗ |♕ |♔ | | |♖ |
|--|--|--|--|--|--|--|--| |♜ | |♝ |♛ |♚ |♝ |♞ |♜ | | |♟ |♟ |♟ | |♟ |♟ |♟ | |♟ | |♞ | | | | | | | |♗ | | |♟ | | | | | | | | |♙ | | | | | | | | | |♘ | | | |♙ |♙ |♙ |♙ | |♙ |♙ |♙ | |♖ |♘ |♗ |♕ |♔ | | |♖ |
Provided by markdown-it-sub.
H~2~0
H20
Provided by markdown-it-sup.
29^th^
29^th^
Provided by markdown-it-task-lists.
- [ ] Open
- [x] Done
- Open
- Done
Check markedpp for further options.
See https://github.com/commenthol/markedpp#include
Syntax:
!include(path_to/include.md)
This is an included file.
!include (path_to/include.md)
See https://github.com/commenthol/markedpp#toc for more options
Syntax:
!toc
!toc(minlevel=3 maxlevel=4 omit="h3;Unordered")
See https://github.com/commenthol/markedpp#ref
Syntax:
!ref