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'outils. 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 (''). Il remplacera automatiquement ces caratères par les entités correspondantes. Par ailleurs, le système est suffisemment bien fait pour faire la différences entre les caractères à échapper et les entités mise en dur.
AT&T Test 4 sera convertit par Markdown en
AT&T Test 4 < 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.
Toutes 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.
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.
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://exemple.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://exemple.com/>
sera remplacé par
<a href="http://exemple.com/">http://exemple.com/
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 :
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 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.
Commentaires
truffo
C'est un format fait pour plus ou moins industrialisé l'écriture Web. Par contre, je voulais voir ce que ca donné pour les commentaires c'est pas très concluant, je vais le désactiver pour ce type de contenu.
Khalil TABBAL
@Olivier J'ai eu la même peur que toi en testant la bestiole sur les listes ordonnées ça m'a rassuré :)
@Truffo Je pense que ce type d'outil risque dans un premier temps d'effrayer plus d'une personne. Je n'ai pas testé le plugin Wordpress mais sur le lien de test que tu soumet il faut à chaque fois soumettre le contenu pour prévisualiser le résultat, ce qui est très contraignant pour l'utilisateur.
Tu trouves que :
Titre de niveau 1 (balise H1)est plus intuitif que = Titre 1=
bon allez je te l'accorde la syntaxe est un peu plus intuitive que celle de nos amis les wikis mais bon ça reste un drôle de charabia pour
je serai assez curieux pour avoir un retour d'un néophyte.
truffo
Oui en en effet, va falloir que je rajoute un jolie message d'aide pour préciser la syntaxe utilisé dans les billets.
Par ailleurs, je me suis permet de modifier le source de ton commentaire pour remettre les différents cas de figure.
Olivier Clavel
Ha bein merde.... tes commentaires utilisent markdown !!! donc mon exemple tombe totalement à l'eau. Bref, on met n'importe quel chiffre devant la ligne suivit d'un point et ca marche.
Olivier Clavel
Quand j'ai vu la syntaxe pour les liste ordonnée, je me suis dit: "aie aie aie quand tu veux réordonner la liste !!!". La doc (http://daringfireball.net/projects/markdown/syntax) m'a vite rassuré: le chiffre utilisé n'a aucune importance (et c'est logique une fois qu'on y réfléchi). Les 3 exemples suivants produise donc exactement le même html.
ou
ou encore
La précision vaut quand même le coup :)
Ajouter un commentaire