logo

Permettre la coloration syntaxique du code sur WordPress [functions + PHP]

Pour ajouter la coloration syntaxique des bouts de code que vous souhaiteriez afficher dans vos articles sur wordpress, utilisez le script Code Prettify de Google.

Il vous suffit de coller le script ci-dessous dans votre footer, avant la balise fermante du body :

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian"></script>

il est possible de changer le thème par ceux disponibles ici en modifiant la variable « ?skin=sons-of-obsidian »

Pour afficher la coloration syntaxique, vous devrez utiliser le style « préformaté » ou « code » de votre éditeur WordPress, passer en vue texte/html et ajouter la classe « prettyprint ». Exemple :

<pre class="prettyprint">
  <p>ceci est un exemple de code</p>
</pre>

Vous pouvez automatiser cette tâche en utilisant une fonction de remplacement que vous retrouverez dans cet article. Ajoutez dans votre functions.php :

function replace_text_wps($text){
$replace = array(
// 'WORD TO REPLACE' => 'REPLACE WORD WITH THIS'
'<pre' => '<pre class="prettyprint linenums"',
);
$text = str_replace(array_keys($replace), $replace, $text);
return $text;
}
add_filter('the_content', 'replace_text_wps');
add_filter('the_excerpt', 'replace_text_wps');

Note : L’ajout de la classe « linenums » permet d’afficher les numéros de lignes.

Vous trouverez plus d’informations et d’autres options de personnalisation dans la documentation.