> For the complete documentation index, see [llms.txt](https://irosyadi.gitbook.io/irosyadi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irosyadi.gitbook.io/irosyadi/markdown/complete-markdown-cheatsheet.md).
# complete-markdown-cheatsheet
## Complete Markdown Cheatsheet
Common Mark Implementation
### 1. Basic Markdown
### 1.1. Heading
*Support: all markdown flavour* ***Syntaxes***
```
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
```
***Showcases***
### h2 Heading
#### h3 Heading
**h4 Heading**
**h5 Heading**
**h6 Heading**
***Syntaxes***
```
h1 Heading
===================
h2 Heading
-------------------
```
***Showcases***
## h1 Heading
### h2 Heading
*Notes:*
* Always put a space between `#` and the heading name
* Heading with `===` or `---` are not recommended
### 1.2. Paragraphs
*Notes:*
* To create paragraphs, use a blank line to separate one or more lines of text.
* Don't ident paragraphs with spaces or tabs
***Syntaxes***
```
This is the first paragraph.
This is the second paragraph
```
***Showcases***
This is the first paragraph.
This is the second paragraph
### 1.3 Line Break
*Notes:*
* To create a line break, end a line with two or more spaces, and then type return
* *Or* use the `
` HTML tag
***Syntaxes***
```
This is the first line.
And this is the second line.
```
***Showcases***
This is the first line.\
And this is the second line.
***Alternative Syntaxes***
```
First line with the HTML tag after.
And the next line.
```
***Showcases***
First line with the HTML tag after.\
And the next line.
### 1.4. Emphasis
***Syntaxes***
```
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
We have **bold***italic*
This text is ***really important***
This text is ___really important___
This text is __*really important*__
This text is **_really important_**
```
***Showcases***
**This is bold text** **This is bold text** *This is italic text* *This is italic text* We have **bold\***italic *This text is \*\**really important ***This text is really important This text is \_\_*****really important\*\_\_ This text is** *really important*\*\*
### 1.5. Blockquotes
*Notes:*
* Space is needed after the marker `>`;
* You could just add only one `>` at the first line;
* Blockquotes can be nested
* Blockquotes can contain multiple paragraphs. Add a > between the paragraphs.
* Blockquotes can contain other Markdown formatted elements. But not all elements can be used.
***Syntaxes***
```
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
```
***Showcases***
> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.
***Syntaxes***
```
> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
```
***Showcases***
> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
***Syntaxes***
```
> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
> *Everything* is going according to **plan**.
```
***Showcases***
> **The quarterly results look great!**
>
> * Revenue was off the chart.
> * Profits were higher than ever.
>
> *Everything* is going according to **plan**.
### 1.6. Lists
#### 1.6.1. Unordered
***Syntaxes***
```
+ To start a list, there should be an empty line above
+ Create a list by starting a line with `+`, `-`, or `*`
- Changing the sign will add a linespace
+ Add text under an item
This is a text under an item. Notice that there are two spaces at the end above.
- Sub-lists are made by indenting 2 spaces:
* Item 2a
* Item 2b
* Item 3
To end a list, there should be one empty line above.
```
***Showcases***
* To start a list, there should be an empty line above
* Create a list by starting a line with `+`, `-`, or `*`
* Changing the sign will add a linespace
* Add text under an item
This is a text under an item. Notice that there are two spaces at the end above.
* Sub-lists are made by indenting 2 spaces:
* Item 2a
* Item 2b
* Item 3
To end a list, there should be one empty line above.
#### 1.6.2. Ordered
***Syntaxes***
```
1. Item 1
1. Item 2
Notice that the sequence number is irrelevant.
Markdown will change the sequence automatically when renderring.
Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
1. Item 3a
2. Item 3b
8. Any number for item 4
```
***Showcases***
1. Item 1
2. Item 2
Notice that the sequence number is irrelevant.
Markdown will change the sequence automatically when renderring.
Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
1. Item 3a
2. Item 3b
4. Any number for item 4
***Syntaxes***
```
57. will started with offset 57
1. so it will be 58
```
***Showcases***
1. will started with offset 57
2. so it will be 58
### 1.7. Elements in Lists
*Notes:*
* To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab
***Syntaxes***
```
* This is the first list item.
* Here's the second list item.
I need to add another paragraph below the second list item.
* And here's the third list item.
```
***Showcases***
* This is the first list item.
* Here's the second list item.
I need to add another paragraph below the second list item.
* And here's the third list item.
***Showcases***
* This is the first list item.
* Here's the second list item.
I need to add another paragraph below the second list item.
* And here's the third list item.
***Showcases***
* This is the first list item.
* Here's the second list item.
> A blockquote would look great below the second list item.
* And here's the third list item.
***Syntaxes***
```
1. Open the file containing the Linux mascot.
2. Linux mascot called Tux.
3. Tux is cool.
```
***Showcases***
1. Open the file containing the Linux mascot.
2. Linux mascot called Tux.
3. Tux is cool.
*But, for text element in ordered list, add five spaces*
1. This is the first list item.
2. Here's the second list item.
I need to add another paragraph below the second list item.
3. And here's the third list item.
*But, for quote in ordered list, add five spaces*
1. This is the first list item.
2. Here's the second list item.
> A blockquote would look great below the second list item.
3. And here's the third list item.
*But, for code blocks in the lists, add eight spaces or two tabs.*
1. Open the file.
2. Find the following code block on line 21:
```
Test
```
3. Update the title to match the name of your website.
### 1.8. Code
*Notes:*
* Inline codes is written inside \` \`
* or idented by add four spaces or one tab before
***Syntaxes***
```
This is inline `code`.
```
***Showcases***
This is inline `code`.
***Syntaxes***
```
// Some comments
line 1 of code
line 2 of code
line 3 of code
```
***Showcases***
```
// Some comments
line 1 of code
line 2 of code
line 3 of code
```
***Syntaxes***
```
Test
```
***Showcases***
```
Test
```
### 1.9. Links
**Example**
This is [link](https://example.com/) This is [link with title](https://example.com/)
*Or, directly put the link*
*Or with `<>`*
*But, to prevent automated linking*
`https://www.example.com`
*Or add emphasize*
I love supporting the [**EFF**](https://eff.org). This is the [*Markdown Guide*](https://www.markdownguide.org). See the section on [`code`](/irosyadi/markdown/complete-markdown-cheatsheet.md#code).
### 1.11. Reference-style Links
I know [Indonesia](https://en.wikipedia.org/wiki/Indonesia) I also know [etymology of Indonesia](https://en.wikipedia.org/wiki/Indonesia#Etymology) I knew [History of Indonesia](https://en.wikipedia.org/wiki/Indonesia#History)
*Or, put reference in text*
It was a [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle), and that means comfort.
*But, be careful with spaces in the links, put `%20` as space*
[example %20 link](https://www.example.com/my%20great%20page) [example without %20](https://www.example.com/my%20great%20page)
### 1.10. Images
*Notes:*
* It is not recommended to use image links in reference format. Some apps will not preview those images.
* Specifying size of image is supported only in some extended markdown (such as *markdown-it*).
***Syntaxes***
```
![Image Alt Text](/url/to/image.png "Image specified with width and height" =800x600)
![Image Alt Text](/url/to/image.png "Image specified with width" =800x)
![Image Alt Text](/url/to/image.png "Image specified with height" =x600)
```
***Showcases***
 !\[Wikipedia]\( "Wikipedia logo with specific size" =60x60)
***Syntaxes***
```
![Image Alt Text][id1]
![Image Alt Text][id2]
```
***Showcases***
 
### 1.11. Escaping Characters
*Note:*
* add a backslash `\` in front of the character.
**Example**
\* star \ backslash itself \` backtick { } curly braces ! exclamation mark
### 1.12. HTML Code
**Example**
This **word** is bold. This *word* is italic.
### 1.13. Horizontal Rules
**Example**
### 2. Extended Markdown
### 2.1. Heading ID
Support: Markdown Extra , Maruku, kramdown
Markdown:
```
### My Great Heading {#heading-ids}
```
Markdown
#### My Great Heading
In HTML:
#### My Great Heading
Link to [Heading IDs](/irosyadi/markdown/complete-markdown-cheatsheet.md#heading-ids)
### 2.2. Code Fencing and Highlighting
*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.
```
````
```
***Syntaxes***
```
```
This is another fenced code block.
```
```
***Showcases***
```
This is a fenced code block.
````
~~~
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a tag.
~~~
***Showcases*** (`javascript`)
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
````
***Showcases*** (`python`)
```python
def function():
#indenting works just fine in the fenced code block
s = "Python syntax highlighting"
print s
```
***Showcases*** (`ruby`)
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
### 2.3. Tables
*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***
```
| 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. |
```
***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***
```
| Syntax | Description | Test Text is long |
| :--- | :----: | ---: |
| Header from | Title | Here's this is |
| Paragraph | Text | And more |
```
***Showcases***
| Syntax | Description | Test Text is long |
| ----------- | :---------: | ----------------: |
| Header from | Title | Here's this is |
| Paragraph | Text | And more |
***Syntaxes***
```
| Syntax | Description | Test Text is long |
| :--- | :----: | ---: |
| [Example](https://www.example.com/) | **Title** | `Here's this is` |
| Paragraph | Text | And more |
```
***Showcases***
| Syntax | Description | Test Text is long |
| ----------------------------------- | :---------: | ----------------: |
| [Example](https://www.example.com/) | **Title** | `Here's this is` |
| Paragraph | Text | And more |
### 2.4. Footnote
**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.
### 2.4. Strikethrough, Highlighting, Underline
**Example of strikethrough** ~~strikethrough~~ In HTML: strikethrough
**Example of mark/highlighting** ==marked text== in HTML: marked text
**Example of underline** *underline* in HTML: underline
### 2.5. Task Lists
**Example**
* [x] Write the press release
* [ ] Update the website
* [ ] Contact the media
### 2.6. Definition Lists
**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 }
```
Third paragraph of definition 2.
```
*Or in compact style:*
Term 1 \~ Definition 1
Term 2 \~ Definition 2a \~ Definition 2b
### 2.7. Emojies
**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-) ;)
### 2.9. Typographic replacements
**Example**
(c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes'
### 2.10. Superscript and Subscript
**Example Superscript** x^2^ In HTML: x2
**Example Subscript** H\~2\~O In HTML: H2O
### 2.11. Inserted Text
**Example** ++Inserted text++ In HTML: This text has been inserted
### 2.12. Abbreviations
**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.
### 2.13. HTML Entities and Character Codes
**Example**
© & ¨ ™ ¡ £ & < > ¥ € ® ± ¶ § ¦ ¯ « · |
*Or*
X² Y³ ¾ ¼ × ÷ »
*Or*
18ºC " '
### 2.14. Latex
*Note:*
* Sometimes with `\(` and `\)` brackets
**Example**
$E=mc^2$
$$(\sqrt{3x-1}+(1+x)^2)$$
$$\sin(\alpha)^{\theta}=\sum\_{i=0}^{n}(x^i + \cos(f))$$
*Or, inline*
The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral
### 2.15. Mentions, Tag, Font Awesome
*Note:*
* with `fa-something`:
**Example**
This is @mentions This is #tags This is ~~tags~~ This is font awesome :fa-star:
### 2.16. Diagram
*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.
#### 2.16.1 Mermaid
*Notes:*
* It's implemented in showdown-mermaid.js
* Rendering diagrams of Flowchart or Sequence or Gantt
* Using [mermaid](https://github.com/knsv/mermaid)
* Check [mermaid doc](https://mermaidjs.github.io) for more information.
* Code inside `{ }` is optional
***Syntaxes***
* Flowchart syntax:
````
```mermaid {"align": "left | center | right", "codeblock": true | false}
graph TD;
```
````
* Sequence diagram syntax:
````
```mermaid {"align": "left | center | right", "codeblock": true | false}
sequenceDiagram
```
````
* Gantt diagram syntax:
````
```mermaid {"align": "left | center | right", "codeblock": true | false}
gantt
```
````
***Showcases***
* Flowchart
\`\`\`mermaid {"align":"center", "codeblock": true} graph TD; A-->B; A-->C; B-->D; C-->D;
````
```mermaid {"align":"center"}
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!
````
- Gantt diagram
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
````
#### 2.16.2 Plantuml
*Notes:*
* It's implemented in showdown-plantuml.js,
* Render diagrams of uml,
* Using [plantuml](https://plantuml.com),
* Check [plantuml website](https://plantuml.com/) fpr more information.
* Code inside `{ }` is optional
***Syntaxes***
````
```plantuml {"align": "left | center | right", "codeblock": true | false}
@startuml
@enduml
```
````
***Showcases***
\`\`\`plantuml {"align":"right"} @startuml participant User
```
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml
```
````
### 2.16.3 Flowchart
*Notes:*
- It's implemented in showdown-flowchart.js
- Render diagrams of flowchart
- Using [flowchart.js](https://github.com/adrai/flowchart.js)
- Check [flowchart website](https://flowchart.js.org/) for more information.
- Code inside `{ }` is optional
***Syntaxes***
```flow {"align": "left | center | right", "codeblock": true | false}
````
***Syntaxes***
````
```flowchart {"align": "left | center | right", "codeblock": true | false}
```
````
***Showcases***
\`\`\`flow {"align":"center"} st=>start: Start:>[https://www.google.com\[blank](https://www.google.com/\[blank)] e=>end:> op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:> io=>inputoutput: catch something... para=>parallel: parallel tasks
st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1
````
***Showcases***
```flowchart {"align":"right"}
st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
````
#### 2.16.4 Graphviz's dot
*Notes:*
* It's implemented in showdown-viz.js
* Render diagrams of graphviz's dot
* Using [viz.js](https://github.com/mdaines/viz.js).
* Code inside `{ }` is optional
***Syntaxes***
The \ of json's "engine" field value is 'circo', 'dot', 'neato', 'osage', 'twopi' in syntax language attribute.
````
```dot {"engine": "", "align": ""}
```
````
***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; }
````
- Dot example with circo engine:
```dot {"engine":"circo", "align":"right"}
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
````
#### 2.16.5 Railroad diagrams
*Notes:*
* It's implemented in showdown-viz.js,
* Render diagrams of railroad
* Using [railroad-diagrams](https://github.com/tabatkins/railroad-diagrams).
* Code inside `{ }` is optional
***Syntaxes***
````
```railroad {"align": "left | center | right", "codeblock": true | false}
```
````
***Showcases***
\`\`\`railroad {"align":"center"} Diagram( Optional('+', 'skip'), Choice(0, NonTerminal('name-start char'), NonTerminal('escape')), ZeroOrMore( Choice(0, NonTerminal('name char'), NonTerminal('escape'))))
````
### 2.16.6 WaveDrom
*Notes:*
- It's implemented in showdown-viz.js,
- Render diagrams of wavedrom
- Using [wavedrom](https://github.com/wavedrom/wavedrom)
- Check [wavedrom website](https://wavedrom.com) for more information.
- Code inside `{ }` is optional
***Syntaxes***
```wavedrom {"align": "left | center | right", "codeblock": true | false}
````
***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.'} ]}
````
***Showcases***
```wavedrom {"align":"right"}
{ signal: [
{ name: "pclk", wave: 'p.......' },
{ name: "Pclk", wave: 'P.......' },
{ name: "nclk", wave: 'n.......' },
{ name: "Nclk", wave: 'N.......' },
{},
{ name: 'clk0', wave: 'phnlPHNL' },
{ name: 'clk1', wave: 'xhlhLHl.' },
{ name: 'clk2', wave: 'hpHplnLn' },
{ name: 'clk3', wave: 'nhNhplPl' },
{ name: 'clk4', wave: 'xlh.L.Hx' },
]}
````
#### 2.16.7 Vega and Vega-Lite
*Notes:*
* It's implemented in showdown-vega.js,
* Render diagrams of [Vega](https://github.com/vega/vega) and [Vega-Lite](https://github.com/vega/vega-lite)
* Using [vega-embed](https://github.com/vega/vega-embed),
* Check [vega website](https://vega.github.io/vega/) and [vega-lite website](https://vega.github.io/vega-lite) for more information.
* Code inside `{ }` is optional
***Syntaxes***
````
```vega {"align": "left | center | right", "codeblock": true | false}
```
````
***Syntaxes***
````
```vega-lite {"align": "left | center | right", "codeblock": true | false}
```
````
***Showcases***
* Vega example:
\`\`\`vega {"align":"center"} { "$schema": "", "width": 200, "height": 200, "autosize": "none",
"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"} } } } ] }
````
- Vega-Lite example:
```vega-lite {"align":"right"}
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"fold": ["sin(x)", "cos(x)"]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
````
#### 2.16.8 Network Sequence
*Notes:*
* It's implemented in showdown-sequence.js,
* Render diagrams of sequence
* Using [js-sequence-diagrams](https://github.com/bramp/js-sequence-diagrams).
* Code inside `{ }` is optional
***Syntaxes***
The \ of json's "theme" field value is "hand" or "simple" in syntax language attribute;
````
```sequence {"theme": "", "align": ""}
```
````
***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!
````
- Sequence example with simple theme:
```sequence {"theme":"simple", "align":"right"}
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
````
### 2.17. Table of Content Generation
**Example**
\[TOC]
*Or*
\[\[TOC]]
*Or*
\[\[*TOC*]]
### 2.18. Admonition
**Example**
!!! note
```
This is the **note** admonition body
!!! danger Danger Title
This is the **danger** admonition body
```
### 2.19. Attributes
**Example**
item **bold red**{style="color:red"} in HTML: item **bold red**
### 2.13. Custom Containers or Alerts
*Notes:*
* Some engine such as `Markdown-it`, you can add some alert text.
* Available variants:
```
alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark
```
***Syntaxes***
```
::: alert-info
This is an info text.
:::
::: alert-danger
This is a danger text.
:::
```
***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**
### 2.14. Comments
\[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job.