Markdown : le langage de l'écriture Web efficace

Markdown : le langage de l'écriture Web efficace

La rédaction d’un document pour le Web n’est pas chose facile. Les contraintes de l’internet moderne impose un balisage cohérent. L’édition WYSIWYG ne jamais vraiment convaincu, j’ai toujours préféré écrire le source à la main, plutôt que de passer par ce genre d’outil. Mais, il faut bien reconnaitre qu’écrire manuellement le code HTML comporte un certain nombre risque (faute de frappes, balises mal fermés, incohérence du code entre les différents contenus, …). Les syntaxes de styles Wiki apportent un certain confort dans l’écriture et une plus grand sécurité dans le code généré. Markdown est certainement le langage le plus intéressant pour l’écriture de contenu Web. Il est disponible sur le site de Daring Fireball, et une extension que je qualifirait d’indispensable se trouve sur le site Michel Fortin.

Philosophie de Markdown

Markdown est un langage qui facilitent non seulement la lecture mais aussi l’écriture de contenu Web. Il s’inspire non seulement des autres filtres de conversion de textes vers HTML existants, mais il s’appuie surtout sur le format du courrier électronique en mode texte.

Markdown n’est pas un langage de remplacement pour le HTML, il n’a pas cette vocation, et il ne l’aura certainement jamais. Sa syntaxe correspond à un petit sous ensemble du langage HTML. L’idée est simplement de faciliter la lecture, l’écriture, la maintenance des textes en prose. Le HTML reste le format de publication, Markdown est le langage d’écriture. Il est donc logique de pouvoir utiliser des éléments du langage HTML dans n’importe quelle document.

### Quelques points fort

#### Échappements automatique des caractères

Markdown échappement automatique les caractères qui doivent être obligatoirement échappé en HTML (’<,’ ‘&’ et ‘>’). Il remplacera automatiquement ces caratères par les entités correspondantes. Par ailleurs, le système est suffisamment bien fait pour faire la différences entre les caractères à échapper et les entités mise en dur.

 

AT&T <strong>Test</strong> 4 < 5 

sera convertit par Markdown en

 

AT&amp;T <strong>Test</strong> 4 &lt 5 

Paragraphes et sauts de lignes

Un paragraphe est simplement une ou plusieurs lignes de texte séparés par une ligne ou plusieurs lignes de vides. Les sauts de lignes de type
dont l’utilisation est à bannir du Web sont possibles en mettant 2 espaces avant un saut de ligne ou en mettant directement la balise HTML
. Mais, bien entendu personne ne fait ce genre de bétise dans un site Web.

Titres

Le balises des titres facilité la lecture du document. Un bonne exemple vaut mieux qu’un long discours.

 

Titre de niveau 1 (balise H1) 

============================= 

Titre de niveau 2 (balise H2) ----------------------------- 

# Titre de niveau 1 
## Titre de niveau 2 
###### Titre de niveau 6 

Bloc de citation

Markdown prend son inspiration dans le format textuelle des courriers électronique, comme pour ce format il utilise le caractère > pour délimiter les blocs de citation. Si vous êtes familier avec le format de citation dans les emails, alors vous savez comment créer un bloc de citation avec Markdown.

 
> Ceci est un bloc de citation avec deux paragraphes. Lorem ipsum dolor 
> sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere 
> lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, 
> risus. 
> > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse 
> id sem consectetuer libero luctus adipiscing. 

Seul le premier “>” est obligatoire, les autres sont uniquement la pour faire jolie est faciliter la lecture. On peut imbriquer les blocs de citation

 
> Ceci est le premier niveau de citation. > > > Ceci est un bloc de citation imbriqué. 
> > Retour au premier niveau. 

Toute la syntaxe Markdown peut être utilisés dans les citations, on peut y mettre des listes, des titres, de l’emphase légère ou forte.

Les listes

Markdown supporte les listes ordonnées et non-ordonnées. Les listes non-ordonnées utilisent l’astérisque, le plus, ou encore le tiret en tant que marqueur de liste.

 
- Rouge 

- Vert 

- Bleu 

Les listes ordonnées utilisent un nombre suivit d’un point :

 
1. Bird 

