MarkDown

Markdown est un langage simple qui permet d’écrire du HTML.

Il a été créé par John Gruber et Aaron Swartz.

Il est destiné à pouvoir mettre en forme du texte sans avoir à écrire les balises HTML.

Ce langage est utilisé dans les forums pour pouvoir mettre le texte en page, pour écrire des fichiers de style Readme (comme sur GitHub) et aussi pour mettre en forme des emails dans les messageries en ligne.

Exemple de fichierMarkDown :

Logiciel permettant d’écrire du Markdown

Bien que cela ne soit pas nécessaire, le Markdown pouvant être écrit dans n’importe quel éditeur de texte et interprété par un navigateur, il existe de nombreux logiciels permettant d’écrire du Markdown et de voir le résultat. Pour mon exemple j’ai choisi MarkdownPad2

Il permet d’insérer la syntaxe Markdown simplement et surtout de voir le résultat automatiquement dans le second volet. Il permet aussi d ‘ouvrir un navigateur pour visualiser le résultat.

Syntaxe de Markdown

On utilise des raccourcis qui seront ensuite remplacés par des balises HTML et qui permettront de présenter le document avec une mise en forme.

Les titres

Il existe deux syntaxes pour les titres. Elles produisent le même résultat

*** Code Markdown ***
*********************
Title 1
==
Title 2
-
### Title 3 #
#### Title 4

*** Export HTML ***
*******************
<h1>Title 1</h1>
<h2>Title 2</h2>
<h3>Title 3</h3>
<h4>Title 4</h4>

Les paragraphes

Pour afficher un paragraphe, sautez deuxl ignes et de taper son texte. Un seul saut de ligne correspond à un retour chariot et pas à un changement de paragraphe.

Le formatage HTML sera le suivant :

*** Export HTML ***
*******************
<p>a paragraph</p>

Les sauts de ligne simple

Effectuer un saut de ligne simple dans votre texte markdown n’aura aucun effet sur le fichier HTML. Sauf si vous terminez votre ligne par un double espace (ou plus que ça). Un retour chariot sera alors exporté, c’est la balise <br/>.

*** Code Markdown ***
*********************
Ligne sans espace à la fin
Ligne avec 2 espaces à la fin
Troisième ligne

*** export HTML ***
*******************
Ligne sans espace à la fin Ligne avec 2 espaces à la fin
<br/>Troisième ligne

L’emphase

Pour formater une partie de votre texte comme emphase, entourez le par des astérisques ou des underscores. Entourer par un signe unique passe en italique(emphase faible : *;) et par un double signe en gras (emphase forte: **;). Il est possible de combiner les deux. Un double tildes vous permettent de barrer le texte.

*** Code Markdown ***
*********************
Texte _dont_ certains __éléments__ sont formatés **pour _être_** en *italique*, en **bold** ou ~~barrés~~.

*** export HTML ***
*******************
<p>Texte <em>dont</em> certains <strong>éléments</strong> sont formatés <strong>pour <em>être</em></strong> en <em>italique</em>, en <strong>bold</strong> ou <del>barrés</del>.</p>

Les citations

Pour afficher un bloc de citation, commencez le paragraphe par un chevron fermant. Si votre bloc contient plusieurs lignes, vous pouvez faire des sauts de lignes à la main et toutes les ouvrir par un chevron fermant, mais ce n’est pas nécessaire. Ces bloc peuvent contenir d’autres éléments markdown comme des titres ou des listes.

*** Code Markdown ***
*********************
> une citation est un paragraphe ouvert par un chevron fermant

*** export HTML ***
*******************
<blockquote>une citation est un paragraphe ouvert par un chevron fermant</blockquote>

Les listes non ordonnée

Pour afficher une liste, commencez la ligne par une astérisque *, un moins -ou un plus +. Là encore, le choix n’a pas d’importance, mais il faut rester cohérent dans votre document. Pour ma part, j’ai tendance à utiliser l’astérisque qui se rapproche un peu plus de la puce affichée au final.

*** Code Markdown ***
*********************
* item
* item
* item

+ item
+ item
+ item

- item
- item
- item

*** Export HTML ***
*******************
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

Les listes ordonnées

Pour afficher une liste ordonnée,commencez la ligne par un nombre suivit d’un point. Pour que votre markdown soit plus lisible on peut d’ordonner proprement sa liste. Mais ce n’est pas nécessaire pour le rendu HTML.

*** Code Markdown ***
*********************
1. Item
1234. Item
3. Item
4. Item

*** Export HTML ***
*******************
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

Le bloc de code

Pour afficher un bloc de code, sautez deux lignes comme pour un paragraphe, puis indentez avec 4 espaces ou une tabulation.

*** Code Markdown ***
*********************
code

*** Export HTML ***
*******************
<pre><code>code</code></pre>

Le code inliné

