Aller au contenu
> 💻 🧠 Code 1001 > 🧪📓 Sans catégorie > Mise en surbrillance du code dans WordPress avec Gutenberg et Prism.js

Mise en surbrillance du code dans WordPress avec Gutenberg et Prism.js

  • par

Lorsque vous créez du contenu dans WordPress, vous utilisez le plus souvent l’éditeur Gutenberg.
Il a été introduit dans WordPress 5.0 (en décembre 2018) et a remplacé l’ancien éditeur de texte TinyMCE.

TinyMCE était un simple éditeur issu de l’époque Web 1.0 — un champ <textarea> avec des boutons tels que « gras », « italique » et « lien ».
Tout le texte était enregistré sous forme d’un seul flux HTML continu, ce qui rendait difficile le déplacement ou l’insertion d’éléments.
De plus, TinyMCE ne prenait pas en charge la grille adaptative à 12 colonnes, devenue la norme de facto à l’ère du Web 2.0.
Ainsi, les mises en page complexes devaient être construites manuellement à l’aide de HTML et CSS.

In Questo Articolo
  1. Gutenberg — un éditeur de nouvelle génération
  2. Comment Gutenberg gère la grille
  3. Le problème du bloc de code standard
  4. Qu’est-ce que Prism.js
  5. Travailler avec un thème enfant
  6. Utiliser le site Prism.js
  7. Connecter Prism.js à WordPress
  8. Numérotation automatique des lignes
  9. Échappement des caractères HTML
  10. Styliser les blocs de code
  11. Fonctions supplémentaires de Prism.js
  12. Avant et après Prism.js

Gutenberg — un éditeur de nouvelle génération

L’éditeur Gutenberg a résolu ces problèmes.
Chaque partie d’une page existe désormais sous forme de bloc — titre, paragraphe, citation, image, tableau ou extrait de code —
ce qui rend l’édition plus simple et les mises en page plus flexibles et adaptatives.

Le contenu doit s’afficher correctement sur tout type d’appareil — du téléphone au grand écran.
Lorsqu’un site n’est pas responsive, le texte se décale, les images sont coupées et les tableaux débordent.
Cela se résout grâce à une mise en page adaptative, qui s’ajuste automatiquement à la largeur de l’écran.

Au cœur de cette mise en page se trouve une grille à 12 colonnes, popularisée par des frameworks comme Bootstrap et Foundation.
La largeur du conteneur est divisée en 12 parties égales (8,33 % chacune), ce qui permet de créer presque toutes les structures possibles.

Exemple :

1 colonne  → [████████████] 100 %
2 colonnes → [██████][██████] 6/6
3 colonnes → [████][████][████] 4/4/4
4 colonnes → [███][███][███][███] 3/3/3/3

Sur les appareils mobiles, les colonnes se placent automatiquement à la verticale, ce qui garde le contenu clair et lisible.

Comment Gutenberg gère la grille

Dans Gutenberg, la grille à 12 colonnes est implémentée à l’aide du bloc Colonnes,
qui adapte automatiquement la disposition des éléments à la largeur de l’écran.
En HTML, elle se présente sous la forme de conteneurs avec les classes wp-block-columns et wp-block-column,
et en CSS, c’est Flexbox qui gère l’alignement et le comportement des colonnes.

Exemple :

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Première colonne</p>
  </div>
  <div class="wp-block-column">
    <p>Deuxième colonne</p>
  </div>
</div>

CSS :

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

Cette structure rend Gutenberg flexible et garantit un affichage cohérent sur tous les appareils.

Le problème du bloc de code standard

Parmi tous les blocs de Gutenberg, le bloc Code mérite une attention particulière.
Il sert à afficher des exemples de programmes, des scripts ou des fragments de configuration.
Techniquement, c’est un simple conteneur HTML :

<pre> ... </pre>

Gutenberg et TinyMCE l’affichent de la même manière — en texte monospace
(le plus souvent avec les polices Consolas, Courier New ou Monaco)
sans coloration syntaxique ni numérotation des lignes.

C’est suffisant pour un usage basique, mais pour des articles techniques ou des tutoriels,
un code sans couleur devient vite illisible.
La solution la plus simple consiste à utiliser Prism.js.

Qu’est-ce que Prism.js

