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.

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 2.0 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 😀

Contacter l'auteur :

willy bahuaud

Je suis Willy Bahuaud, développeur spécialiste de WordPress. Mon travail est de créer d’intervenir sur la partie « technique » des projets WordPress de mes clients. Je développe des extensions (espaces membres, géolocalisation, annuaires…) pour étendre les fonctionnalités d’un site au delà de ce que WordPress ou le thème en place ne le permettent. J'interviens aussi régulièrement sur la migration de contenus, l’optimisation de thème, la création de passerelles de données, l’adaptation de plugins premium et la création de sites .
Vous pouvez me contacter pour me faire part de vos projets.

12 commentaires

  1. Par Daniel B. — Il y a 3 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 !
  2. Par Gaël — Il y a 3 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 !

  3. Par Frédéric J — Il y a 3 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.
  4. Par Tony — Il y a 3 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.
  5. Par Christophe — Il y a 3 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 !
  6. Par Kattagami - Gilles Vauvarin — Il y a 3 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 🙂

  7. Par semiopat — Il y a 2 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…
  8. Par 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

  9. Par 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 🙂
  10. Par Th — Il y a 2 années
    oulala, bon merci
  11. Par 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.

  12. Par 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 !

Commenter

Les sites qui parlent de cet article