Markdown : Toute la syntaxe et son équivalent HTML

Partager sur email
Email
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur facebook
Facebook
Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Toute la syntaxe MarkDown par wpRock
Toute la syntaxe MarkDown par wpRock
Toute la syntaxe MarkDown par wpRock
Toute la syntaxe MarkDown par wpRock

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

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 :

  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

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


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

Texte alternatif

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 1Titre colonne 1Titre colonne 1
Celule 1.1Celule 1.2Celule 1.3
Celule 2.1Celule 2.2Celule 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.1Celule 1.2Celule 1.3
Celule 2.1Celule 2.2Celule 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");

Julien MA Jacob
Développeur WordPress
Passionné par le web et la programmation avec toujours plein de projets en tête
  Des livres pour approfondir le sujet

Les liens de commande des livres ci-dessous sont affiliés. En les utilisant pour passer vos commandes, vous soutenez le site 💖

  Hey ! Ces articles aussi devraient vous plaire
  Discussion autour de l'article
Laisser un commentaire

(Votre adresse mail ne sera pas publiée.)