Prism.js est une bibliothèque JavaScript légère de coloration syntaxique côté client.
Elle ne nécessite aucun module serveur : le script analyse le contenu des balises <pre><code>...
et la feuille de style prism.css colore les mots-clés, chaînes, nombres et commentaires.

Elle prend en charge des dizaines de langages de programmation — du HTML et JavaScript au Python et Go —
et propose de nombreux plugins : numérotation des lignes, bouton de copie, indication du langage, thèmes clair et sombre, etc.

Exemple :

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}

Après l’ajout de Prism.js, ce code sera automatiquement coloré dans le navigateur.

Travailler avec un thème enfant

Avant d’ajouter Prism.js, il est essentiel de ne pas modifier directement le thème parent.
Toutes les personnalisations dans WordPress doivent se faire à travers un thème enfant.

Un thème WordPress contrôle l’apparence du site — modèles, styles, menus, en-têtes et pieds de page.
Si vous modifiez le thème actif, la prochaine mise à jour effacera vos changements.

Un thème enfant évite ce problème : il hérite du thème parent mais conserve vos modifications séparément,
ce qui protège votre code lors des mises à jour.

Créez un dossier :

/wp-content/themes/mon-theme-enfant/

Ajoutez un fichier style.css :

/*
 Theme Name:   Mon thème enfant
 Template:     mon-theme
 Version:      1.0
*/

Le champ Template doit correspondre au nom du dossier du thème parent.
Puis créez functions.php :

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

Activez le thème enfant via Apparence → Thèmes
et effectuez toutes vos modifications dans ce thème.

Utiliser le site Prism.js

Une fois le thème enfant prêt, rendez-vous sur le site officiel de Prism.js :
👉 https://prismjs.com

Ouvrez l’onglet Download — c’est là que vous pouvez créer votre propre version de la bibliothèque.

Configuration de votre build

  1. Compression level : choisissez Minified
  2. Languages : sélectionnez ceux dont vous avez besoin — HTML, CSS, JavaScript, PHP, Python, JSON
  3. Plugins : recommandés :
    • Line Numbers
    • Toolbar
    • Copy to Clipboard Button
    • (facultatif) Show Language
    • (facultatif) Highlight Lines

Ensuite, cliquez sur :

  • DOWNLOAD JS — pour télécharger prism.js
  • DOWNLOAD CSS — pour télécharger prism.css

Placez les deux fichiers dans le dossier de votre thème enfant :

/wp-content/themes/mon-theme-enfant/

Connecter Prism.js à WordPress

Ouvrez functions.php dans votre thème enfant et ajoutez :

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

Prism.js commencera alors à colorer automatiquement tout le code placé entre
<pre><code>....

Numérotation automatique des lignes

Vous pouvez ajouter un filtre WordPress pour numéroter les lignes automatiquement :

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

Échappement des caractères HTML

Si votre code contient les symboles < ou >, le navigateur peut les interpréter comme des balises HTML.
Pour éviter cela, ajoutez un filtre qui les échappe automatiquement lors de l’enregistrement d’un article :

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}";
        },
        $content
    );
}

Styliser les blocs de code

Ajoutez ces styles dans le fichier style.css de votre thème enfant :

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

Fonctions supplémentaires de Prism.js

  • 🔢 Numérotation des lignes — ajoute des numéros comme dans un IDE
  • 🧠 Surlignage de lignes — met en évidence certaines lignes avec data-line="2,4-5"
  • 📋 Bouton Copier — copie le code en un clic
  • 💡 Indication du langage — affiche le nom du langage au-dessus du bloc
  • 🌗 Thèmes clair et sombre — bascule automatique :
@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}
  • 🎨 Personnalisation des couleurs — redéfinissez les couleurs des jetons si nécessaire :
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

Avant et après Prism.js

Avant

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}

Résultat :

function greet(name) {
  return `Hello, ${name}`;
}

Texte monospace, sans couleur ni numérotation.

Après

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}

Résultat :

1 function greet(name) {
2   return `Hello, ${name}`;
3 }

Chaque ligne est numérotée, le code est coloré
et un bouton Copy apparaît pour copier le contenu.

Prism.js rend les extraits de code plus lisibles et mieux structurés.
Il fonctionne entièrement dans le navigateur, sans plugin supplémentaire,
et n’affecte pas les performances.
Une fois configuré, vos exemples de code seront clairs, uniformes et agréables à lire.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *