Mark­down et WordPress

Les outils Mark­down pour WordPress

Mark­down est un lan­gage créé par John Gru­ber qui per­met d’écrire de manière plus lisible du code HTML sous forme de texte qui sera ensuite tra­duit par un outil adap­té. De nom­breux sites uti­lisent ce lan­gage (GitHub, Word​Press​.org,…). Word­Press pro­pose de rédi­ger les billets soit sous forme visuelle soit en HTML. Il était donc très ten­tant de réa­li­ser un plu­gin qui per­mette de taper les billets en Markdown.

Com­ment ça marche le Markdown ?

Le code HTML cou­rant de for­ma­tage de texte est rem­pla­cé par des rac­cour­cis simples à mémo­ri­ser et à taper. Par exemple :

**gras**
*italique*
<http://www.site.com>
### Titre

est équi­valent au code HTML

<strong>gras</strong>
<em>italique</em>
<a href="http://www.site.com">http://www.site.com</a>
<h3>Titre</h3>

Vous pou­vez trou­ver la syn­taxe de base ici : http://​daring​fi​re​ball​.net/​p​r​o​j​e​c​t​s​/​m​a​r​k​d​o​w​n​/​b​a​s​ics qui gère listes, titres, code… On voit avec cet exemple l’intérêt du Mark­down. Il est beau­coup plus simple à taper que du HTML et plus simple à relire.

Quel est l’intérêt du Markdown ?

La plu­part des édi­teurs visuels, et celui de Word­Press n’échappe pas à la règle, ne per­mettent pas une maî­trise pré­cise du ren­du final. Tra­vailler en HTML est donc sou­vent moins frus­trant. De plus dans le cas de billets avec beau­coup d’images inté­grées, l’édition est tout sim­ple­ment fas­ti­dieuse puisque le conte­nu prend une place folle en mode visuel.

Ci-des­sous, le même billet en mode HTML + Mark­down et en mode visuel

À ramar­quer qu’à par­tir de WP 4.3, vous pou­vez uti­li­ser quelques élé­ments de Mark­down en mode d’édition HTML de vos billets sans avoir de plu­gin dédié.

Les plu­gins

mise à jour du 07/09/2017 : ajout de WP Edi​tor​.MD.

mise à jour du 09/08/2015 : suite à l’article de Lumière de Lune sur les nou­veau­tés de WP 4.3, je suis obli­gé de mettre à jour ce billet. Les plu­gins consa­crés à Mark­down se résument plus ou moins au module Jet­pack.

Mark­down Extra

Mark­down Extra est une ver­sion enri­chie de Mark­down réa­li­sée par Michel For­tin. L’intérêt prin­ci­pal du pro­jet pour nous, c’est que M. For­tin a réa­li­sé un plu­gin pour Word­Press. Il n’est pas ins­tal­lable à par­tir de la base de plu­gins offi­ciels et vous le trou­ve­rez à cette adresse : http://​michelf​.ca/​p​r​o​j​e​t​s​/​p​h​p​-​m​a​r​k​d​o​wn/. Pour l’installer, il faut pla­cer le fichier PHP direc­te­ment dans le réper­toire plu­gins – il n’y a pas de réper­toire spé­ci­fique à ce plugin !
Les billets sont sau­ve­gar­dés dans la base de don­nées en lan­gage Mark­down et inter­pré­tés à l’appel de la page dans le navi­ga­teur. Le plu­gin gère aus­si le Mark­down dans les com­men­taires qui seront eux sau­ve­gar­dés en HTML directement.

- site du plu­gin : http://​michelf​.ca/​p​r​o​j​e​t​s​/​p​h​p​-​m​a​r​k​d​o​wn/
– com­pa­ti­bi­li­té à ce jour : WP 2.? > WP 3.5.1
– ver­sion tes­tée : 1.2.6

Module Jet­pack Markdown

Jet­pack contient depuis quelques temps un module de lan­gage Mark­down basé sur Mark­down Extra qu’il suf­fit d’activer pour pro­fi­ter de la fonc­tion. Les billets sont sau­ve­gar­dés sous deux formes : en HTML et en lan­gage Mark­down. Ain­si, si vous désac­ti­vez le module ou sup­pri­mez Jet­pack de votre ins­tal­la­tion, vous ne per­drez aucun contenu.
Le lan­gage est aus­si uti­li­sable dans les com­men­taires – mais ils sont auto­ma­ti­que­ment sau­ve­gar­dés en HTML et donc non édi­tables en Markdown.

Remarque : ce module prend la suc­ces­sion de deux plu­gins de réfé­rence à l’époque où j’ai écrit cet article. Mark­down on Save et Mark­down on Save Impro­ved sont deve­nus obso­lètes puisque le module est leur héri­tier direct.

La page d’explication du lan­gage sur le site Word​Press​.com : https://​en​.sup​port​.word​press​.com/​m​a​r​k​d​o​w​n​-​q​u​i​c​k​-​r​e​f​e​r​e​n​ce/

jetpack-markdown01


site de l’extension sur word​press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​j​e​t​p​a​ck/ ‑ ver­sion tes­tée : 3.6.1

WP Mark­down Editor

Un édi­teur Mark­down pour Word­Press qui reprend la base du module Jet­pack cf. mon billet qui lui est consa­cré ici.

JP Mark­down

Le module Jet­pack sans avoir à acti­ver Jet­pack. cf. mon billet qui lui est consa­cré ici.

Par­se­down For WordPress

