Le Markdown est un langage de balisage permettant de faciliter l'écriture et la lecture de document. Sa syntaxe a été créé dans le but premier d'être aussi facile à écrire qu'à lire. Au fil du temps, il est devenu incontournable sur le Web et son objectif est de devenir le format d'écriture du Net.

Ecrire un document en HTML n'est, certes, pas compliqué mais sa syntaxe est assez lourde pour rendre cette tâche laborieuse. Le Markdown a été inventé dans ce but : rendre la prise de note rapide tout en formattant le texte (gras, titres, citations, etc...).

Sa syntaxe permet au document d'être lu facilement. Ce dernier peut être publié sans transformation mais plusieurs outils permettent de convertir un document Markdown en syntaxe HTML notamment.

Cette syntaxe peut être utilisée dans de nombreux cas, comme par exemple :

  • La prise de notes
  • La préparation de cours / conférence
  • La rédaction de tutoriels
  • La rédaction de commentaires sur divers sites (StackOverflow par exemple)
  • La rédaction de documentation et guides (GitHub par exemple)

D'ailleurs, les articles de ce blog sont écrit en Markdown !

La syntaxe

Nous allons voir comment écrire un document en Markdown en parcourant diverses fonctionnalités.

Les paragraphes

Un paragraphe est une ou plusieurs lignes de texte. En Markdown, pour terminer un paragraphe, créez une ligne vide avant de commencer le suivant.

Ceci est un paragraphe.

Encore un !

Produira en HTML :

<p>Ceci est un paragraphe.</p>

<p>Encore un !</p>

Petite astuce, pour ne sauter qu'une ligne au sein d'un paragraphe, terminez votre ligne avec deux espaces puis faites un retour à la ligne.

En gras

La mise en forme d'un mot en gras est simple. Il suffit de l'entourer avec deux astérisques (*).

**Phrase en gras**

Ou encore de deux underscore :

__Phrase en gras__

Dans les deux cas, le HTML produit sera :

<strong>Phrase en gras</strong>

En italique

Pour mettre un texte en italique, il faut utiliser un astérisque ou un underscore :

*Phrase en italique*

_Phrase en italique_

HTML produit :

<em>Phrase en italique</em>

Les titres

En Markdown, 6 niveaux de titres sont disponibles. Plusieurs méthodes sont possibles.
Pour la première, il faut précéder le titre avec un dièse (#). 

# Titre de niveau 1
## Titre de niveau 2
### Titre de niveau 3
#### Titre de niveau 4
##### Titre de niveau 5
###### Titre de niveau 6

En HTML, cela produira :

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
...

L'autre méthode ne permet de faire que 2 niveaux :

Titre 1
=======

Titre 2
-------

Peu importe le nombre de "=" ou de "-".

Les listes

Vous pouvez faire des listes à puces ordonées ou non.

* Item 1
* Item 2
* Item 3

Vous pouvez remplacer les astériques par un plus ou un tiret !

HTML produit :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Pour des listes numérotées (ordonnées) :

1. Item 1
2. Item 2
3. Item 3

HTML produit :

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Les listes imbriquées

Le principe est le même que pour les listes vu ci-dessus. Il suffit d'effectuer une tabulation pour imbriquer une autre liste :

- Item 1
    - Item 1.1
        - Item 1.1.1
- Item 2

Les liens

Voici la syntaxe pour créer des liens :

[Texte du lien](http://www.google.fr "Texte pour le titre, facultatif")

Cela produira en HTML :

<a href="http://www.google.fr" title="Texte pour le titre, facultatif">Texte du lien</a>

Les liens par référence

Au lieu d'insérer l'URL du lien directement, vous pouvez utiliser les références si vous devez utiliser l'URL régulièrement dans le document (ou pour plus de lisibilité).

Rendez-vous sur [Texte du lien][monsite] !

[monsite]: http://www.google.fr "Titre facultatif"

Vous pouvez insérer les références où vous voulez, le plus lisible étant en bas de document.

Les images

La syntaxe pour insérer une image est semblable à celle pour créer un lien :

![Texte alternatif](http://www.monsite.fr/image.png "Texte pour le titre, facultatif")

HTML produit :

<img src="http://www.monsite.fr/image.png" alt="Texte alternatif" title="Texte pour le titre, facultatif">

Les images par référence

A la manière des liens, vous pouvez insérer des images en utilisant les références.

![Text alternatif][img-monsite]

[img-monsite]: http://www.monsite.fr/image.png "Titre facultatif"

Les citations

Pour les citations, c'est également tout simple ! Vous devez précéder les lignes d'un chevron ">" :

> Ceci est une citation

Cela produira ce HTML :

<blockquote><p>Ceci est une citation</p></blockquote>

Code source (bloc)

Pour insérer un code, il suffit de l'indenter d'une tabulation ou de 4 espaces.

Exemple de code :
    <?php echo 'Hello World!'; ?>

HTML produit :

<p>Exemple de code :</p>

<pre><code><?php echo 'Hello World!'; ?></code></pre>

Code source (en ligne)

Vosu pouvez également insérer du code en mode ligne, dans un paragraphe. Entourez-le d'accents graves "`" :

Utilises la fonction `strpad()` !

HTML produit :

<p>Utilises la fonction <code>strpad()</code> !</p>

Séparateur horizontal

Un séparateur peut être inséré via 3 tirets ou astérisques :

---

* * *

- - -

Dans tous les cas, le résultat HTML est :

<hr />

Les éditeurs de Markdown

Windows

Pour ma part, MarkdownPad est le logiciel a avoir si vous êtes sous Windows.
Très simple d'approche, interface soignée, les fonctionnatités ne manquent pas : prévisualisation HTML en temps réel, impression et export HTML, personnalisation des styles CSS, défilement automatique du texte, etc...

Cependant, la version payante (environ 15 euros) dispose de plusieurs fonctionnalités intéressantes : export PDF, tableau, sauvegarde automatique.

Linux

ReText vous permet d'écrire et de visualiser du Markdown sous une machine Linux.
Vous pouvez exporter le résultat en HTML, ODT ou PDF.
Le changement des styles est également de la partie.

MdCharm est une bonne alternative à ReText.

Mac

Mou est un logiciel gratuit fonctionnant sur Max OSX et iPad. Ses fonctionnatités rejoignent celles de MarkdownPad.

Les limites du Markdown

Bien que beaucoup d'outils et de site Web utilisent la syntaxe Markdown, elle présente quelques lacunes.

Plusieurs éléments ne sont pas (encore) implémentés tels que :

  • les tableaux
  • les formules mathématiques
  • les notes de bas de page

Cependant, bien que ces fonctionnalités ne soient pas présentes en Markdown, certaines librairies / outils permettent ces éléments (Pandoc, Kramdown, etc...).

Concernant les tableaux, vous pouvez utiliser les balises table du HTML directement dans votre document Markdown, elles seront lues !

Quelques liens