Markdown et WordPress 5.0+

Mise à jour du 7 juin 2019 — L’affreux Guten­berg étant la nouvelle norme et après quelques mois sans possi­bi­li­tés d’utiliser correc­te­ment Mark­down dans les blocs, une solu­tion pérenne est désor­mais dispo­nible. L’extension Jetpack (et d’autres d’ailleurs) propose un bloc Mark­down, vous pouvez en lire plus ici.

Les outils Markdown pour WordPress

Mark­down est un langage créé par John Gruber qui permet d’écrire de manière plus lisible du code HTML sous forme de texte qui sera ensuite traduit par un outil adap­té. De nombreux sites utilisent ce langage (GitHub, Word​Press​.org,…). Word­Press propose de rédi­ger les billets soit sous forme visuelle soit en HTML. Il était donc très tentant de réali­ser un plugin qui permette de taper les billets en Mark­down.

Comment ça marche le Markdown ?

Le code HTML courant de forma­tage de texte est rempla­cé par des raccour­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 pouvez trou­ver la syntaxe 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’in­té­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 plupart des éditeurs visuels, et celui de Word­Press n’échappe pas à la règle, ne permettent pas une maîtrise précise du rendu final. Travailler en HTML est donc souvent moins frus­trant. De plus dans le cas de billets avec beau­coup d’images inté­grées, l’édi­tion est tout simple­ment fasti­dieuse puisque le conte­nu prend une place folle en mode visuel.

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

À ramar­quer qu’à partir de WP 4.3, vous pouvez utili­ser quelques éléments de Mark­down en mode d’édi­tion HTML de vos billets sans avoir de plugin dédié.

Les plugins

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

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

Markdown Extra

Mark­down Extra est une version enri­chie de Mark­down réali­sée par Michel Fortin. L’in­té­rêt prin­ci­pal du projet pour nous, c’est que M. Fortin a réali­sé un plugin pour Word­Press. Il n’est pas instal­lable à partir de la base de plugins 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’ins­tal­ler, il faut placer le fichier PHP direc­te­ment dans le réper­toire plugins – il n’y a pas de réper­toire spéci­fique à ce plugin !
Les billets sont sauve­gar­dés dans la base de données en langage Mark­down et inter­pré­tés à l’ap­pel de la page dans le navi­ga­teur. Le plugin gère aussi le Mark­down dans les commen­taires qui seront eux sauve­gar­dés en HTML direc­te­ment.

– site du plugin : http://​michelf​.ca/​p​r​o​j​e​t​s​/​p​h​p​-​m​a​r​k​d​o​wn/
– compa­ti­bi­li­té à ce jour : WP 2.? > WP 3.5.1
– version testée : 1.2.6

Module Jetpack Markdown

Remarque préa­lable : pour l’utilisation de Mark­down dans Guten­berg, vous aurez besoin de Jetpack, cf. plus haut.

Jetpack contient depuis quelques temps un module de langage Mark­down basé sur Mark­down Extra qu’il suffit d’ac­ti­ver pour profi­ter de la fonc­tion. Les billets sont sauve­gar­dés sous deux formes : en HTML et en langage Mark­down. Ainsi, si vous désac­ti­vez le module ou suppri­mez Jetpack de votre instal­la­tion, vous ne perdrez aucun conte­nu.
Le langage est aussi utili­sable dans les commen­taires – mais ils sont auto­ma­ti­que­ment sauve­gar­dés en HTML et donc non éditables en Mark­down.

Remarque : ce module prend la succes­sion de deux plugins 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’ex­pli­ca­tion du langage sur le site Word​Press​.com : https://​en​.support​.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/ ‑ version testée : 3.6.1

WP Markdown Editor

Un éditeur Mark­down pour Word­Press qui reprend la base du module Jetpack cf. mon billet qui lui est consa­cré ici.

JP Markdown

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

Parsedown For WordPress

Parse­down for Word­Press se présente comme le succes­seur du plugin de Michel Fortin. Il annonce un rendu HTML six fois plus rapide et un suivi pérenne et s’af­fiche dans les billets/​pages et commen­taires. Il est utili­sé dans de nombreux “flat CMS” (des CMS sans base de donné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/ ‑ version testée : 0.3

MarkdownBar

Mark­down­Bar remplace la barre d’édi­tion HTML par une barre d’édi­tion Mark­down. Néces­site un plugin de rendu 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 ‑ version testée : 1.0

WP Editor​.MD

WP Editor​.MD remplace la barre d’édition HTML par une barre d’édition Mark­down. Il gère le rendu HTML du site et est compa­tible avec JetPack. Il propose une fonc­tion de prévi­sua­li­sa­tion du résul­tat et gère l’insertion des médias via la biblio­thè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/ ‑ version testée : 3.1

Et dans les types de billet personnalisés ?

Par défaut, le module de Jetpack n’au­to­rise l’uti­li­sa­tion de Mark­down que dans les billets et les pages mais pas les types de billet person­na­li­sés (custom post types). Pour y remé­dier, vous pouvez ajou­ter dans le fichier functions.php un morceau de code :

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

product est le nom court de votre type de billet. Pour plus d’in­for­ma­tions, cf. https://​jetpack​.me/​s​u​p​p​o​r​t​/​m​a​r​k​d​o​wn/.

Outils externes

Le problè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 syntaxes éven­tuelles. Mark­down­Pad est un merveilleux outil qui vient juste de passer en version 2. Il met en évidence la syntaxe Mark­down, propose des boutons de raccour­ci (un peu para­doxal) et un correc­teur ortho­gra­phique. Vous pouvez expor­ter éven­tuel­le­ment le fichier en mode HTML (pratique pour impor­ter le résul­tat dans LibreOf­fice ou Word), défi­nir un style CSS pour l’af­fi­chage (ce qui permet de voir exac­te­ment le rendu dans votre site) et, enfin, permet de prévi­sua­li­ser le résul­tat dans une fenêtre sépa­rée. Il existe une version pro qui vous permet de profi­ter des diffé­rentes versions de Mark­down, expor­ter en PDF, affi­cher la fenêtre de visua­li­sa­tion à l’ho­ri­zon­tal, profi­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 proposent l’au­to-correc­tion.

  • 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 diction­naire fran­çais pour le moment.

markpad

  • Mark­down Edit : entiè­re­ment traduit en fran­çais, seul le langage Common­Mark est pris en compte (une version unifiée des diffé­rents Mark­down), sauve­garde auto­ma­tique, gestion de snippet(variables à insé­rer pour les actions répé­ti­tives)…

markdown-edit

Il existe d’autres plugins d’uti­li­sa­tion très spéci­fique – pour P2, pour colo­ri­ser le code… Si vous connais­sez d’autres ressources impli­quant Word­Press et Mark­down, n’hé­si­tez pas à me le faire savoir.

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.

Dernière modification: 7 juin 2019

Commentaires

Li-An

Vous devez essayer ce plugin Word­Press Mark­down, cela vous fera gagner beau­coup de temps en écri­ture.

https://​word​press​.org/​p​l​u​g​i​n​s​/​w​p​-​g​i​t​h​u​b​e​r​-​md/

    Li-An
    Auteur

    Merci, mais une exten­sion WP est toujours moins souple qu’un éditeur externe (en plus celle-ci va “casser” tous mes précé­dents articles Mark­down).

Écrire une réponse ou un commentaire

Votre adresse email ne sera pas publiée.

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