Comment intégrer l’éditeur Gutenberg avec la coloration syntaxique de Prism dans WordPress

Le bloc « Code » par défaut dans Gutenberg ne prend pas en charge la coloration syntaxique. La bibliothèque Prism.js résout ce problème. Ce guide décrit comment configurer Prism.js, y compris une solution automatique pour les problèmes d’affichage des caractères HTML < et >.

Le problème : Conflit avec les balises HTML

Un navigateur interprète les caractères < et > à l’intérieur des blocs de code comme des balises HTML, ce qui casse la mise en page.

La solution : L’échappement des caractères

Pour un affichage correct, les caractères spéciaux doivent être remplacés par des entités HTML :

• < est remplacé par <
• > est remplacé par >

Ce processus est automatisé à l’aide d’un filtre WordPress pour éviter le remplacement manuel et les problèmes avec l’éditeur Gutenberg.

Configuration étape par étape

Étape 0 : Préparer un thème enfant

Toutes les modifications doivent être effectuées dans un thème enfant (child theme) pour s’assurer qu’elles ne soient pas supprimées lors de la mise à jour du thème parent.

---

Étape 1 : Télécharger et configurer une version de Prism.js

1. Allez sur le site web : prismjs.com/download.html.
2. Sélectionnez les composants :
   • Niveau de compression (Compression level) : Minified.
   • Langages (Languages) : Markup, CSS, C-like, JavaScript. Ajoutez tout autre langage requis.
   • Plugins : Line Numbers, Toolbar, Copy to Clipboard Button.
3. Téléchargez les fichiers : Cliquez sur DOWNLOAD JS et DOWNLOAD CSS.

Placez les fichiers prism.js et prism.css téléchargés dans le dossier racine de votre thème enfant.

---

Étape 2 : Mettre en file d’attente les fichiers dans functions.php

Pour mettre en file d’attente les fichiers dans WordPress, ouvrez le fichier functions.php de votre thème enfant et ajoutez le code suivant :

<?php

/**
 * Met en file d'attente les styles et scripts pour la coloration syntaxique.
 */
add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    // Mettre en file d'attente les styles de Prism
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri() . '/prism.css',
        array(),
        '1.29.0' // Version pour le contrôle du cache
    );

    // Mettre en file d'attente le script de Prism
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri() . '/prism.js',
        array(),
        '1.29.0',
        true // Charger dans le pied de page (footer)
    );
}

/**
 * Ajoute automatiquement des classes aux blocs de code Gutenberg.
 */
add_filter('render_block_core/code', 'theme_add_prism_classes_to_code_block', 10, 2);
function theme_add_prism_classes_to_code_block($block_content, $block) {
    // Ajoute la classe line-numbers à la balise <pre>
    $block_content = str_replace('<pre class="wp-block-code">', '<pre class="wp-block-code line-numbers">', $block_content);
    return $block_content;
}

Ce code met en file d’attente les fichiers et active la numérotation des lignes.

---

Étape 3 : Échapper automatiquement les caractères

L’étape clé consiste à ajouter un filtre dans functions.php pour échapper automatiquement les caractères spéciaux avant de sauvegarder l’article.

/**
 * Échappe les caractères HTML à l'intérieur des balises <code> lors de la sauvegarde d'un article.
 */
add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    // Trouve tous les blocs <code>...
    return preg_replace_callback('/(.*?)<\/code>/is', function($matches) {
        $attributes = $matches[1]; // Attributs de la balise
        $code_content = $matches[2]; // Contenu de la balise

        // Échapper le contenu
        $escaped_content = htmlspecialchars($code_content, ENT_NOQUOTES, 'UTF-8');

        // Reconstituer la balise
        return '<code' . $attributes . '>' . $escaped_content . '';
    }, $content);
}

Le « hook » content_save_pre se déclenche avant l’écriture dans la base de données. La fonction htmlspecialchars convertit les caractères spéciaux en entités HTML sûres.

---

Étape 4 : Mise en forme dans style.css

Pour une présentation propre, ajoutez les styles suivants au fichier style.css de votre thème enfant :

/* Styles pour les blocs de code */
pre[class*="language-"] {
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Styles pour la barre d'outils de Prism */
div.code-toolbar {
    position: relative;
}

div.code-toolbar > .toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

div.code-toolbar:hover > .toolbar {
    opacity: 1; /* Afficher le bouton au survol */
}

.toolbar-item button {
    padding: 5px 10px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
}

.toolbar-item button:hover {
    background-color: #e0e0e0;
}

Résultat

Après avoir suivi ces étapes, chaque bloc de code dans Gutenberg aura :

• Coloration syntaxique automatique.
• Numéros de ligne.
• Un bouton de copie.
• Un rendu correct des balises HTML sans casser la mise en page.