Par­se­down for Word­Press se pré­sente comme le suc­ces­seur du plu­gin de Michel For­tin. Il annonce un ren­du HTML six fois plus rapide et un sui­vi pérenne et s’affiche dans les billets/pages et com­men­taires. Il est uti­li­sé dans de nom­breux “flat CMS” (des CMS sans base de don­nées, à base de fichiers).


site de l’extension sur word​press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​p​a​r​s​e​d​o​w​n​-​wp/ ‑ ver­sion tes­tée : 0.3

Mark­down QuickTags

Mark­down Quick­Tags trans­forme la par­tie édi­tion HTML en édi­teur Mark­down avec barre d’outils inté­grée, pré­vi­sua­li­sa­tion du ren­du et mode plein écran.
Incon­vé­nients : il faut un autre plu­gin pour faire le ren­du HTML – pas inté­gré. Soit le plu­gin de Michel For­tin (cf. plus haut), soit Mark­down for Word­Press and bbPress. Et le conte­nu conserve sa forme Mark­down – pas de ver­sion HTML.


site de l’extension sur word​press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​m​a​r​k​d​o​w​n​-​q​u​i​c​k​t​a​gs/ ‑ ver­sion tes­tée : 0.9.2

Mark­down­Bar

Mark­down­Bar rem­place la barre d’édition HTML par une barre d’édition Mark­down. Néces­site un plu­gin de ren­du HTML comme le module Jetpack.

markdown-bar


site de l’extension sur word​press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​m​a​r​k​d​o​w​n​bar ‑ ver­sion tes­tée : 1.0

WP Edi​tor​.MD

WP Edi​tor​.MD rem­place la barre d’édition HTML par une barre d’édition Mark­down. Il gère le ren­du HTML du site et est com­pa­tible avec Jet­Pack. Il pro­pose une fonc­tion de pré­vi­sua­li­sa­tion du résul­tat et gère l’insertion des médias via la bibliothèque.

markdown-editor


site de l’extension sur word​press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​w​p​-​e​d​i​t​o​r​md/ ‑ ver­sion tes­tée : 3.1

Et dans les types de billet personnalisés ?

Par défaut, le module de Jet­pack n’autorise l’utilisation de Mark­down que dans les billets et les pages mais pas les types de billet per­son­na­li­sés (cus­tom post types). Pour y remé­dier, vous pou­vez ajou­ter dans le fichier functions.php un mor­ceau de code :

 <?php
 add_action('init', 'my_custom_init');
 function my_custom_init() {
 add_post_type_support( 'product', 'wpcom-markdown' );
 }
 ?>

où “pro­duct” est le nom court de votre type de billet. Pour plus d’informations, cf. https://​jet​pack​.me/​s​u​p​p​o​r​t​/​m​a​r​k​d​o​wn/.

Outils externes

Le pro­blème avec Mark­down (ou le HTML d’ailleurs) c’est qu’on ne voit pas le résul­tat final direc­te­ment et il faut faire régu­liè­re­ment des pré­vi­sua­li­sa­tions de son billet pour repé­rer les fautes de syn­taxes éven­tuelles. Mark­down­Pad est un mer­veilleux outil qui vient juste de pas­ser en ver­sion 2. Il met en évi­dence la syn­taxe Mark­down, pro­pose des bou­tons de rac­cour­ci (un peu para­doxal) et un cor­rec­teur ortho­gra­phique. Vous pou­vez expor­ter éven­tuel­le­ment le fichier en mode HTML (pra­tique pour impor­ter le résul­tat dans LibreOf­fice ou Word), défi­nir un style CSS pour l’affichage (ce qui per­met de voir exac­te­ment le ren­du dans votre site) et, enfin, per­met de pré­vi­sua­li­ser le résul­tat dans une fenêtre sépa­rée. Il existe une ver­sion pro qui vous per­met de pro­fi­ter des dif­fé­rentes ver­sions de Mark­down, expor­ter en PDF, affi­cher la fenêtre de visua­li­sa­tion à l’horizontal, pro­fi­ter de plus de styles CSS

markdown05

- site du logi­ciel : http://​mark​down​pad​.com/

Autres outils

Au fur et à mesure, je trouve d’autres logi­ciels de pré­vi­sua­li­sa­tion de Mark­down. Ils gèrent tous la pré­vi­sua­li­sa­tion et pro­posent l’auto-correction.

  • Mark­pad : publi­ca­tion directe de vos textes (en HTML ou Mark­down) sur votre Word­Press via l’API XML-RPC. Pas de dic­tion­naire fran­çais pour le moment.

markpad

  • Mark­down Edit : entiè­re­ment tra­duit en fran­çais, seul le lan­gage Com­mon­Mark est pris en compte (une ver­sion uni­fiée des dif­fé­rents Mark­down), sau­ve­garde auto­ma­tique, ges­tion de snippet(variables à insé­rer pour les actions répétitives)…

markdown-edit

Il existe d’autres plu­gins d’utilisation très spé­ci­fique – pour P2, pour colo­ri­ser le code… Si vous connais­sez d’autres res­sources impli­quant Word­Press et Mark­down, n’hésitez pas à me le faire savoir.

Par­ta­gez

Si vous avez trou­vé une faute d’orthographe, infor­mez-nous en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée s’il vous plaît,.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Notifiez-moi les commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.

Aucun support n’est fourni pour les extensions testées. Vous pouvez utiliser Markdown pour les commentaires.