nl2br et no-wrap

En travaillant sur le design de ce site, je suis tombé sur un petit problème : mes blocs de code utilisent la propriété CSS white-space: no-wrap. Ce qui à pour but de mettre tous les espaces sur une seule ligne. Grâce à cela, je peux avoir du code dans mon block qui continue sans revenir à la ligne. Cela à pour but de rendre la lecture de code plus facile car les lignes de codes ne reviennent pas à la ligne. Voici le code que j’utilise pour cette fonctionnalité : 

CSS

.single pre {
    white-space: nowrap;
    overflow: auto;
}

Cependant, cela entre en conflit avec  dans mon éditeur de texte WordPress, car je veux souvent revenir à la ligne quand j’écris dans une balise <pre></pre>. J’ai donc voulu utiliser assez naïvement la fonction PHP nl2br qui tranforme les retours à la ligne en br :

PHP

add_filter('the_content', 'pre_new_line');
function pre_new_line($content) {
  return nl2br($content);
}

Sauf que cette solution n’est pas adapté, puisqu’elle s’applique sur tout le texte. Il fallait donc que je l’applique seulement aux balise <pre></pre>. J’ai commencé alors à construire ma regex, en utilisant l’outil de débuggage de regex : Regex101.com. Il m’a permis de trouver cette regex : \<pre\>[\s\S]*?\<\/pre\>. Ce qu’elle cible, c’est tout texte qui débute par <pre> et qui contient n’importe quoi, jusqu’au prochain </pre>. Et ceci, peu importe le nombre de <pre> dans le texte original.

Il ne me restait plus qu’à trouver la fonction qui me permettrait d’appliquer le nl2br seulement sur cette regex, et PHP à déjà très gentillement pensé à cette fonction : preg_replace_callback(). Je n’avais jamais entendu parler de cette fonction, et en regardant la doc, et les exemple, j’ai compris que c’est ce qu’il me fallait. Cette fonction permet d’éxécuter une fonction pour chaque partie qui correspond à la regex. Ici mes <pre>. 

Ce qui me donne au final ce code : 

PHP

add_filter('the_content', 'pre_new_line');
function pre_new_line($content) {
  $content = preg_replace_callback("#\<pre\>[\s\S]*?\<\/pre\>#", "nl2br_pre", $content);
  return $content;  
}
function nl2br_pre($match){
  return nl2br($match[0]);
}

Et voilà comment j’ai pu résoudre ce problème et améliorer mon blog tant au niveau design que fonctionnalité.