Markdown Cheat Sheet

https://facelessuser.github.io/pymdown-extensions/extensions/critic/

Résumé

Effet	Md	HTML
Titre	`#` (jusqu'a 6)	`<h1>` (jusqu'a `<h6>`)
Gras	`text`	`<b>text<b>`
Souligner	....	`<ins>text</ins>`
Italique	`text`	`<i>text</i>`
*Gras italique*	`*text*`	`<b><i>text</i></b>`
`code`	`text`	`<code>code</code>`
[Link]	`[Link]`	`<a href=www.truc.com>Link</a>`
Quote	`> text`	`<<blockquote>text</blockquote>`
~~Rayer~~	`~~text~~`	`<s>text</s>`
$Formule$	$text$	....

Titres

Markdown

# Grand titre
## Moyen Titre
### Petit Titre
#### Petit Sous Titre
##### Très Petit Titre
###### Très Petit Sous Titre

HTML

<h1>Grand titre</h1>
    <h2>Moyen Titre</h2>
        <h3>Petit Titre</h3>
            <h4>Petit Sous Titre</h4>
                <h5>Très Petit Titre</h3>
                    <h6>Très Petit Sous Titre</h4>

Rendu

Grand titre

Moyen Titre

Petit Titre

Petit Sous Titre

Très Petit Titre

Très Petit Sous Titre

Listes

Liste numérotée

Markdown

