Cet article rassemble les éléments de syntaxe les plus utiles pour écrire un document en markdown.

Styles du texte

	Markdown	HTML	Résultat
Gras	**Texte en gras**	<b>Texte en gras</b>	Texte en gras
Italique	_Texte en italique_	<i>Texte en italique</i>	Texte en italique
Gras et en italique	**_Texte gras en italique_**	<b><i>Texte gras en italique</i></b>	Texte gras en italique
Barré	~~Texte barré~~	<s>Texte barré</s>	Texte barré
Souligné	Pas de syntaxe	<u>Texte souligné</u>	Texte souligné
Exposant	Pas de syntaxe	Texte<sup>exposant</sup>	Texteexposant
Indice	Pas de syntaxe	Texte<sub>indice</sub>	Texteindice
Emojis	Liste des émojis: Emoji cheat-sheet Par exemple: :slightly_smiling_face: En markdown, on peut aussi directement utiliser le code HTML du caractère avec la syntaxe:	Liste des émojis en HTML: Emoji smileys Par exemple:	🙂

Titres

Différents types de titres

<h1>Gros titre</h1>

<h2>Gros titre</h2>

<h3>Petit titre</h3>

Lien vers les titres

Il est possible d’intégrer des liens vers les titres comme on peut le faire en HTML. Il faut utiliser la syntaxe:

• Pour identifier le titre: # <texte du titre> {#<identifiant du titre>}
• Pour renvoyer au titre avec un identifiant: [<titre>](#<identifiant du titre>)

Par exemple:

<h1 id="identifiant-titre-1">Titre 1 avec ID</h1>

<a href="#identifiant-titre-1">Titre 1 avec ID</a>

Liens

Pour afficher des liens hypertexte, il faut utiliser la syntaxe:

• Lien classique, par exemple Page wikipedia sur Markdown:
  

  Markdown	[<Texte du lien>](<lien http://...>) Par exemple: [Page wikipedia sur Markdown](https://en.wikipedia.org/wiki/Markdown)
  HTML	<a href="https://en.wikipedia.org/wiki/Markdown">Page wikipedia sur Markdown</a>

• Afficher directement un lien, par exemple https://en.wikipedia.org:
  

  Markdown	Il faut entourer le lien avec <...>, par exemple: <https://en.wikipedia.org>
  HTML	<a href="https://en.wikipedia.org">https://en.wikipedia.org</a>

• Afficher une adresse mail, par exemple webmaster@example.com:
  

  Markdown	Comme pour les liens, il faut entourer le lien avec <...>, par exemple: <webmaster@example.com>
  HTML	<a href="mailto:webmaster@example.com">webmaster@example.com</a>

Tableaux

Sans alignement du contenu

Sans précision, l’alignement est par défaut sur la gauche.
La syntaxe est:

| Titre 1 | Titre 2 | Titre 3 |
| --------------- | --------------- | ----- |
| Ligne 1 | Contenu | Autre contenu |
| Ligne 2 | Contenu | Autre contenu |
| Ligne 3 | Contenu | Autre contenu |

Pour obtenir:

Indiquer un alignement du contenu

Pour préciser l’alignement, il faut indiquer juste en dessous du titre:

• Aligner sur la gauche: | :--- |
• Aligner au centre: | :---: |
• Aligner sur la droite: | ---: |

Ainsi avec la syntaxe:

| Titre 1 | Titre 2 | Titre 3 |
| :-------------- | :--------------: | --------------: |
| Aligné à gauche | Aligné au centre | Aligné à droite |

Pour obtenir:

Bloc de texte

Citation

On rajoute le caractère > avant le texte:

> Texte ligne 1
> Texte ligne 2
> Texte ligne 3

Pour obtenir:

Bloc de code

On entoure le texte avec ```:

```
Bloc de code ligne 1
ligne 2
ligne 3
```

Pour obtenir:

Bloc de code ligne 1
ligne 2
ligne 3

Elément de code dans le texte

Pour obtenir un élément de code sans bloc séparé de cette façon code inline, il faut entourer le texte avec le caractère `:

`code inline`

Paragraphe d’alerte

Listes

Listes non ordonnées

Pour afficher des listes non ordonnées, il faut utiliser l’un des caractères: *, - ou +:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Listes ordonnées

On peut juste rajouter 1. avant chaque ligne ou numéroter directement 1., 2., 3., etc:

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

Listes imbriquées

On peut imbriquer des listes en indentant les paragraphes. Les indentations peuvent être faites avec des espaces (il faut au moins 3 espaces) ou le caractère [Tab]:

1. Elément 1
   * Element 1 - Sub 1
   * Element 1 - Sub 2
1. Element 2
   1. Element 2 - Sub 1
   1. Element 2 - Sub 2
1. Element 3
   * Element 3 - Sub 1
   * Element 3 - Sub 2

Pour obtenir:

1. Elément 1
   • Element 1 – Sub 1
   • Element 1 – Sub 2
2. Element 2
   1. Element 2 – Sub 1
   2. Element 2 – Sub 2
3. Element 3
   • Element 3 – Sub 1
   • Element 3 – Sub 2

Liste de tâches

On peut simplement afficher une liste de tâches à cocher avec la syntaxe (il faut au moins 2 lignes):

- [ ] <texte correspondant à la tâche>

Quelques remarques:

• On peut utiliser les autres caractères * ou + à la place de -, par exemple:

  + [ ] Element 1
  + [ ] Element 2
  

• Pour afficher un élément coché directement, on peut utiliser le caractère x:

  - [x] Element directement coché
  

• Si le texte correspondant à une ligne commence par une parenthèse, il faut l’échapper avec \:

  - [ ] \(ligne commençant par une parenthèse)
  

Par exemple:

- [ ] Element 1
- [x] Element 2
- [ ] \(Element 3)

Pour afficher:
□ Element 1
☑ Element 2
□ (Element 3)

Images

Pour afficher une image:

La syntaxe est:

• Afficher une image avec texte alternatif (sans lien):
  

  Markdown	 Par exemple: 
  HTML	<img alt="<texte alternatif>" src="<chemin absolu ou relatif de l'image>"/> Par exemple: <img alt="Logo wikipedia" src="https://fr.wikipedia.org/static/images/icons/wikipedia.png" />

• Afficher une image sans texte alternatif (sans lien):
  

  Markdown	 Par exemple: 
  HTML	<img src="<chemin absolu ou relatif de l'image>"/> Par exemple: <img src="https://fr.wikipedia.org/static/images/icons/wikipedia.png" />

• Afficher une image avec lien:
  Il faut mettre le lien de l’image à la place du texte du lien hypertexte:

  Markdown	[](<lien hypertexte>) Par exemple: [](https://en.wikipedia.org/)
  HTML	<a href="<lien hypertexte>"><img src="<chemin absolu ou relatif de l'image>"/></a> Par exemple: <a href="https://en.wikipedia.org/"><img src="https://fr.wikipedia.org/static/images/icons/wikipedia.png"/></a>

Ligne horizontale

La ligne horizontale est affichée sur toute la largeur du paragraphe:

La syntaxe est:

<hr />

Caractères à échapper

Les caractères de la liste suivante sont interprétés donc si on veut afficher ces caractères sans qu’ils soient interprétés, il faut les échapper en les précédant avec le caractère \ (avec \<caractère à échapper>).
Ces caractères sont:
\ (pour échapper: \\), `, *, _ (caractère underscore), { }, [ ], < >, ( ), #, +, -, ., ! et |.

Editeurs en ligne

On peut trouver quelques éditeurs en ligne de markdown:

• Stackedit: https://stackedit.io/app#
• Dillinger: https://dillinger.io/
• Online markdown editor: https://onlinemarkdowneditor.dev/

On peut trouver une liste plus exhaustive sur Awesome Markdown Editors & (Pre)viewers.