Pour afficher du code dans une ligne, il faut l’entourer par des guillemets simples : (`).

*** Code Markdown ***
*********************
code

*** Export HTML ***
*******************
code>code</code>

Les filets ou barres de séparation

Pour afficher un filet de séparation, entrez <hr/>; dans votre texte ou au moins 3 astérisques *ou moins -sur une ligne entourée de sauts de lignes. Il est possible de les séparer par des espaces.

*** Code Markdown ***
*********************
***
---
- - -
* * *

*** Export HTML ***
*******************
<hr/>

Les liens

Il y a deux façons d’afficher un lien. De manière automatique en encadrant un lien par des chevrons. Il est alors cliquable et affiche l’url indiquée entre chevrons.

*** Code Markdown ***
*********************
<http://www.google.com>

*** Export HTML ***
*******************
<a href="http://google.com">http://www.google.com</a>

Ou en ajoutant des paramètres. Le texte à afficher est alors indiqué entre crochets suivit de l’adresse du lien entre parenthèses. Dans les parenthèses, à la suite du lien, on peut indiquer un titre entre guillemets. Ce titre sera affiché lors du survol du lien dans le navigateur. Il sera également lu par les navigateurs textuels pour les déficients visuels.

*** Code Markdown ***
*********************
[google] (http://www.google.com "link to google")

*** Export HTML ***
*******************
<a href="http://www.google.com" title="link to google">google</a>

Les images

Pour afficher une image, commencez par un point d’exclamation, puis indiquez le texte alternatif entre crochets. Ce dernier sera affiché si l’image n’est pas chargé et lu par les moteurs de recherche. Terminez par l’URL de l’image entre parenthèses. Cette URL peut être un lien vers le web ou un chemin local de ce type : /dossier_images/nom_de_mon_image.jpg. Après le lien vers l’image, il est possible d’ajouter un titre lu par les navigateurs textuels et affiché au survol de l’image par les autres.

*** Code Markdown ***
********************
![Google logo](https://www.google.fr/images/srpr/logo11w.png "google logo")

*** Export HTML ***
*******************
<img src = "https://www.google.fr/images/srpr/logo11w.png" title = "google logo" alt = "Google logo">

Les tableaux

Les tableaux n’existent pas dans la spécification markdown originale, mais ils sont présent dans la plupart des implémentations récentes.

L’idée globale est de “dessiner” des colonnes en les entourant avec des pipes |.Le nombre de colonnes est défini dans la première ligne du tableau et vous devez pour chaque ligne avoir le même nombre de colonnes, même si certaines sont vides.

La première ligne sera votre en-tête. La seconde ligne sépare cet en-tête du corps du tableau et définit l’alignement du texte dans les colonnes. Elle ne contient que des tirets - et des deux points :sont utilisés pour définir cet alignement. Pas de :ou juste un à gauche signifie que le texte sera aligné à gauche. Si la ligne de - est entourée de 2 :, le texte sera centré et si un seul :est présent à droite de a ligne, le texte sera aligné à droite.

*** Code Markdown ************************
| Header 1 | 2 header | header 3 |
| ------------- |: -------------: | ---------: |
| 1 Online | 1 | value |
| Line 2 | 2 | value |
| 3 Online | 3 | value |

Résultat affiché dans le navigateur :
Header 1 2 header header 3
1 Online 1 value
Line 2 2 value
3 Online 3 value
*** Export HTML **********************
<table>
<thead>
<tr>
<th>header 1</th>
<th align="center">header 2</th>
<th align="right">header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>line 1</td>
<td align="center">1</td>
<td align="right">value</td>
</tr>
<tr>
<td>row 2</td>
<td align="center">2</td>
<td align="right">value</td>
</tr>
<tr>
<td>line 3</td>
<td align="center">3</td>
<td align="right">value</td>
</tr>
</tbody>
</table>

Il n’est pas obligatoire que le tableau soit bien mis en forme dans le Markdown. Les |en début et en fin de ligne sont optionnels. Il est possible d’imbriquer des éléments d’emphase ou decodedans les tableaux. Il n’y a besoin que d’un seul -par colonne pour la séparation entre l’en-tête et le corps du tableau.

*** Code Markdown ***
*********************
1 header | header 2 | 3 header
- |:-: | -:line `1` | **1** | **_valeur_**
Line 2 | 2 | *Value*

Résultat affiché dans le navigateur :

1 header header 2 3 header
line 1 1 valeur
Line 2 2 Value

Échappement des caractères

Les caractères spéciaux ayant un sens en HTML et en markdown doivent être échappés. Pour les esperluètes &, chevrons <et autres caractères HTML, markdown se charge de les convertir en entités HTML lors de l’export. Mais si vous souhaitez utiliser ans votre texte des astérisques, accolades, dièses… à une position indiquant à markdown que vous désirer un formatage particulier, vous devez les échapper en les faisant précéder d’un antislash \. Sinon markdown les masquera et appliquera le formatage correspondant. Les caractères suivants sont à échapper :

\ * ` - _ [] () {} # + . !

Séparer des blocs

Deux blocs consécutifs se verront fusionnés. Ce sera le cas de deux blocs de citation ou de code par exemple. Et ce quel que soit le nombre de lignes que vous sauterez. Une solution simple est d’ajouter des commentaires html entre deux blocs. La syntaxe des commentaire est la suivante : <!--texte en commentaire -->;. Le texte sera ignoré par le navigateur. Votre commentaire peut tout à fait être vide.

*** Code Markdown ***
*********************
Citation 1> Citation 2

Résultat affiché dans le navigateur :

*** Code Markdown ***
*********************
> Citation 1<!-- -->> Citation 2

Résultat affiché dans le navigateur :

Utiliser Markdown sur un site Internet

Vous pouvez permettre aux utilisateurs de votre site d’utiliser le

Markdown pour la mise en forme des messages sur un forum par exemple.

Il existe des bibliothèques de Markdown dans tous les langages.

Ces bibliothèques prennent le langage Markdown en entrée et le traduisent en HTML.

La bibliothèque doit être incluse dans le code HTML.

Dans l’exemple la bibliothèque utilisé est markdown.php

Si vous voulez utiliser Markdown pour vos forums par exemple, les choses devraient se passer dans cet ordre :

  1. Le visiteur écrit un texte en Markdown lorsqu’il rédige un message sur vos forums ;
  2. Vous stockez ce texte tel quel en Markdown dans votre base de données ;
  3. Lorsqu’un autre visiteur veut lire le message du membre, vous récupérez le texte en Markdown et vous le faites traduire en HTML par la bibliotheque.
Sources :
https://openclassrooms.com
h
ttps://blog.wax-o.com/
http://markdownpad.com/

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.