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

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

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 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’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

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’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 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/ ‑ 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/.

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.

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’af­fi­chage (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.

markdown05

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

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

markdown-edit

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

marktext

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

caret-editor

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.

Abon­­nez-vous par mail à l’Écho des Plugins
Vous rece­vrez un mail pour vous préve­nir de chaque nouvel article publié sur ce blog

Ceci peut vous intéresser

2 commentaires

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

Laisser un commentaire

Votre adresse e-mail 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.

Ce site embarque des cookies pour vous offrir la meilleur expérience possible

Spelling error report

The following text will be sent to our editors: