Oso, an artwork by Okuda San Miguel in London, Toa Heftiba on Unsplash Oso, an artwork by Okuda San Miguel in London, Toa Heftiba on Unsplash

Utiliser la coloration syntaxique PrismJS avec WordPress

PrismJS de Lea Verou est une solution JavaScript de coloration syntaxique. PrismJS est simple d'utilisation, basé sur les standards HTML5. Il est léger et performant, personnalisable à l'aide de thèmes et extensible.

Je vous propose une procédure pour intégrer PrismJS dans votre thème WordPress (basée sur le thème Twenty Twelve) et ainsi rendre l'utilisation d'un plugin inutile.

Téléchargement de PrismJS

PrismJS est composé de deux fichiers: prism.js et prism.css.

Sur la page de téléchargement, on trouve les options suivantes:

  • niveau de compression (pour le fichier js) : version de de développement si vous souhaitez apporter des modifications ou version minifiée pour l'environnement de production.
  • thèmes : PrismJS propose 6 thèmes.
  • langages : liste des langages reconnus.
  • plugins : liste de plugins pour ajouter des fonctionnalités.

Une fois les options choisies, cliquez sur download JS et download CSS.

Configuration dans WordPress

Upload des fichiers

On commence par uploader les fichiers PrismJS dans notre thème WordPress :

  • prism.css dans wp-content/themes/votre-theme/css/
  • prism.js dans wp-content/themes/votre-theme/js/

Appel du fichier prism.css

Pour afficher prism.css dans l'élément wp_head(), on ajoute l'appel après celui de la css générale du thème dans la fonction twentytwelve_scripts_styles() aux environ de la ligne 149 dans le fichier functions.php.

/* PHP */
// Loads our main stylesheet.
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

// Ajouter la ligne ci-dessous pour appeler le fichier prism.css dans wp_head()
wp_enqueue_style( 'prismcss', get_template_directory_uri() . 'prism.css' );

Appel du fichier prism.js

Toujours dans le fichier functions.php, on crée une fonction pour appeler le fichier prism.js dans l'élément wp_footer() situé après le footer.

/* PHP */
function votre-theme_footerscripts() {
wp_enqueue_script( 'prismjs', get_template_directory_uri() . '/js/prism.js');
}
add_action('wp_footer', 'votre-theme_footerscripts');

Utilisation de PrismJS

PrismJS utilise la spécification HTML5 class="language-xxxx" ou class="lang-xxxx" pour définir le type de code.
La méthode recommandée pour marquer un bloc de code est un élément <pre> avec un <code> à l'intérieur

<!-- exemple -->
<pre><code class="language-css">p { color: #ff0002; }</code></pre>

Pour aller plus loin dans l'utilisation de PrismJS et de ses plugins, je vous renvoie vers la page syntaxe à utiliser.

Pensez à convertir les caractères spéciaux quand vous écrivez du code HTML. Postable est un petit utilitaire très pratique pour ça.
Un dernier mot sur l'optimisation : pour diminuer le nombre de requêtes, je vous suggère de regrouper vos feuilles de style dans un seul fichier minifié et faire de même pour vos fichiers JavaScript.

PrismJS et Gutenberg
Pour utiliser PrismJS dans Gutenberg, le nouvel éditeur de WordPress, il suffit d'ajouter un bloc de type Code, d'y saisir le code et d'ajouter la classe css du langage dans l'option Avancé du Bloc. Concernant le code HTML, il est possible de le saisir directement sans qu'il soit nécessaire de le convertir en caractères spéciaux.

Quelques langages supportés par PrismJS

Langage classe CSS
Bash language-bash
C language-c
CoffeeScript language-coffeescript
C++ language-cpp
C# language-csharp
CSS language-css
HTTP language-http
Java language-java
JavaScript language-javascript
Markup (HTML/XML) language-markup
PHP language-php
Python language-python
Ruby language-bass
SCSS language-scss
SQL language-sql

Liens

  • Pour tout savoir sur PrismJS
  • Le site de Lea Verou
  • Postable est un utilitaire pour convertir le HTML en caractères spéciaux