Title 1
Title 2
Title 3
Title 4
HTML Tests
Common Tags
Title with HTML
tag p
Iframe
Image
Width 100px
Width 300px
Width 560px
Width 1000px
Width 2000px
Formating
normal
negrito
itálico
riscado
Image
Alt text
Code
Inline
inline code
Block
elixir (hightlight /x = Foo.bar 0/)
defmodule Foo do
def bar(x), when x == 0, do: x+1 end
def bar(x) do
x + 2
end
end
x = Foo.bar 0
y = Foo.bar 1
^y = x + 1
defmodule Foo do
def bar(x), when x == 0, do: x+1 end
def bar(x) do
x + 2
end
end
x = Foo.bar 0
y = Foo.bar 1
^y = x + 1
sql
SELECT * FROM my_table;
SELECT * FROM my_table;
bash
#!/bin/bash
var1=$1
if [ $var1 -gt 5 ]; do
echo "Is greather than 5"
fi
#!/bin/bash
var1=$1
if [ $var1 -gt 5 ]; do
echo "Is greather than 5"
fi
python (hightlight {1-3,5})
def foo(x):
return x + 1
def bar(y):
return y + 1
x = foo(1)
y = bar(1)
def foo(x):
return x + 1
def bar(y):
return y + 1
x = foo(1)
y = bar(1)
python (hightlight {1-3,5} and line-numbers)
def foo(x):
return x + 1
def bar(y):
return y + 1
x = foo(1)
y = bar(1)
def foo(x):
return x + 1
def bar(y):
return y + 1
x = foo(1)
y = bar(1)
Javascript
function foo(x) {
return x + 1
}
function bar(y) {
return y + 1
}
const x = foo(1)
const y = bar(1)
function foo(x) {
return x + 1
}
function bar(y) {
return y + 1
}
const x = foo(1)
const y = bar(1)
Typescript (show line numbers)
function foo(x: number): number {
return x + 1
}
const sum: (x: number) => number = foo
const y: number = sum(1)
function foo(x: number): number {
return x + 1
}
const sum: (x: number) => number = foo
const y: number = sum(1)
Rust
fn factorial(i: u64) -> u64 {
match i {
0 => 1,
n => n * factorial(n-1)
}
}
fn main() {
println!("Hello World");
}
fn factorial(i: u64) -> u64 {
match i {
0 => 1,
n => n * factorial(n-1)
}
}
fn main() {
println!("Hello World");
}
another Rust,but with caption
fn factorial(i: u64) -> u64 {
match i {
0 => 1,
n => n * factorial(n-1)
}
}
fn main() {
println!("Hello World");
}
fn factorial(i: u64) -> u64 {
match i {
0 => 1,
n => n * factorial(n-1)
}
}
fn main() {
println!("Hello World");
}
Go Lang
// ZeroBroadcast reports whether addr is 255.255.255.255.
func (addr ipv4addr) ZeroBroadcast() bool {
return addr == 0xFFFFFFFF
}
// ZeroBroadcast reports whether addr is 255.255.255.255.
func (addr ipv4addr) ZeroBroadcast() bool {
return addr == 0xFFFFFFFF
}
Rust complete code features
fn factorial(i: u64) -> u64 {
match i {
0 => 1,
n => n * factorial(n-1)
}
}
fn main() {
println!("Hello World");
}
fn factorial(i: u64) -> u64 {
match i {
0 => 1,
n => n * factorial(n-1)
}
}
fn main() {
println!("Hello World");
}
Long Block Quote
sdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgf
sdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgf
sdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgf
sdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgf
Mermaid charts
Flowchart
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Sequence diagram
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 <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
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 <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Gantt diagram
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
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
Class diagram
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Git graph
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Entity Relationship Diagram - ❗ experimental
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
User Journey Diagram
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Quadrant Chart
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Timeline
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
Mindmap
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
Tables
Md
Tipo 1
| A | B | C |
| --- | --- | --- |
| a1 | b1 | c1 |
| a2 | b1 | c2 |
| A | B | C |
| --- | --- | --- |
| a1 | b1 | c1 |
| a2 | b1 | c2 |
A | B | C |
---|---|---|
a1 | b1 | c1 |
a2 | b1 | c2 |
Tipo 2
| A | B | C |
|---|---|---|
| a1 | b1 | c1 |
|---|---|---|
| a2 | b1 | c2 |
|---|---|---|
| A | B | C |
|---|---|---|
| a1 | b1 | c1 |
|---|---|---|
| a2 | b1 | c2 |
|---|---|---|
A | B | C |
---|---|---|
a1 | b1 | c1 |
--- | --- | --- |
a2 | b1 | c2 |
--- | --- | --- |
Tipo 3
| A | B | C |
| --- | --- | --- |
| a1 | b1 | c1 |
| a2 | b1 | c2 |
| A | B | C |
| --- | --- | --- |
| a1 | b1 | c1 |
| a2 | b1 | c2 |
A | B | C |
---|---|---|
a1 | b1 | c1 |
a2 | b1 | c2 |
Tipo 4
| foo | bar |
| :-- | :-: |
| baz | qux |
| foo | bar |
| :-- | :-: |
| baz | qux |
foo | bar |
---|---|
baz | qux |
Html
<table>
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
</tr>
<tr>
<td>Test 5</td>
<td>Test 6</td>
</tr>
</table>
<table>
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
</tr>
<tr>
<td>Test 5</td>
<td>Test 6</td>
</tr>
</table>
Test 1 | Test 2 |
---|---|
Test 3 | Test 4 |
Test 5 | Test 6 |
Tasks
- task 1
- task 2
- task 3
- task 4
Lists
Unordered
- item 1
- item 2
- item 3
item 4
item 5
- item 6
- item 6.1
- item 6.2
- item 6.2.1
- item 6.3
- item 7
- Long item 8: Ex elit id do ea do voluptate incididunt. Excepteur sit sit veniam in nulla Lorem sunt elit non proident nostrud qui do consectetur. Officia deserunt labore sit amet ad culpa velit magna. Cupidatat culpa pariatur incididunt minim aliquip exercitation officia incididunt mollit nostrud ad. Ea officia nisi laboris Lorem. Lorem incididunt culpa occaecat sint Lorem aliquip nisi.
- Long item 9: Ex elit id do ea do voluptate incididunt. Excepteur sit sit veniam in nulla Lorem sunt elit non proident nostrud qui do consectetur. Officia deserunt labore sit amet ad culpa velit magna. Cupidatat culpa pariatur incididunt minim aliquip exercitation officia incididunt mollit nostrud ad. Ea officia nisi laboris Lorem. Lorem incididunt culpa occaecat sint Lorem aliquip nisi.
Ordered
- Mateus
- Felipe
- Gonçalves
- Laboris tempor magna nulla mollit esse mollit cillum commodo ad eu veniam ullamco irure. Nulla non ullamco minim minim eu ad et fugiat aliquip excepteur Lorem labore amet ex. Eu ea in ipsum ullamco dolor excepteur fugiat commodo esse. Ex ad velit do dolore excepteur officia irure. Nisi sunt consectetur minim occaecat culpa enim minim incididunt fugiat aliqua sint. Est ipsum ullamco veniam ut non cillum minim consequat aliquip mollit commodo mollit sunt. Ex velit laboris laboris excepteur irure culpa id Lorem sit occaecat laboris voluptate.
- Laboris tempor magna nulla mollit esse mollit cillum commodo ad eu veniam ullamco irure. Nulla non ullamco minim minim eu ad et fugiat aliquip excepteur Lorem labore amet ex. Eu ea in ipsum ullamco dolor excepteur fugiat commodo esse. Ex ad velit do dolore excepteur officia irure. Nisi sunt consectetur minim occaecat culpa enim minim incididunt fugiat aliqua sint. Est ipsum ullamco veniam ut non cillum minim consequat aliquip mollit commodo mollit sunt. Ex velit laboris laboris excepteur irure culpa id Lorem sit occaecat laboris voluptate.
- Laboris tempor magna nulla mollit esse mollit cillum commodo ad eu veniam ullamco irure. Nulla non ullamco minim minim eu ad et fugiat aliquip excepteur Lorem labore amet ex. Eu ea in ipsum ullamco dolor excepteur fugiat commodo esse. Ex ad velit do dolore excepteur officia irure. Nisi sunt consectetur minim occaecat culpa enim minim incididunt fugiat aliqua sint. Est ipsum ullamco veniam ut non cillum minim consequat aliquip mollit commodo mollit sunt. Ex velit laboris laboris excepteur irure culpa id Lorem sit occaecat laboris voluptate.
Hints
This is a tip.
A cheat for yout life
This is a warning...
Be careful.
This is a error!!
Pay attention!
LONG TIP Nisi est dolore magna laboris esse quis tempor laborum quis ipsum pariatur amet fugiat ipsum. Ad veniam qui enim nisi ut reprehenderit duis anim eu. Ex proident fugiat non duis consequat et officia et exercitation culpa reprehenderit eiusmod.
Math
block
inline math:
Blockquot
This is a blockquote
Separation
foo
Footnote
Sample footnote 1, sample another footnote 2
Variables
Text
[var]: This text was inside a variable
Text: [var]
Image
Referencies
Google: google.com