Pastacode : l’ultime plugin pour afficher du code dans WordPress

J’ai besoin d’insérer des exemples de code dans presque tous mes articles. Pour ce faire, j’utilisait des plugins de coloration syntaxique (crayon, code colorer, syntax highlighter…) mais je n’en avait jamais été satisfait.

Le code cassait systématiquement, les caractères étaient rencodés à chaque fois que je basculait de la fenêtre visuelle à la fenêtre texte, les retours chariots sautaient…

Dans ce contexte mes articles étaient dur à mettre à jour. C’était galère…

On a donc, avec Julio de BoiteAWeb, profité du week-end du WordCamp Europe pour faire une nuit blanche et coder Pastacode, notre plugin d’embed de code WordPress.

embed code wordpress plugin
Pastacode : un plugin d’embed de code WordPress

Nous avons pensé ce plugin afin qu’il réponde à deux problématiques :

La première est de pouvoir externaliser le code à insérer, pour pouvoir le versionner et le tenir à jour plus facilement. La seconde est d’appliquer un système de coloration léger, simple à paramétrer et customiser.

PrismJS, une librairie de coloration syntaxique

PrismJS est une librairie de coloration syntaxique développée en javascript par Lea Verou. Si nous avons utilisé cette solution, c’est qu’elle présente des avantages conséquents :

  1. elle est très légère (1.6k) et rapide a exécuter
  2. elle respecte la sémantique et le balisage HTML5
  3. c’est très simple de lui faire supporter de nouveaux langages, et de créer de nouveaux thèmes

Pastacode supporte donc par défaut : HTML, JavaScript, CSS, PHP, SASS, SQL, C, C++, Python, Java, Ruby, Bash et CoffeeScript.

En fonction du langage défini, la librairie parse le contenu des balises code, à la recherche d’éléments (variables, ponctuation, méthodes, commentaires, propriétés…) et les wrap dans des balises avec des classes qui serviront à la colorisation.

On peut si on le souhaite, via le hook pastacode_langs, réduire le nombre de langages proposés par le plugin.

De nombreux thèmes

Les éléments isolés par prismJS sont colorisés en CSS, via une feuille de style que l’ont peut choisir dans les options du plugin. Nous proposons 7 thèmes différents, mais vous pouvez très simplement créer le votre.

color syntaxique coloration
Coy, un des thèmes de couleur de Pastacode

Pour ce faire, le mieux est de partir d’une base de coloration syntaxique comme celle-ci. Il faudra ensuite la déposer dans le répertoire CSS de Pastacode, puis utiliser le hook option_pastacode_style pour l’appliquer.

Des plugins complémentaires

Prism est accompagné de plusieurs plugins qui ont été intégrés à Pastacode. Vous pouvez les activer via le menu de réglage dans l’administration.

  • line numbers : ce plugin permet tout simplement de numéroter les lignes
  • show invisible : il affiche un peit caractère pour symboliser les retours chariots
  • line highligther : pour spécifier les lignes « clef » du code, en les soulignant et en mettant une puce devant. Celui-ci s’active automatique lorsque l’on précise qu’une ou plusieurs lignes sont importantes

D’autres modules sont actuellement en beta et seront intégrés à Pastacode lorsqu’il seront plus stables.

L’import de code simplifié

Un des objectifs du plugin est d’être simple à utiliser. On a donc fait ce qu’on a pu pour vous éviter les prises de tête 😛

La fenêtre Past’a code

Le plugin propose d’ajouter dans vos articles du code provenant de plusieurs sources, qu’elles soient locales (fichiers, texte) ou distantes (webservices). Selon la nature du code, les informations nécessaires ne seront pas les mêmes.

Donc pour simplifier l’utilisation de pastacode, nous avons crée le bouton Past’a code. Un clic sur ce bouton ouvre une lightbox qui vous permettra de créer facilement un shortcode.

pastacode window
La fenêtre Past’a code

Les services de version, pour garder votre code à jour

Une des grosses fonctionnalité du plugin est de pouvoir importer le code à partir de service de version tels que Github, Gist, Pastbin ou Bitbucket. Une fois que vous avez insérer le shortcode dans l’article, le code sera automatiquement maintenu à jour.

Vous n’avez plus besoin de revenir éditer vos posts de blog.

Et si vous souhaitez, vous pouvez choisir d’afficher des versions spécifiques d’un même code (pour comparer les évolutions d’un même logiciel, par exemple).

Actuellement, Pastacode fonctionne avec les webservices cités plus haut, mais il est aussi possible de câbler d’autres providers ! Il suffit de suivre cet exemple, qui illustre comment relier Pastacode au SVN de WordPress.

Les embed de fichier, et le code manuel

