Markdown, une syntaxe qu'elle est bien pour écrire du HTML !

Temps de lecture ~8 minutes

Le markdown a d’abord été créer pour être aussi facile à écrire qu’à lire. À cet effet, la lisibilité est primordiale et un document écrit avec la syntaxe Markdown devrait être lisible tel quel, sans passez par la conversion Markdown > HTML.

le Markdown, kézako ?

L’objectif du Markdown est d’être utilisé comme format d’écriture pour le web. Pour ma part je l’utilise pour écrire mes articles depuis un petit moment maintenant, mais il peut aussi être utilisé par les visiteurs d’un site ou forum lors de la rédaction des commentaires par exemple.

Éléments de bloc.

Paragraphes et saut de ligne.

On va commencer tranquillement avec les paragraphes. En Markdown, un paragraphe n’est rien d’autre qu’une ou plusieurs lignes consécutives de texte non indentées. Par non indentée, j’entends que les lignes de texte ne sont pas précédées d’espace ou de tabulation (bref, la ligne commence par un caractère quoi !). Petite subtilité du Markdown concernant les sauts de lignes (\
en HTML). Afin de créer un saut de ligne au sein d’un paragraphe, terminez simplement votre ligne avec deux espaces, puis faites un retour à la ligne.

Pour terminer un paragraphe et en commencer un nouveau, créer simplement une ligne vide avant de commencer votre second paragraphe.

Un peu de pratique:

La marche du vertueux est semée d’obstacles qui sont les entreprises égoïstes que fait sans fin surgir l’oeuvre du Malin. Béni soit-il, l’homme de bonne volonté qui au nom de la charité se fait le berger des faibles qu’il guide dans la vallée de la mort et des larmes, car il est le gardien et la providence des enfants qui se sont égarés ? J’abattrai alors le bras d’une terrible colère, d’une vengeance furieuse et effrayante sur les impies qui pourchassent et anéantissent les brebis de Dieu, et tu sauras pourquoi mon nom est l’Éternel quand s’abattra sur toi la vengeance du Tout Puissant.

Pas besoin d’expliquer d’où viens cette tirade, vous aurez reconnu tout seul. {espace} {espace}  
Si ? {espace} {espace}  
Bon, OK.

Cette tirade est une transcription
d’une partie du dialogue de Samuel L. Jackson
qu’il
prononce dans
Pulp 
Fiction

Une fois passée par la moulinette Markdown, on a :

<p>La marche du vertueux est semée d’obstacles qui sont les entreprises égoïstes que fait sans fin surgir l’oeuvre du Malin. Bénit soit-il, l’homme de bonne volonté qui au nom de la charité se fait le berger des faibles qu’il guide dans la vallée de la mort et des larmes, car il est le gardien et la providence des enfants qui se sont égarés ? J’abattrai alors le bras d’une terrible colère, d’une vengeance furieuse et effrayante sur les impies qui pourchassent et anéantissent les brebis de Dieu, et tu sauras pourquoi mon nom est l’Éternel quand s’abattra sur toi la vengeance du Tout Puissant.</p>

<p>Pas besoin d’expliquer d'ou viens cette tirade, vous aurez reconnu tout seul.<br />
Non ?<br />
Bon, OK.</p>

<p>Cette tirade est une transcription d’une partie du dialogue de Samuel L. Jackson qu’il prononce dans Pulp Fiction</p>

Les titres

Markdown propose 2 syntaxes pour les titres, je n’exposerai ici que la version j’utilise qui me semble plus simple à mettre en oeuvre.
Les titres de niveau 1 à 6 (H1 -> H6) sont rendus en Markdown avec le symbole # (de 1 à 6 pour ceux qui suivent).

# Un titre H1
## Un titre H2
### Un titre H3 
#### Un titre H4
##### Un titre H5
###### Un titre H6

produira:

<h1>Un titre H1</h1>
<h2>Un titre H2</h2>
<h3>Un titre H3</h3>
<h4>Un titre H4</h4>
<h5>Un titre H5</h5>
<h6>Un titre H6</h6>

Les titres peuvent également se terminer par #, mais ce n’est pas obligatoire. Le nombre de # qui clôture n’ayant pas d’importance. C’est le nombre de dièses ouvrant qui détermine le niveau du titre.

# Un titre H1 #
## Un titre H2 #
### Un titre H3 #####
#### Un titre H4 ####
##### Un titre H5 ##
###### Un titre H6 ###

produira le même code HTML que ci-dessus:

<h1>Un titre H1</h1>
<h2>Un titre H2</h2>
<h3>Un titre H3</h3>
<h4>Un titre H4</h4>
<h5>Un titre H5</h5>
<h6>Un titre H6</h6>