1. Premièrement
2. Puis le second
1. Ensuite (les nombres n'importent pas)
4. Enfin un dernier item
</a> #On arrête la liste

HTML

<ol>
  <li>Premièrement</li>
  <li>Puis le second</li>
  <li>Ensuite</li>
  <li>Enfin un dernier item</li>
</ol>

Rendu

Premièrement
Puis le second:
Ensuite (les nombres n'importent pas)
Enfin un dernier item

Liste à puces

Markdown

- Premier
- Second
    + Troisième

HTML

<ul>
    <li>Premier</li>
    <li>Second le second</li>
    <ul>
        <li>Troisième</li>
    </ul>
</ul>

Rendu

Premier
Second
- Troisième

Liens

Liens externes

Markdown

[Lien en ligne](https://www.pouet.com)
[Lien en référence][dU tExT eN liEn] #Non case-sensitive
[Référence grâce a un nombre][1]
On référence le lien direct [lien direct].
[du text en lien]: https://www.pouet.com
[1]: https://www.pouet.com
[lien direct]: https://www.pouet.com

HTML

<a href="https://www.pouet.com">Lien en ligne</a>
<a href="https://www.pushaune.com" target="_blank">Pour ouvrir dans un nouveau onglet</a>

Liens internes

Liens externes

Markdown

[Référence a un fichier](../blob/master/LICENSE)
[Réference a un paragraphe](#liens)

HTML

<a href="../blob/master/LICENSE">Référence a un fichier</a>
<a href="#liens">Réference a un paragraphe</a>

Images

Markdown

Image en ligne:
![alt text](https://www.pouet.com/images/image.png "Logo Title Text 1")

Image en référence:
Reference-style: 
![alt text][logo]

[logo]: https://www.pouet.com/images/image.png "Logo Title Text 2"

HTML

<center>
  <figure>
    <img src="https://www.pouet.com/images/image.png"
    alt="Image introuvable"
    width="600"
    height="600"
    >
    <figcaption><i>Figure x: Description de l'image</i></figcaption>
  </figure>
</center>

Code

Example

Markdown

```java hl_lines="1-2 5 7" linenums="1"
public class HelloWorld {
  // Définition de la fonction main
  public static void main(String[] arg){
    // Affichage du commentaire Hello world dans la fenêtre de commande
    System.out.println("Hello world");
  }
} 
```

HTML

<pre><code>
    public class HelloWorld {
              // Définition de la fonction main
              public static void main(String[] arg){
                // Affichage du commentaire Hello world dans la fenêtre de commande
                System.out.println("Hello world");
              }
            } 
</code></pre>

Rendu

public class HelloWorld {
  // Définition de la fonction main
  public static void main(String[] arg){
    // Affichage du commentaire Hello world dans la fenêtre de commande
    System.out.println("Hello world");
  }
}

Suligner du code

Il est possbile de surligner du code en ajoutant hl_lines="1-2 5 7" à côté du language choisi.

Ajouter les numeros de ligne

Il est possible d'ajouter les numéros de ligne en ajoutant linenums="1" à côté du language choisi.

Poupée russe

Il est possible d'emboiter des blocs de code en ajoutant un ` a chaque incrément.

LaTex

Pour utiliser le LaTex il suffit d'entourer la formule par le symbole '$'.

Opération	LaTex	Rendu
Signe $\times$	\times	$\times$
Puissance	a^{b}	$a^{b}$
Indice	a_{b}	$a_{b}$
Racine	\sqrt[n]{x}	$\sqrt[n]{x}$
Fraction	\frac{a}{c}	$\frac{a}{c}$
Somme	\sum_{i=0}^n	$\sum_{i=0}^n$
Produit	\prod_{i=0}^n	$\prod_{i=0}^n$
Fraction	\frac{a}{c}	$\frac{a}{c}$
Intégrale	\int_a^b	$\int_a^b$
Caractères grecs	\alpha	$\alpha$
Fonction trigo	\sin	$\sin$
Exponentielle	\exp(x)	$\exp(x)$
Infini	\infty	$\infty$
Vecteur	\vec{a}	$\vec{a}$

Tableaux

Table formatter util

Example

Markdown

| Firstname | Lastname | Age |
|-----------|----------|-----|
| Jill      | Smith    | 50  |
| Eve       | Jackson  | 94  |

HTML

 <table style="width:100%">
  <tr> 
    <th>Firstname</th>   <!--th pour les headers-->
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>                   <!--tr pour les lignes-->
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>          <!--td pour les colonnes-->
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Rendu

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

Diagrammes Mermaid

Flowchart

Code

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Rendu

graph TD; A-->B; A-->C; B-->D; C-->D;

Sequence diagram

Flowchart

Code

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

Rendu

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Gantt diagram

Code

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

Rendu

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

Class diagram

Code

```mermaid
classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }
```

Rendu

classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

Git graph

Code

```mermaid
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
```

Rendu

gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch

Entity Relationship Diagram

Code

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

Rendu

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram

Code

```mermaid
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
```

Rendu

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

SuperTabs

Code

!!! example "SuperFences"
            === "Bash"
                ```bash
                #!/bin/bash
                echo "Hello world!"
                ```
            === "C"
                ```c
                #include <stdio.h>
                int main(void) {
                  printf("Hello world!\n");
                }
                ```
            === "C++"
                ```cpp
                #include <iostream>
                int main() {
                  std::cout << "Hello world!" << std::endl;
                  return 0;
                }
                ```
            === "C#"
                ```cs
                using System;
                class Program {
                  static void Main(string[] args) {
                    Console.WriteLine("Hello world!");
                  }
                }
                ```

Rendu

Bash

#!/bin/bash
echo "Hello world!"

C

#include <stdio.h>
int main(void) {
  printf("Hello world!\n");
}

C++

#include <iostream>
int main() {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

C#

using System;
class Program {
  static void Main(string[] args) {
    Console.WriteLine("Hello world!");
  }
}

SuperFences

Tip

Une SuperFence est un SuperTabs dans un bloc d'alerte

SuperFences

Code

!!! example "SuperFences"
            === "Bash"
                ```bash
                #!/bin/bash
                echo "Hello world!"
                ```
            === "C"
                ```c
                #include <stdio.h>
                int main(void) {
                  printf("Hello world!\n");
                }
                ```
            === "C++"
                ```cpp
                #include <iostream>
                int main() {
                  std::cout << "Hello world!" << std::endl;
                  return 0;
                }
                ```
            === "C#"
                ```cs
                using System;
                class Program {
                  static void Main(string[] args) {
                    Console.WriteLine("Hello world!");
                  }
                }
                ```

Rendu

SuperFences

Bash

#!/bin/bash
echo "Hello world!"

C

#include <stdio.h>
int main(void) {
  printf("Hello world!\n");
}

C++

#include <iostream>
int main() {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

C#

using System;
class Program {
  static void Main(string[] args) {
    Console.WriteLine("Hello world!");
  }
}

Tasklist

Code

* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [ ] Vestibulum convallis sit amet nisi a tincidunt
    * [x] In hac habitasse platea dictumst
    * [x] In scelerisque nibh non dolor mollis congue sed et metus
    * [ ] Praesent sed risus massa
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Rendu

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Vestibulum convallis sit amet nisi a tincidunt
- In hac habitasse platea dictumst
- In scelerisque nibh non dolor mollis congue sed et metus
- Praesent sed risus massa
Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Blocs de citation

Bloc de citation

Markdown

> Un problème sans solution est un problème mal posé.  
> Albert Einstein

HTML

<blockquote>
Un problème sans solution est un problème mal posé.<br>
Albert Einstein
</blockquote>

Rendu

Un problème sans solution est un problème mal posé.
Albert Einstein

Règle horizontale

Markdown

***
---
___

HTML

<hr/>

Rendu

Du texte

Du texte sous la règle

Smileys

Smiley	Rendu
`:alien:`
`:yum:`
`:confused:`
`:smirk:`
`:kiss:`
`:frog:`
`:fr:`
`:gb:`
`:tongue:`
`:computer:`

Liste des smileys

Videos YouTube

Vidéos YouTube

Markdown

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

HTML

<a 
    href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE
    "target="_blank">
        <img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
        alt="IMAGE ALT TEXT HERE"
        width="240"
        height="180"
        border="10"
        />
</a>

Rendu

HTML:

<a 
    href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE
    "target="_blank">
        <img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
        alt="IMAGE ALT TEXT HERE"
        width="240"
        height="180"
        border="10"
        />
</a>

Bloc Spoiler

??? warning "Spoiler"
    Ceci était un spoiler a dérouler

Spoiler

Ceci est un spoiler a dérouler

Bloc d'alerte

!!! keyword "titre du bloc facultatif (keyword ou keyword)"
    blabla

note ou seealso

blabla

tip ou hint ou important

blabla

info ou todo

blabla

question ou help ou faq

blabla

summary

blabla

warning ou caution ou attention

blabla

failure ou fail ou missing

blabla

check ou done

blabla

danger ou error

blabla

bug

blabla

quote

blabla

example

blabla