Si vous n’avez pas envie de dépendre d’un service extérieur, le plugin permet d’ajouter du code manuel (contenu dans le shortcode pastacode). Il donne aussi la possibilité d’inclure du code à partir d’un fichier texte que vous auriez préalablement uploadé dans votre bilbiothèque 🙂

Le code en cache

Puisque les requêtes HTTP ont un coût en terme de performance, Pastacode met en cache chaque shortcode pour une durée déterminée.

Cette durée est parametrable via les options du plugin. On peut décider de ne pas mettre en cache, ou de retenir le shortcode à l’infini. Pour vider ce cache, il suffit simplement de changer les attributs du shortcode, ou de le flusher via les réglages de Pastacode.

Voilà une partie de ce qu’il y a à savoir sur ce plugin. N’hésitez pas à l’essayer et me dire ce que vous en pensez 🙂

Vous pouvez télécharger la version [baw_papii info= »version » plugin= »pastacode » cache= »24″/] de Pastacode sur l’extend de WordPress ou bien se rendre sur la page du Plugin.

Pour rentrer davantage dans le code, ou simplement en savoir plus, allez consulter l’article à Julio !

Et je remercie chaudement Daniel pour son coup de main sur la traduction du readme du plugin 😀

12 commentaires
Daniel B., il y a 4 années
La bonne nouvelle du jour qui fait plaisir à lire ! J’ai toujours galéré à trouver le bon plugin pour faire ça. Je m’en vais le tester et supprimer les autres plugins si il s’avère au top !
Gaël, il y a 4 années
Dire que je me suis pris le chou pour utiliser prismJS sur mon site… la semaine dernière !!

Mon petit doigt me dit que je vais bientôt utiliser une solution plus intéressante ( l’affichage depuis GitHub <3)

Merci à vous pour ce super plugin !

Frédéric J, il y a 4 années
Un plugin vraiment indispensable si vous insérez régulièrement des extraits de codes dans vos articles ! Merci beaucoup pour le partage car à ce jour WordPress ne répond pas du tout à cette problématique.
Tony, il y a 4 années
Les plugins pour afficher du code dans WordPress, il y en a des tonnes, mais aucun ne sort vraiment du lot. Ils ont tous leurs petits lots de bugs ou de petits détails pas pratiques. Bien joué pour en avoir créé un autre qui semble répondre à la problématique.
Christophe, il y a 4 années
Bon, il n’y a plus qu’à tester. Le besoin étant réel et insatisfait, tous mes voeux de réussite pour ce plugin !
Kattagami - Gilles Vauvarin, il y a 4 années
Bonjour Will,

Bravo, super boulot et très utile ce petit plugin. Je trouve le nom très bien choisi aussi 😉

J’ai une proposition d’évolution pour votre plugin:

Permettre d’activer la couleur syntaxique dans l’éditeur d’un custom post type de son choix.

Bon je le cache pas, c’est un besoin que j’ai pour un projet. J’ai créée un CPT dont je me sert pour ajouter des modules de contenu statiques écrit en HTML/CSS et y rajouter la couleur ça serait top 🙂

semiopat, il y a 3 années
Bonjour,
À la recherche de la perle rare, je voudrais savoir si Pastacode permet aussi d’afficher du code dans les commentaires… oui je sais, c’est un peu spécifique; pour des étudiants débutants, ce serait idéal qu’ils puissent poster leur extrait de code problématique dans les commentaires et que je puisse leur répondre par le même biais…
Th, il y a 2 années
Quelqu’un peut me dire ce que signifie cette ligne :

After each change on your DOM, you will have to run this javascript function : Prism.highlightAll();

Merci

Willy Bahuaud, il y a 2 années
Oui je peux te dire : Si tu fais des changements dynamiques dans ta page (chargement de certaines infos en ajax), il faut re-exécuter la fonction javascript Prism.highlightAll(); afin de re-parser les contenus pour appliquer prism sur d’éventuels nouveaux blocs de code 🙂
Th, il y a 2 années
oulala, bon merci
Nassim DAOUDI, il y a 2 années
Cela fait maintenant une semaine que j’essais de trouver un plug-in qui permet d’afficher du code sans que les caractères soit rencodés. Je test et je vous informe si ça marche.

Merci beaucoup.

CreaZo, il y a 2 années
Bonjour !

Extension parfaite ! JE me permet de me joindre à pour poser la même question, si Pastacode permet aussi d’afficher du code dans les commentaires.
On peut toujours passer par <code> Notre code</code> mais Pastacode est tellement génial que ce serait dommage de s’en priver !

En tout cas tes articles sont de qualités, merci énormément !

Laisser un commentaire

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

Publié le 15 octobre 2013
par Willy Bahuaud
Catégorie Développement WordPress