Extended Markdown Cheatsheet
Last updated
Was this helpful?
Last updated
Was this helpful?
Markdown:
Markdown
In HTML:
Link to
Notes:
We can make block code fences without need to be idented
lang
is optional to specify the language of the code; if not specified, the app won't highlight the code;
We need one empty line before
Syntaxes
This is a fenced code block.
Showcases (python
)
Showcases (ruby
)
Notes:
we can set alignment in table with a colon (:)
we can add formatting text, links, code and HTML character code, but not: heading, headings, blockquotes, lists, horizontal rules, images, HTML tags, or fenced code
Syntaxes
Showcases
Option
Description
data
path to data files to supply the data that will be passed into templates.
engine
engine to be used for processing templates. Handlebars is the default.
ext
extension to be used for dest files.
Syntaxes
Showcases
Syntax
Description
Test Text is long
Header from
Title
Here's this is
Paragraph
Text
And more
Syntaxes
Showcases
Syntax
Description
Test Text is long
Title
Here's this is
Paragraph
Text
And more
Example: The First Part Here's a simple footnote, and here's a longer one,, and
Example: The Second Part
: This is the first footnote.
: Here's one with multiple paragraphs.
For example like this
: code
or code in paragrahps
code and codes
Or add inline footnote Another example of footnote 1 link and footnote 2 link. Or to add inline footnote^[Text of inline footnote] definition.
Or duplictade reference This duplicated footnote reference.
and multiple paragraphs. : Another footnote text.
Example of strikethrough
strikethrough
In HTML: strikethrough
Example of mark/highlighting ==marked text== in HTML: marked text
Example of underline underline in HTML: underline
Example
Example
First Term : This is the definition of the first term.
Second Term : This is one definition of the second term. : This is another definition of the second term.
In HTML:
First TermThis is the definition of the first term.Second TermThis is one definition of the second term.This is another definition of the second term.
Or
Term 1 : Definition 1 with lazy continuation.
Term 2 with inline markup : Definition 2 { some code, part of Definition 2 }
Or in compact style:
Term 1 ~ Definition 1
Term 2 ~ Definition 2a ~ Definition 2b
Emoji can be copy pasted
Gone camping! ⛺ Be back soon. That is so funny! 😂
Or, use markdown
Gone camping! :tent: Be back soon. That is so funny! :joy:
Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
Shortcuts (emoticons): :-) :-( 8-) ;)
Example
(c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes'
Example Superscript x^2^ In HTML: x2
Example Subscript H~2~O In HTML: H2O
Example ++Inserted text++ In HTML: This text has been inserted
Example The "HTML" specification is maintained by the "W3C". [HTML]: Hyper Text Markup Language [W3C]: World Wide Web Consortium
In HTML: The HTML specification is maintained by the W3C.
Example
© & ¨ ™ ¡ £ & < > ¥ € ® ± ¶ § ¦ ¯ « · |
Or
X² Y³ ¾ ¼ × ÷ »
Or
18ºC " '
Note:
Sometimes with \(
and \)
brackets
Example
$E=mc^2$
Or, inline
The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral
Note:
with fa-something
:
Example
This is @mentions
This is #tags
This is tags
This is font awesome :fa-star:
Notes:
Your app should support the specific library or engine to draw the diagram
You should specify particular language of the fenced code block and write the definition of your diagram within it.
Notes:
It's implemented in showdown-mermaid.js
Rendering diagrams of Flowchart or Sequence or Gantt
Code inside { }
is optional
Syntaxes
Flowchart syntax:
Sequence diagram syntax:
Gantt diagram syntax:
Showcases
Flowchart
```mermaid {"align":"center", "codeblock": true} graph TD; A-->B; A-->C; B-->D; C-->D;
Sequence diagram
```mermaid {"align":"right"} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Notes:
It's implemented in showdown-plantuml.js,
Render diagrams of uml,
Code inside { }
is optional
Syntaxes
Showcases
```plantuml {"align":"right"} @startuml participant User
Syntaxes
Showcases
st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1
Notes:
It's implemented in showdown-viz.js
Render diagrams of graphviz's dot
Code inside { }
is optional
Syntaxes
The \ of json's "engine" field value is 'circo', 'dot', 'neato', 'osage', 'twopi' in syntax language attribute.
Showcases
Dot example with dot engine:
```dot {"engine":"dot", "align":"center"} digraph G { main -> parse -> execute; main -> init; main -> cleanup; execute -> make_string; execute -> printf init -> make_string; main -> printf; execute -> compare; }
Notes:
It's implemented in showdown-viz.js
Render diagrams of railroad
Code inside { }
is optional
Syntaxes
Showcases
```railroad {"align":"center"} Diagram( Optional('+', 'skip'), Choice(0, NonTerminal('name-start char'), NonTerminal('escape')), ZeroOrMore( Choice(0, NonTerminal('name char'), NonTerminal('escape'))))
Showcases
```wavedrom {"align":"center"} {signal: [ {name: 'clk', wave: 'p.....|...'}, {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']}, {name: 'req', wave: '0.1..0|1.0'}, {}, {name: 'ack', wave: '1.....|01.'} ]}
Notes:
It's implemented in showdown-vega.js
Code inside { }
is optional
Syntaxes
Syntaxes
Showcases
Vega example:
"signals": [ { "name": "startAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} }, { "name": "endAngle", "value": 6.29, "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} }, { "name": "padAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 0.1} }, { "name": "innerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 90, "step": 1} }, { "name": "cornerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5} }, { "name": "sort", "value": false, "bind": {"input": "checkbox"} } ],
"data": [ { "name": "table", "values": [ {"id": 1, "field": 4}, {"id": 2, "field": 6}, {"id": 3, "field": 10}, {"id": 4, "field": 3}, {"id": 5, "field": 7}, {"id": 6, "field": 8} ], "transform": [ { "type": "pie", "field": "field", "startAngle": {"signal": "startAngle"}, "endAngle": {"signal": "endAngle"}, "sort": {"signal": "sort"} } ] } ],
"scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "id"}, "range": {"scheme": "category20"} } ],
"marks": [ { "type": "arc", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "id"}, "x": {"signal": "width / 2"}, "y": {"signal": "height / 2"} }, "update": { "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "padAngle": {"signal": "padAngle"}, "innerRadius": {"signal": "innerRadius"}, "outerRadius": {"signal": "width / 2"}, "cornerRadius": {"signal": "cornerRadius"} } } } ] }
Notes:
It's implemented in showdown-sequence.js,
Render diagrams of sequence
Code inside { }
is optional
Syntaxes
The \ of json's "theme" field value is "hand" or "simple" in syntax language attribute;
Showcases
Sequence example with hand theme:
```sequence {"theme":"hand", "align":"center"} Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!
Example
[TOC]
Or
[[TOC]]
Or
[[TOC]]
Example
!!! note
Example
item bold red{style="color:red"}
in HTML: item bold red
Notes:
Some engine such as Markdown-it
, you can add some alert text.
Available variants:
Syntaxes
Showcases
::: alert-primary alert-primary :::
::: alert-secondary alert-secondary :::
::: alert-success alert-success :::
::: alert-info alert-info :::
::: alert-warning alert-warning :::
::: alert-danger alert-danger :::
::: alert-light alert-light :::
::: alert-dark alert-dark :::
in HTML
alert-warning
or
alert-info
or
alert-warning
[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job.
Using
Check for more information.
Using ,
Check fpr more information.
```flow {"align":"center"} st=>start: Start:>] e=>end:> op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:> io=>inputoutput: catch something... para=>parallel: parallel tasks
Using .
Using .
Render diagrams of and
Using
Check and for more information.
```vega {"align":"center"} { "$schema": "", "width": 200, "height": 200, "autosize": "none",
Using .