Pastacode : la coloration syntaxique de Prism.js dans WordPress

Suite à une requête de @GizMecano concernant le manque de coloration syntaxique sur les bouts de code présents dans mes articles, j’ai installé le script Prism.js dont le thème Coy colle particulièrement avec ma charte graphique. Prism, c’est cool à condition d’avoir envie d’ajouter à la main le type de langage utilisé sur chaque balise <code> à colorer ! C’est pourquoi, je me suis tourné vers l’extension Pastacode de @BoiteAWeb et @willybahuaud qui reprend Prism tout en permettant d’ajouter du code directement depuis la barre d’outils de WordPress.

Utilisation

Précisez le langage que vous voulez afficher :

• HTML,
• CSS,
• Javascript,
• PHP,
• C,
• C++,
• Java,
• Sass,
• Python,
• Ruby,
• SQl,
• Coffeescript.

Choisissez votre mode d’insertion et remplissez les champs adéquats :

• Manuel (on choisit son langage et on copie-colle),
• Depuis Github,
• Gist,
• Bitbucket,
• pastebin,
• Depuis un fichier présent dans la bibliothèque.

Ça fonctionne bien ?

Oui, mais il faudra « reshortcoder » les codes présents dans les anciens articles et à-priori, pas de coloration pour les bouts de code inline.

Apparition de deux barres de défilement assez disgracieuses : une pour la balise <pre> et l’autre pour la balise <code>. J’ai contourné le problème vite fait mal fait pour l’instant en modifiant très légèrement la CSS du plugin en mettant à zéro le padding sur l’élément <pre> et en augmentant le padding à 1.5em sur l’élément <code> :

[pastacode lang= »css » message= »prism-coy.css » highlight= » » provider= »manual »]

/* Code blocks */
pre[class*="language-"] {
	/* ... */
	padding: 0;
	/* ... */
}

[/pastacode]

[pastacode lang= »css » message= »prism-coy.css » highlight= » » provider= »manual »]

code[class*="language"] {
	/* ... */
	padding: 1.5em;
	/* ... */
}

[/pastacode]

Par ailleurs, lorsqu’on ajoute du code, ce dernier n’est plus visible dans l’éditeur de WordPress quand on est en mode Visuel. Il faut passer en mode Texte pour se relire, ou alors cliquer sur l’icône de modification du code que l’on a copié-collé. Du coup, il vaut mieux préciser le champs Titre du code pour s’y retrouver.

Conclusion

Malgré les bémols précédents, Pastacode semble être la solution idéale pour ajouter la coloration syntaxique dans les blocs de code de son site sans être obligé de passer par le mode Texte. Tout peut se faire en passant par l’éditeur Visuel de WordPress.

→ Installer l’extension Pastacode.