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.

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

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

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

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é

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

![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

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

S’abonner

2 Commentaires

Most Voted

Newest Oldest

Inline Feedbacks

View all comments

Oulfa

5 mois il y a

Hello! Merci pour l’article! Est-il possible de barré du texte dans un bloc de code ?

Répondre

Julien MA Jacob

Auteur

Reply to Oulfa

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é