Le Markdown est un langage de mise en forme de texte utilisĂ© dans les fichiers avec l’extension .MD. Ici je vous prĂ©sente toute sa syntaxe et son Ă©quivalent en HTML.
Markdown : Les paragraphes
MĂ©thode 1 – Code MD et HTML
Ceci est un paragraphe Ceci est un autre paragraphe
<p>Ceci est un paragraphe</p> <p>Ceci est un autre paragraphe</p>
MĂ©thode 1 – Aperçu du rendu
Ceci est un paragraphe
Ceci est un autre paragraphe
Markdown : Les titres
MĂ©thode 1 – Code MD et HTML
# Titre de niveau 1 ## Titre de niveau 2 ### Titre de niveau 3 #### Titre de niveau 4 ##### Titre de niveau 5 ###### Titre de niveau 6
Titre de niveau 1 ==================== Titre de niveau 2 ---------------------
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6>
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2>
MĂ©thode 1 – Aperçu du rendu
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Markdown : Les textes gras, italiques et barrés
MĂ©thode 1 – Code MD et HTML
*Ceci est un texte italique*, **Ceci est un texte gras** et ~~Ceci est un texte barré~~ **Il est possible de les *combiner* comme ceci** ou *encore comme **ceci***
_Ceci est un texte italique_ et __Ceci est un texte gras__ et ~~Ceci est un texte barré~~ __Il est possible de les _combiner_ comme ceci__ ou _encore comme __ceci___
<p><em>Ceci est un texte italique</em>, <strong>Ceci est un texte gras</strong> et <s>Ceci est un texte barré</s></p> <p><strong>Il est possible de les <em>combiner</em> comme ceci</strong> ou </em>encore comme <strong>ceci</strong></em></p>
MĂ©thode 1 – Aperçu du rendu
Ceci est un texte italique, Ceci est un texte gras et Ceci est un texte barré
Il est possible de les combiner comme ceci ou encore comme ceci
Markdown : Les liens
Code MD et HTML
[Ceci est un lien](https://wprock.fr/blog/) [Ceci est un lien avec un titre](https://wprock.fr/blog/ "Le titre du lien") Ceci est un lien automatique : <https://wprock.fr/blog/> Ceci est un lien email : <[email protected]>
<p><a href="https://wprock.fr/blog/">Ceci est un lien</a></p> <p><a href="https://wprock.fr/blog/" title="Le titre du lien">Ceci est un lien avec un titre</a></p> <p>Ceci est un lien automatique : <a href="https://wprock.fr/blog/">https://wprock.fr/blog/</a></p> <p>Ceci est un lien email : <a href="mailto:[email protected]">[email protected]</a></p>
Aperçu du rendu
Ceci est un lien avec un titre
Ceci est un lien automatique : https://wprock.fr/blog/
Ceci est un lien email : [email protected]
Markdown : Les listes simples et ordonnées
Code MD et HTML
Liste simple : * ĂlĂ©ment 1 * ĂlĂ©ment 3 * Sous-Ă©lĂ©ment 1 * Sous Ă©lĂ©ment 2 * ĂlĂ©ment 2 Liste ordonnĂ©e : 1. ĂlĂ©ment 1 2. ĂlĂ©ment 2 1. Sous-Ă©lĂ©ment 1 2. Sous Ă©lĂ©ment 2 3. ĂlĂ©ment 3 Listes simples et ordonnĂ©es imbriquĂ©es : 1. ĂlĂ©ment 1 * Sous-Ă©lĂ©ment 1 * Sous Ă©lĂ©ment 2 2. ĂlĂ©ment 2 3. ĂlĂ©ment 3
<p>Liste simple :</p> <ul> <li>ĂlĂ©ment 1</li> <li>ĂlĂ©ment 3 <ul> <li>Sous-Ă©lĂ©ment 1</li> <li>Sous Ă©lĂ©ment 2</li> </ul> </li> <li>ĂlĂ©ment 2</li> </ul> <p><br />Liste ordonnĂ©e :</p> <ol> <li>ĂlĂ©ment 1</li> <li>ĂlĂ©ment 2 <ol> <li>Sous-Ă©lĂ©ment 1</li> <li>Sous Ă©lĂ©ment 2</li> </ol> </li> <li>ĂlĂ©ment 3</li> </ol> <p><br />Listes simples et ordonnĂ©es imbriquĂ©es :</p> <ol> <li>ĂlĂ©ment 1 <ul> <li>Sous-Ă©lĂ©ment 1</li> <li>Sous Ă©lĂ©ment 2</li> </ul> </li> <li>ĂlĂ©ment 2</li> <li>ĂlĂ©ment 3</li> </ol>
Aperçu du rendu
Liste simple :
- ĂlĂ©ment 1
- ĂlĂ©ment 3
- Sous-élément 1
- Sous élément 2
- ĂlĂ©ment 2
Liste ordonnée :
- ĂlĂ©ment 1
- ĂlĂ©ment 2
- Sous-élément 1
- Sous élément 2
- ĂlĂ©ment 3
Listes simples et ordonnées imbriquées :
- ĂlĂ©ment 1
- Sous-élément 1
- Sous élément 2
- ĂlĂ©ment 2
- ĂlĂ©ment 3
Markdown : Checklist / Liste de cases Ă cocher
Code MD et HTML
- [x] ĂlĂ©ment 1, cochĂ© - [ ] ĂlĂ©ment 2, non-cochĂ© - [x] Sous-Ă©lĂ©ment 2.1, cochĂ© - [ ] Sous-Ă©lĂ©ment 2.2, non-cochĂ© - [ ] ĂlĂ©ment 3, non-cochĂ©
<ul> <li> <label> <input type="checkbox" checked> ĂlĂ©ment 1, cochĂ© </label> </li> <li> <label> <input type="checkbox"> ĂlĂ©ment 2, non-cochĂ© </label> </li> <ul> <li> <label> <input type="checkbox" checked> Sous-Ă©lĂ©ment 2.1, cochĂ© </label> </li> <li> <label> <input type="checkbox"> Sous-Ă©lĂ©ment 2.2, non-cochĂ© </label> </li> </ul> <li> <label> <input type="checkbox"> ĂlĂ©ment 3, non-cochĂ© </label> </li> </ul>
Aperçu du rendu
Markdown : Liste de définitions
Code MD et HTML
Terme 1 : Définition 1.1 Terme 2 : Définition 2.1 : Définition 2.2
<dl> <dt>Terme 1</dt> <dd>Définition 1.1</dd> <dt>Terme 2</dt> <dd>Définition 2.1</dd> <dd>Définition 2.2</dd> </dl>
Aperçu du rendu
- Terme 1
- Définition 1.1
- Terme 2
- Définition 2.1
- Définition 2.2
Markdown : Ăchapper les cratĂšres spĂ©ciaux
La liste des caractĂšres suivants doivent ĂȘtre prĂ©cĂ©der d’un anti-slash (\) :
\\ : Anti-slash \` : Apostrophe curve \* : Asterisk \_ : Low dash / Underscore \{\} : Braces \[\] : Hooks \(\) : Parentheses \# : Sharp \+ : Sign more \- : Less sign / hyphen \! : Exclamation dot \. : Dot
Markdown : Les images
Code MD et HTML

<img src="https://wprock.fr/wp-content/uploads/2018/11/wprock-wallpaper-wapuu-wordpress-paris-520x254.jpg" alt="Texte alternatif" title="Titre, facultatif">
Aperçu du rendu
Markdown : Les citations
Code MD et HTML
> Ceci est une citation > - Source
<blockquote> <p>Ceci est une citation</p> <cite>Source</cite> </blockquote>
Aperçu du rendu
Ceci est une citation
Source
Markdown : Séparateurs / Lignes horizontal
Code MD et HTML
***
---
___
<hr/>
Aperçu du rendu
Markdown : Les tableaux
Code MD et HTML – Sans alignement
Titre colonne 1 | Titre colonne 1 | Titre colonne 1 --- | --- | --- Celule 1.1 | Celule 1.2 | Celule 1.3 Celule 2.1 | Celule 2.2 | Celule 2.3
<table> <thead> <tr> <th>Titre colonne 1</th> <th>Titre colonne 1</th> <th>Titre colonne 1</th> </tr> </thead> <tbody> <tr> <td>Celule 1.1</td> <td>Celule 1.2</td> <td>Celule 1.3</td> </tr> <tr> <td>Celule 2.1</td> <td>Celule 2.2</td> <td>Celule 2.3</td> </tr> </tbody> </table>
Aperçu du rendu – Sans alignement
Titre colonne 1 | Titre colonne 1 | Titre colonne 1 |
---|---|---|
Celule 1.1 | Celule 1.2 | Celule 1.3 |
Celule 2.1 | Celule 2.2 | Celule 2.3 |
Code MD et HTML – Avec alignement
Titre colonne 1 (droite) | Titre colonne 1 (centré) | Titre colonne 1 (gauche) ---: | :---: | :--- Celule 1.1 | Celule 1.2 | Celule 1.3 Celule 2.1 | Celule 2.2 | Celule 2.3
<table> <thead> <tr> <th align="right">Titre colonne 1 (droite)</th> <th align="center">Titre colonne 1 (centré)</th> <th align="left">Titre colonne 1 (gauche)</th> </tr> </thead> <tbody> <tr> <td align="right">Celule 1.1</td> <td align="center">Celule 1.2</td> <td align="left">Celule 1.3</td> </tr> <tr> <td align="right">Celule 2.1</td> <td align="center">Celule 2.2</td> <td align="left">Celule 2.3</td> </tr> </tbody> </table>
Aperçu du rendu – Avec alignement
Titre colonne 1 (droite) | Titre colonne 1 (centré) | Titre colonne 1 (gauche) |
---|---|---|
Celule 1.1 | Celule 1.2 | Celule 1.3 |
Celule 2.1 | Celule 2.2 | Celule 2.3 |
Markdown : Codes et textes préformatés
Code MD et HTML – En ligne
Mon code : `alert("Hello wpRock");`
<p>Mon code : <code>alert("Hello wpRock");</code></p>
Aperçu du rendu – En ligne
Mon code : alert("Hello wpRock");
Code MD et HTML – Pleine largeur
``` alert("Hello wpRock"); ```
```javascript alert("Hello wpRock"); ```
<pre>alert("Hello wpRock");</pre>
Aperçu du rendu – Pleine largeur
alert("Hello wpRock");
Hello! Merci pour l’article! Est-il possible de barrĂ© du texte dans un bloc de code ?
Bonjour Oulfa,
Non, ce n’est pas possible. Le principe des blocs de code, c’est de prĂ©senter du texte prĂ©formatĂ© ;)
Voici une explication sur le fonctionnement de la balise PRE en HTML : https://developer.mozilla.org/fr/docs/Web/HTML/Element/pre
Ici, les blocs de code ont un comportement Ă©quivalent. Et pour ce qui est de la coloration syntaxique, c’est l’outil de visualisation du Markdown qui apporte cette fonctionnalitĂ©