Markdown et WordPress

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 Markdown.

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'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 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'édition 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'édition HTML de vos billets sans avoir de plugin dédié.

Les plugins

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

Markdown Extra

Mark­down Extra est une version enri­chie de Mark­down réali­sée par Michel Fortin. L'inté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'installer, 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'appel 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 directement.

• 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'activer 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 contenu.
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 Markdown.

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'explication 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/

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

Jetpack – WP Secu­ri­ty, Backup, Speed, & Growth

Auteur(s) : Automattic

Version actuelle : 14.0

Dernière mise à jour : 7 novembre 2024

jetpack.14.0.zip

74%Évalua­tions 4 000 000+Instal­la­tions WP 6.5+Néces­saire

JP Markdown

Mise à jour du 12 mai 2020 : je découvre que JP Mark­down a été reti­ré du dépôt. Il fonc­tion­nait parfai­te­ment et je vais le propo­ser en téléchargement.

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'affiche 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'édition HTML par une barre d'édition Mark­down. Néces­site un plugin de rendu HTML comme le module Jetpack.

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 bibliothèque.

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

WP Editor​.md – The Perfect Word­Press Mark­down Editor

Auteur(s) : LuRenJiasWorld

Version actuelle : 10.2.1

Dernière mise à jour : 20 novembre 2022

wp-editormd.10.2.1.zip

82%Évalua­tions 1 000+Instal­la­tions 5.0.0Néces­saire

Et dans les types de billet personnalisés ?

Par défaut, le module de Jetpack n'autorise l'utilisation 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' );
     }
     ?>

où product est le nom court de votre type de billet. Pour plus d'informations, cf. https://​jetpack​.me/​s​u​p​p​o​r​t​/​m​a​r​k​d​o​wn/.

Il existe d'autres plugins d'utilisation 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ésitez pas à me le faire savoir.

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 éventuelles.

Il existe de nombreux éditeurs de texte orien­tés Mark­down qui offrent un confort de travail certain.
Mise en évidence la syntaxe Mark­down, boutons de raccour­ci (un peu para­doxal), correc­teur ortho­gra­phique et auto­com­plé­tion du code Mark­down. 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) ou Pdf dans certains cas, défi­nir un style CSS pour l'affichage (ce qui permet de voir exac­te­ment le rendu dans votre site) et, enfin, prévi­sua­li­ser le résul­tat dans une fenêtre séparée.

Voici une liste non exhaus­tive de programmes que j’ai testés.

Éditeurs

• Mark­down­Pad : pendant long­temps mon chou­chou. Après la sortie de la version 2, le déve­lop­pe­ment semble à l’arrêt.

• Mark­pad (déve­lop­pe­ment arrê­té) : 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.

• 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étitives)…

• Mark Text est un excellent outil foca­li­sé sur l’ergononomie : auto­com­plé­tion, choix de thèmes, diffé­rents langages, confort visuel… Mark Text se démarque des autres programmes présen­tés ici en affi­chant direc­te­ment l’interprétation du code (mais chaque élément reste éditable en Mark­down en cliquant dessus). Ça peut être très confor­table (l’insertion d’objets comme les tableaux sont d’une simpli­ci­té appré­ciable) mais vous pour­rez être frus­tré de ne pas avoir le contrôle total sur votre code.

• Caret (payant) : proba­ble­ment le mieux pensé pour l’utilitateur avec des fonc­tion­na­li­tés inédites très orien­tées clavier. Sa gestion de sélec­tion étendue/​restreinte via un raccour­ci clavier est une idée brillante pour le langage Mark­down et la gestion des tables est excel­lente. Une version 2 est en train d’être finalisée.

Faire le pont entre l’éditeur de bureau et votre page d’édition

Taper du Mark­down dans son éditeur favo­ri et ensuite copier/​coller le texte dans la page d’édition de votre Word­Press est assez fasti­dieux. Il existe une exten­sion pour navi­ga­teur appe­lée withExE­di­tor qui permet de trans­fé­rer auto­ma­ti­que­ment tout ce que vous tapez vers votre champ d’édition Word­Press. Mais son instal­la­tion est malai­sée car elle néces­site une instal­la­tion d’un programme pour la faire fonc­tion­ner. Lisez soigneu­se­ment la documentation.

• pour Chrome : voir ici
• pour Fire­fox : https://​addons​.mozilla​.org/​f​r​/​f​i​r​e​f​o​x​/​a​d​d​o​n​/​w​i​t​h​e​x​e​d​i​t​or/