Citations

Si vous êtes familier de la syntaxe en mode texte des mails, la méthode Markdown devrait vous parler (« Hey, tu m’entends ? C’est la méthode Markdown qui te parle ! »)

> Mais moi les dingues, j’les soigne
> j’m’en vais lui faire une ordonnance, et une sévère
> J’vais lui montrer qui c’est Raoul
> Aux quatre coins de Paris qu’on va l'retrouver
> Éparpillé façon puzzle...
> Moi quand on m’en fait trop j’correctionne plus
> J’dynamite... j’disperse... et j’ventile... 

On peut aussi imbriquer les citations en ajoutant un niveau

> Voici un premier niveau de citation
>
> > Et hop, un deuxième niveau de citation
>
> > Magie du direct, retour au premier niveau de citation

Il est également possible de mettre tout autre élément Markdown (listes, lien, titres, etc.) à l’intérieur d’une citation:

> ## Le titre de ma citation
>
> 1. Premier item d’une liste ordonnée
> 2. Deuxième élément de la liste
>
> Un petit bout de code ?
>
>   <? php echo "Hello World !"; ? >

Listes

Vous voulez aussi faire des listes, à puces (non-ordonnées) ou numérotées (ordonnées) ? Markdown est encore là et s’utilise encore très intuitivement.

Liste non ordonnée:

* Pierre
* Paul
* Jacques

ou encore:

- Bleu
- Blanc
- Rouge

mais aussi:

+ iPod
+ iPhone
+ iPad

Pour les listes ordonnées, c’est encore plus simple !

1. One
2. Two
3. Three

Il faut préciser que l’ordre des nombres n’a aucune importance dans le code HTML qui sera généré. Il sera à chaque fois rendu de la sorte:

<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>

Lignes horizontales

Il est aussi possible de créer des séparations horizontales (hr )

* * *
***
*****
- - -
------------------------

Elements de texte

Liens

Deux possibilités pour les liens en Markdown. La méthode incorporée au texte et par référence.

Cette fois-ci nouveau caractère, le [crochet].

Version incorporée au texte:

Voici [un lien] (http://jaiunegrosseteu.be/ "titre du lien") en mode incorporé au texte.

Le même [lien] (http://jaiunegrosseteu.be/) mais sans titre.

Ce qui donnera:

<p>Voici <a href=" http://jaiunegrosseteu.be/ » title=" titre du lien">un lien</a> en mode incorporé au texte.</p>
<p>le même <a href=" http://jaiunegrosseteu.be/">lien</a> mais sans titre.</p>

En mode par référence:

Hey, je suis un [Lien]
[1] référencé.

Ensuite n’importe où, ajoutez:

[1]: http://jaiunegrosseteu.be/ "Titre facultatif"

Pour la lisibilité, je préfère les liens référencés, et pour ma part je place les références à la fin de mon texte.

Emphase

Markdown est fort, ça, vous l’avez vu. Il peut aussi en ajouter (de la force) à votre prose.

Les astérisques (*) et les underscores (_) vous permettront de baliser votre texte avec l’élément * et si vous les doublez em deviendra strong

Exemples:</p> </p> </p> </p>

TooGz est un mec vraiment *génial*.

TooGz est un mec vraiment _génial_.

deviendra:

<p>TooGz est un mec <em>génial</em>.</p>

<p>TooGz est un mec <em>génial</em>.</p>

Mais vous en conviendrez, on peut mieux faire, et voici comment:

TooGz est un mec **génial**.

TooGz est un mec __génial__.

et hop:

<p>TooGz est un mec <strong>génial</strong>.</p>

<p>TooGz est un mec <strong>génial</strong>.</p>

Images

Pour les images, qui ne sont ni plus ni moins des liens, on se rapproche de la méthode de liens vue plus haut. Avec ses 2 variantes: incorporées au texte et par référence.

Incorporées:

![texte alternatif] (/chemin/de/image.jpg "titre optionnel")

Par référence:

![texte alternatif] [id]

et où vous le souhaitez:

[id]: /chemin/de/image.jpg "titre optionnel"

Pour finir

Et voilà, je pense que nous avons fait le tour des principales fonctionnalités que procure le Markdown. Vous verrez qu’il demande que très peu de temps d’adaptation et vous fait économiser du temps lors de la rédaction de contenu destiné au Web.

Si vous souhaitez approfondir le sujet, je ne saurais trop vous recommander d’aller jeter un oeil sur le site du créateur de la Syntaxe Markdown.