Markdown et WordPress

Les outils Markdown pour WordPress

Markdown 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 adapté. De nombreux sites utilisent ce langage (GitHub, WordPress.org,…). WordPress propose de rédiger les articles soit sous forme visuelle soit en HTML. Il était donc très tentant de réaliser un plugin qui permette de taper les articles en Markdown.

Comment ça marche le Markdown ?

Le code HTML courant de formatage de texte est remplacé par des raccourcis simples à mémoriser et à taper. Par exemple:

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

est équivalent 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 trouver la syntaxe de base ici: http://daringfireball.net/projects/markdown/basics qui gère listes, titres, code… On voit avec cet exemple l’intérêt du Markdown. Il est beaucoup 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 WordPress n’échappe pas à la règle, ne permettent pas une maîtrise précise du rendu final. Travailler en HTML est donc souvent moins frustrant. De plus dans le cas de articles avec beaucoup d’images intégrées, l’édition est tout simplement fastidieuse puisque le contenu prend une place folle en mode visuel.

Ci-dessous, le même article en mode HTML + Markdown et en mode visuel

À ramarquer qu’à partir de WP 4.3, vous pouvez utiliser quelques éléments de Markdown en mode d’édition HTML de vos articles sans avoir de plugin dédié.

Les plugins

mise à jour du 09/08/2015: suite à l’article de Lumière de Lune sur les nouveautés de WP 4.3, je suis obligé de mettre à jour ce article. Les plugins consacrés à Markdown se résument plus ou moins au module Jetpack.

Markdown Extra

Markdown Extra est une version enrichie de Markdown réalisée par Michel Fortin. L’intérêt principal du projet pour nous, c’est que M. Fortin a réalisé un plugin pour WordPress. Il n’est pas installable à partir de la base de plugins officiels et vous le trouverez à cette adresse: http://michelf.ca/projets/php-markdown/. Pour l’installer, il faut placer le fichier PHP directement dans le répertoire plugins – il n’y a pas de répertoire spécifique à ce plugin !
Les articles sont sauvegardés dans la base de données en langage Markdown et interprétés à l’appel de la page dans le navigateur. Le plugin gère aussi le Markdown dans les commentaires qui seront eux sauvegardés en HTML directement.

– site de l’extension : http://michelf.ca/projets/php-markdown/
– compatibilité à ce jour: WP 2.? > WP 3.5.1
– version testée: 1.2.6

Module Jetpack Markdown

Jetpack contient depuis quelques temps un module de langage Markdown basé sur Markdown Extra qu’il suffit d’activer pour profiter de la fonction. Les articles sont sauvegardés sous deux formes: en HTML et en langage Markdown. Ainsi, si vous désactivez le module ou supprimez Jetpack de votre installation, vous ne perdrez aucun contenu.
Le langage est aussi utilisable dans les commentaires – mais ils sont automatiquement sauvegardés en HTML et donc non éditables en Markdown.

Remarque: ce module prend la succession de deux plugins de référence à l’époque où j’ai écrit cet article. Markdown on Save et Markdown on Save Improved sont devenus obsolètes puisque le module est leur héritier direct.

La page d’explication du langage sur le site WordPress.com: https://en.support.wordpress.com/markdown-quick-reference/

jetpack-markdown01

– site de l’extension : Jetpack
– compatibilité à ce jour: WP 4.1 > WP 4.2.4
– version testée: 3.6.1

WP Markdown Editor

Un éditeur Markdown pour WordPress qui reprend la base du module Jetpack cf. mon article qui lui est consacré ici.

JP Markdown

Le module Jetpack sans avoir à activer Jetpack. cf. mon article qui lui est consacré ici.

Parsedown For WordPress

Parsedown for WordPress se présente comme le successeur du plugin de Michel Fortin. Il annonce un rendu HTML six fois plus rapide et un suivi pérenne et s’affiche dans les articles/pages et commentaires. Il est utilisé dans de nombreux « flat CMS » (des CMS sans base de données, à base de fichiers).
– site de l’extension : Parsedown for WordPress
– compatibilité à ce jour: WP ? > WP 4.2.4
– version testée: 0.3

Markdown QuickTags

Markdown QuickTags transforme la partie édition HTML en éditeur Markdown avec barre d’outils intégrée, prévisualisation du rendu et mode plein écran.
Inconvénients: il faut un autre plugin pour faire le rendu HTML – pas intégré. Soit le plugin de Michel Fortin (cf. plus haut), soit Markdown for WordPress and bbPress. Et le contenu conserve sa forme Markdown – pas de version HTML.

– site de l’extension : Markdown QuickTags
– compatibilité à ce jour: WP 3.0 > WP 4.2.4
– version testée: 0.9.2

MarkdownBar

MarkdownBar remplace la barre d’édition HTML par une barre d’édition Markdown. Nécessite un plugin de rendu HTML comme le module Jeptack.

markdown-bar

– site de l’extension : MarkdownBbar
– compatibilité à ce jour: WP 3.9 > WP 4.2.4
– version testée: 1.0

Et dans les types de contenu personnalisés ?

Par défaut, le module de Jetpack n’autorise l’utilisation de Markdown que dans les articles et les pages mais pas les types de contenu personnalisés (custom post types). Pour y remédier, vous pouvez ajouter 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 article. Pour plus d’informations, cf. https://jetpack.me/support/markdown/.

Outils externes

Le problème avec Markdown (ou le HTML d’ailleurs) c’est qu’on ne voit pas le résultat final directement et il faut faire régulièrement des prévisualisations de son article pour repérer les fautes de syntaxes éventuelles. MarkdownPad est un merveilleux outil qui vient juste de passer en version 2. Il met en évidence la syntaxe Markdown, propose des boutons de raccourci (un peu paradoxal) et un correcteur orthographique. Vous pouvez exporter éventuellement le fichier en mode HTML (pratique pour importer le résultat dans LibreOffice ou Word), définir un style CSS pour l’affichage (ce qui permet de voir exactement le rendu dans votre site) et, enfin, permet de prévisualiser le résultat dans une fenêtre séparée. Il existe une version pro qui vous permet de profiter des différentes versions de Markdown, exporter en PDF, afficher la fenêtre de visualisation à l’horizontal, profiter de plus de styles CSS…

markdown05

– site du logiciel: http://markdownpad.com/

Autres outils

Au fur et à mesure, je trouve d’autres logiciels de prévisualisation de Markdown. Ils gèrent tous la prévisualisation et proposent l’auto-correction.

  • Markpad: publication directe de vos textes (en HTML ou Markdown) sur votre WordPress via l’API XML-RPC. Pas de dictionnaire français pour le moment.

markpad

  • Markdown Edit: entièrement traduit en français, seul le langage CommonMark est pris en compte (une version unifiée des différents Markdown), sauvegarde automatique, gestion de snippet(variables à insérer pour les actions répétitives)…

markdown-edit

Il existe d’autres plugins d’utilisation très spécifique – pour P2, pour coloriser le code… Si vous connaissez d’autres ressources impliquant WordPress et Markdown, n’hésitez pas à me le faire savoir.

Partagez

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question 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.

Vous pouvez utiliser Markdown pour les commentaires

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :