Markdown : Toute la syntaxe et son équivalent HTML

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.

Syntaxe Markdown : Les paragraphes
Syntaxe Markdown : Les titres
Syntaxe Markdown : Les textes gras, italiques et barrés
Syntaxe Markdown : Les liens
Syntaxe Markdown : Les listes simples et ordonnées
Syntaxe Markdown : Checklist / Liste de cases à cocher
Syntaxe Markdown : Liste de définitions
Syntaxe Markdown : Échapper les cratères spéciaux
Syntaxe Markdown : Les images
Syntaxe Markdown : Les citations
Syntaxe Markdown : Les séparateurs / Lignes horizontal
Syntaxe Markdown : Les tableaux
Syntaxe Markdown : Codes et textes préformatés

Syntaxe 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

Syntaxe 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

Syntaxe 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

Syntaxe 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 : <exemple@wprock.fr>

<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:exemple@wprock.fr">exemple@wprock.fr</a></p>

Aperçu du rendu

Ceci est un lien

Ceci est un lien avec un titre

Ceci est un lien automatique : https://wprock.fr/blog/

Ceci est un lien email : exemple@wprock.fr

Syntaxe 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
1. Sous-élément 1
2. 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

Syntaxe 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

Élément 1, coché
Élément 2, non-coché

Sous-élément 2.1, coché
Sous-élément 2.2, non-coché

Élément 3, non-coché

Syntaxe 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

Syntaxe 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 courbe
\*   : Astérisque
\_   : Tiret bas / Underscore
\{\} : Accolades
\[\] : Crochets
\(\) : Parenthèses
\#   : Dièse
\+   : Signe plus
\-   : Signe moins / trait d'union
\!   : Point d'exclamation
\.   : Point

Syntaxe Markdown : Les images

Code MD et HTML

![Texte alternatif](https://wprock.fr/wp-content/uploads/2018/11/wprock-wallpaper-wapuu-wordpress-paris-520x254.jpg "Titre, facultatif")

<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

Syntaxe 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

Syntaxe Markdown : Les séparateurs / Lignes horizontal

Code MD et HTML

***

---

___

<hr/>

Aperçu du rendu

Syntaxe 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

Syntaxe 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");