2. McHale 

3. Parish 

Pour écrire une liste qui se lit bien, vous pouvez ajouter une indentation après chaque saut de ligne manuel :

 
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Les liens

Markdown supporte deux styles de liens : incorporé au texte et par référence. Dans les 2 cas, le texte est délimité par des crochets.

Lien incorporé

Il n’ont pas beacoup d’intéret par rapport à une simple balise HTML <a>.

 

Ceci est [un exemple](http://example.com/ "Titre") de lien incorporé. 
Lien par référence

Les liens par référence sont beaucoup plus intéressant, il permettent d’améliorer grandement la lisibilité des liens dans les textes en prose. Sa syntaxe rappelle celle des références bilbiographiques.

 

Ceci est [un exemple][id] de lien en référence. ... [id]: http://exemple.com/ "Titre facultatif" 

Il faut noter que la référence est uniquement utilisé lors de la transformation du texte en HTML, elle ne sont pas rendu en bas de page comme on pourrait le croire.

 



Je reçoit 10 fois plus de trafic de [Google][] que de [Yahoo][] ou [MSN][]. [google]: http://google.com/ "Google" [yahoo]: http://search.yahoo.com/ "Yahoo Search" [msn]: http://search.msn.com/ "MSN Search" 

L’exemple précédent générera le code suivant :

 



<p>Je reçoit 10 fois plus de trafic de <a href="http://google.com/" title="Google">Google</a> que de <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> ou <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p> 
Liens automatiques

Markdown comprend dans sa syntaxe un raccourci permettant de créer des liens « automatiquement » pour les URL et les adresses de courrier électronique : entourez tout simplement l’adresse par des chevrons.

 

<http://example.com/> 

sera remplacé par

 

    <a href="http://example.com/">http://exAmple.com/</a> 

Emphase

Markdown interprète les astérisques (*) et les traits soulignés (_) pour indiquer l’emphase. Du texte placé entre deux * ou _ sera entouré par l’élément HTML <em> ; avec des doubles * ou _ , le texte sera entouré de l’élément <strong>. Par exemple, cette entrée :

 
*astérisques simples*
_traits soulignés simples_ 
**astérisques double**** 
__traits soulignés doubles____ 

produira :

 

<em>astérisques simples</em> 

<em>traits soulignés simples</em> 

<strong>astérisques double</strong> 

<strong>traits soulignés doubles</strong> 

Images

Markdown utilise une syntaxe d’image qui ressemble à la syntaxe des liens, permettant deux variantes : incorporé et par référence. La syntaxe des images incorporées ressemble à ceci :

 

![Texte alternatif](/chemin/vers/img.jpg) ![Texte alternatif](/chemin/vers/img.jpg "Titre optionnel") 

La syntaxe des images par référence ressemeble à ceci :

 ![Texte alternatif][id] [id]: url/vers/image "Titre optionnel" 

Markdown n’a pas de syntaxe pour spécifier les dimensions d’une image. C’est dommage quand on connait l’importance en terme de performances de donner les dimensions d’une image.

Intégration de Markdown dans Wordpress

L’éxécutable Perl est bien sûr le script de référence. Mais, pouvoir l’utiliser dans un moteur de Blog tel que Wordpress est beaucoup mieux. L’extension Markdown for WordPress and bbPress permet d’utiliser Markdown en mode source. Les boutons d’aides pour les medias et les éléments html les plus fréquent restent bien entendu actif. Markdown permettant de mélanger allégremment sa syntaxe avec le langage HTML garantie que ces boutons restent parfaitement fonctionnel.

Personnellement, je préfère passer par mon éditeur de texte préféré (jEdit)] pour écrire, il me fournit une coloration syntaxique et autres fonctionnalités habituels. Ensuite, il me suffit de faire un copier / coller dans la zone d’édition de Wordpress pour avoir un article correctement balisé. Markdown est vraiment un langage d’écriture Web qui mérite à être connu, sa syntaxe est plus intuitive que les langages pour les wiki. On gagne vraiment en productivité.

Si vous voulez tester ce langage, Michel Fortin met à disposition une page de test de Markdown.

comments powered by Disqus

Voir aussi

A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019