Markdown 🐙 Toute la syntaxe et son Ă©quivalent HTML

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
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email

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

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 :

  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

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

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

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

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
Julien MA Jacob - DĂ©veloppeur WordPress
PassionnĂ© par le web et la programmation avec toujours plein de projets en tĂȘte
  Discussion autour de l'article
S’abonner
Notifier de
guest
2 Commentaires
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Oulfa

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