Aide-mémoire Markdown

Guide de référence complet pour la syntaxe Markdown

Basé sur la spécification GitHub Flavored Markdown (GFM) et CommonMark

Syntaxe de base

Éléments fondamentaux du Markdown original

En-têtes (style ATX)

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

En-têtes (style Setext)

Syntaxe
Heading 1
=========

Heading 2
---------
Résultat
Heading 1Heading 2

Emphase et formatage

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

Code inline

`code`→code
``code with `backtick` ``→code with `backtick`
Astuce
Utilisez des backticks doubles quand votre code contient des backticks simples.

Blocs de code (Fenced Code Blocks)

Syntaxe
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
Résultat
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
Langages supportés pour la coloration syntaxique
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Liens

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
Lien de référence
[text][ref]

[ref]: https://example.com "Title"

Images

Syntaxe
![Alt text](url)
Avec titre
![Alt text](url "Title")
Image avec lien
[![Alt](image.jpg)](link)
Référence
![Alt][ref]

[ref]: url "Title"

Listes non ordonnées

Syntaxe
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
Résultat
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

Listes ordonnées

Syntaxe
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
Résultat
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Citations (Blockquotes)

Syntaxe
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
Résultat
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

Lignes horizontales

Syntaxe
---

***

___
Résultat

Extensions GFM

Fonctionnalités supplémentaires de GitHub Flavored Markdown

Tableaux

Syntaxe
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

Alignement:
:--- gauche
:---: centre
---: droite
Résultat
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Listes de tâches

Syntaxe
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
Résultat
  • Completed task
  • Another done task
  • Pending task
  • Another pending

Autolinks

Les URLs et emails sont automatiquement liés
www.example.com
https://example.com
[email protected]
Résultat

Alertes/Callouts (GitHub)

Syntaxe
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
Résultat
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

Syntaxe étendue

Fonctionnalités avancées supportées par certains parsers

Notes de bas de page

Syntaxe
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
Résultat

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

Listes de définitions

Syntaxe
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
Résultat
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

Texte surligné

==highlighted text==→highlighted text
Note
Supporté par certains parsers comme Obsidian, Notion et autres.

Indice et exposant

H~2~O→H2O
X^2^→X2
Alternative HTML
H<sub>2</sub>O
X<sup>2</sup>

Emojis

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Référence complète
Liste complète des codes emoji

Abréviations

Syntaxe
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
Résultat
HTML is widely used on the web.

Formules mathématiques (LaTeX)

En ligne
The formula $E = mc^2$ is famous.
Résultat
The formula E = mc² is famous.
Bloc
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
Résultat
n!k!(n-k)! = (nk)

HTML et éléments spéciaux

Utilisation du HTML inline et des caractères spéciaux

HTML inline

Éléments supportés
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
Résultat
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

Échappement de caractères

Utilisez \ avant les caractères spéciaux
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Caractères pouvant être échappés
\ ` * _ { } [ ] ( ) # + - . ! |

Sauts de ligne

Méthodes
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

Entités HTML

&copy;→©
&reg;→®
&trade;→™
&nbsp;→(espace insécable)
&lt; &gt;→< >
&amp;→&

Fonctionnalités avancées de GitHub

Fonctionnalités spécifiques à GitHub Flavored Markdown

Diagrammes Mermaid

Organigramme
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
Résultat
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
Graphique circulaire
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Diagramme de séquence
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Types de diagrammes supportés
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Touches de clavier (kbd)

Syntaxe
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
Résultat
Ctrl + C
Cmd + Shift + P
Enter ↵

Éléments pliables

Syntaxe
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
Résultat
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

Mentions et références

Mentions d'utilisateurs
@username
@organization/team
Références aux Issues et PRs
#123
GH-123
username/repo#123
organization/repo#123
Résultat
@username — mentionne un utilisateur
#123 — référence issue/PR #123
repo#456 — référence dans un autre dépôt

Modèles de couleurs

Syntaxe
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
Résultat
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

Commentaires

Syntaxe
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Résultat
(Les commentaires sont invisibles dans le document rendu)

SHA de commits

Syntaxe
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Résultat
a1b2c3d — lien vers le commit
repo@a1b2c3d — commit dans un autre dépôt

Code avec Diff

Syntaxe
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
Résultat
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

Ancres et liens internes

Créer une ancre
<a name="section"></a>
## My Section
Lier à une ancre
[Go to section](#section)
[Back to top](#top)
Résultat
Go to section|Back to top ⬆️

Images avec taille

Utiliser HTML
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
Astuce
Utilisez HTML quand vous devez contrôler les dimensions ou l'alignement des images.

Table des matières

Syntaxe
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
Résultat
Table of Contents

Badges/Shields

Syntaxe
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
Résultat
build: passingversion: 1.0.0license: MITdocs: latest

Alignement du texte

Syntaxe
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
Résultat
Centered text
Right-aligned text
Centered bold

Outils et ressources

Liens utiles pour travailler avec Markdown

Références et ressources