Title 1

Title 2

Title 3

Title 4

HTML Tests

Common Tags

Title with HTML

tag p

content in a simple div
content in a div with align center

Iframe

Video

Image

Width 100px

Width 300px

Width 560px

Width 1000px

Width 2000px

Formating

normal
negrito
itálico
riscado

Image

Alt text

alt image text

Code

Inline

Withouy hightlight: inline code

Inline Rust: fn factorial(i: u64) -> u64

 

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

js with Highlighted Chars By Id (/age/#r /name/#r /setAge/#g /setName/#g /50/#b /"Taylor"/#b)

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

sql

SELECT * FROM my_table;

bash

#!/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)

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)

Javascript

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)

Portugol VisualG (show line numbers)

algoritimo "Idade"
// Disciplina : Programação Estruturada
// Professor  : Adjenor Cristiano
// Descrição  : Determina se o usuário é maior de idade ou não
// Autor(a)   : Mateus Felipe Gonçalves <[email protected]>
// Data atual : 23/02/2024
var
   idade: inteiro
 
inicio
   escreval("Sua idade")
   escreva("-> ")
   leia(idade)
 
   escreval("")
 
   se (idade >= 18) entao
      escreva("Maior de idade")
   senao
      escreva("Menor de idade")
   fimse
 
   escreval("")
 
fimalgoritimo

Birl

HORA DO SHOW
    FRANGO FR = 'a';
    CE QUER VER ESSA PORRA? ("Hello, World! Porra!\n");
    BORA CUMPADE 0;
BIRL

Rust

Simple Rust code with title
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");
}
This is a caption with some note about the code

Go Lang

// ZeroBroadcast reports whether addr is 255.255.255.255.
func (addr ipv4addr) ZeroBroadcast() bool {
  return addr == 0xFFFFFFFF
}

Rust complete code features

src/main.rs
fn factorial(i: u64) -> u64 {
  match i {
    0 => 1,
    n => n * factorial(n-1)
  }
}
 
fn main() {
  println!("Hello World");
}
the code above return the factorial of an given number

Long Block Quote

sdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgf
sdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgfsdasdaskjdfhsdakjasjkfdfkjghsdfkjhdsgfdshgdshgfhjdsfghdsfgkhsdghjghsdgfhsadgfkhgsfkhgsfhgsajhfgajsfghasdgf

Mermaid charts

Flowchart

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!

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

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

Git graph

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

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

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]

Timeline

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

Tables

Md

Tipo 1

| A   | B   | C   |
| --- | --- | --- |
| a1  | b1  | c1  |
| a2  | b1  | c2  |
ABC
a1b1c1
a2b1c2

Tipo 2

| A | B | C |
|---|---|---|
| a1 | b1 | c1 |
|---|---|---|
| a2 | b1 | c2 |
|---|---|---|
ABC
a1b1c1
---------
a2b1c2
---------

Tipo 3

| A   | B   | C   |
| --- | --- | --- |
| a1  | b1  | c1  |
| a2  | b1  | c2  |
ABC
a1b1c1
a2b1c2

Tipo 4

| foo | bar |
| :-- | :-: |
| baz | qux |
foobar
bazqux

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>
Test 1Test 2
Test 3Test 4
Test 5Test 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

  1. Mateus
  2. Felipe
  3. Gonçalves
  4. 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.
  5. 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.
  6. 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 your life

Just a link

This is a warning...
Be careful.

Just a link

This is a error!!
Pay attention!

Just a link

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.

LONG WARNING 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.

LONG ERROR 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.

One line small Tip

One line small Warn

One line small Error

Math

block

f(x)=fξ^e2πiξxdξf(x) = \int_{-\infty}^\infty f\hat\xi\,e^{2 \pi i \xi x} \,d\xi

inline math: x+1=2x+1 = 2

Blockquot

This is a blockquote

LONG BLOCKQUOTE 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.

Separation


foo

Footnote

Sample footnote 1, sample another footnote 2

Variables

Text

[var]: This text was inside a variable

Text: [var]

Image

image with sample image

Referencies

Google: google.com

Footnotes

  1. Just a footnote

  2. Just one more footnote