md-fileserver

# Cheatsheet - Markdown Syntax with GFM This cheatsheet uses markdown syntax based on: * [Markdown Specification][] * [Github Flavored Markdown][] * [Markdown-it Parser Extensions](#extensions) ## Table of Contents * Markdown * [Headers](#headers) * [Paragraphs and Line Breaks](#paragraphs-and-line-breaks) * [Styling Text](#styling-text) * [Escaping](#escaping) * [Lists](#lists) * [Unordered](#unordered) * [Ordered, Mixed](#ordered-mixed) * [Tables](#tables) * [Column Alignment](#column-alignment) * [Links](#links) * [Link within document](#link-within-document) * [Block Quotes](#block-quotes) * [Horizontal Ruler](#horizontal-ruler) * [Images](#images) * [Code](#code) * [Indented Block](#indented-block) * [Highlighting](#highlighting) * [Inline HTML](#inline-html) * [Inline Comments](#inline-comments) * [Extensions](#extensions) * [Styles](#styles) * [Abbreviation](#abbreviation) * [Admonitions](#admonitions) * [Attributes](#attributes) * [Definition Lists](#definition-lists) * [Emoji](#emoji) * [Footnotes](#footnotes) * [Math with KaTeX](#math-with-katex) * [Mark](#mark) * [MultiMarkdown table syntax](#multimarkdown-table-syntax) * [Subscript](#subscript) * [Superscript](#superscript) * [Tasklists](#tasklists) * [Preprocessor](#preprocessor) * [Include other files](#include-other-files) * [Table of Contents](#table-of-contents-1) * [Reference list](#reference-list)  ## 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>` <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 Wi*thin*Words - 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<br> \` backtick<br> \* asterisk<br> \_ underscore<br> \{\} curly braces<br> \[\] square brackets<br>  parentheses<br> \# hash mark<br> \+ plus sign<br> \- minus sign (hyphen)<br> \. dot<br> \! 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 ``` <span style="color: #f55;">**Note**: Wrong numbers get corrected into right order!</span> 1. Red 2. Green 3. Blue <span style="color: #f55;">**Note:** Counting continues with line-breaks</span> 2. Black 3. Grey 1. White  40. Cyan <span style="color: #f55;">**Note:** Counting is restarted with 40 after </span> 1. RGB (0, 255, 255) 1. A color between green and blue * Green * Blue 2. Magenta 10. 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](http://example.com) [Reference][Referenced Link] [Referenced Link][] [Referenced Link]: http://example.com ### Link within document ``` <a name="cross-reference"> [Cross-Reference](#cross-reference) ``` <a name="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](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: ```html <img src="path_to/img.png" title="Optional Title" alt="Alt Text" style="width: 50px;"> ``` <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. ```html <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](path_to/img.png) ## 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: ```javascript (function(){ "use strict"; var t = "a string"; console.log(t); }()) ``` ## Inline HTML ```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> ``` <dl> <dt>A Definition List</dt> <dd>Mixing Markdown might **not** work *everywhere*. <br> Use HTML <em>tags</em> <strong>instead</strong>.</dd> </dl> ## Inline Comments   # Extensions ## Styles ### <kbd> ``` Press <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>F5</kbd> ``` Press <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>F5</kbd> ## Abbreviation Provided by [markdown-it-abbr](https://www.npmjs.com/package/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](https://npmjs.org/package/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](https://npmjs.org/package/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 ```python {.border} nums = [x for x in range(10)] ``` ## Definition Lists Provided by [markdown-it-deflist](https://npmjs.org/package/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](https://npmjs.org/package/markdown-it-emoji). See http://www.webpagefx.com/tools/emoji-cheat-sheet/ for supported emojis. :smile: `:smile:` :blush: `:blush:` :sunny: `:sunny:` :heavy_multiplication_x: `:heavy_multiplication_x:` :heavy_check_mark: `:heavy_check_mark:` ## Footnotes Provided by [markdown-it-footnote](https://npmjs.org/package/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 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. ## Mark Provided by [markdown-it-mark](https://npmjs.org/package/markdown-it-mark). ``` A ==marked== text. ``` A ==marked== text. ## Math with KaTeX See [KaTeX](https://katex.org/docs/supported.html) 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](https://github.com/RedBug312/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](https://npmjs.org/package/markdown-it-sub). H~2~0 H~2~0 ## Superscript Provided by [markdown-it-sup](https://npmjs.org/package/markdown-it-sup). 29^th^ 29^th^ ## Tasklists Provided by [markdown-it-task-lists](https://npmjs.org/package/markdown-it-task-lists). ``` - [ ] Open - [x] Done ``` - [ ] Open - [x] 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) ---  <a name="table-of-contents-1"></a> ## Table of Contents See <https://github.com/commenthol/markedpp#toc> for more options __Syntax:__ ``` !toc !toc(minlevel=3 maxlevel=4 omit="h3;Unordered") ```  * [Escaping](#escaping) * [Ordered, Mixed](#ordered-mixed) * [Column Alignment](#column-alignment) * [Link within document](#link-within-document) * [Indented Block](#indented-block) * [Highlighting](#highlighting)  ## Reference list See <https://github.com/commenthol/markedpp#ref> __Syntax:__ ``` !ref ```  * [Github Flavored Markdown][Github Flavored Markdown] * [Markdown Specification][Markdown Specification] * [markedpp][markedpp] * [Referenced Link][Referenced Link]  [Markdown Specification]: http://daringfireball.net/projects/markdown/syntax [Github Flavored Markdown]: https://help.github.com/articles/github-flavored-markdown [markedpp]: https://github.com/commenthol/markedpp