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.

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.

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.

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 😀