Blog

Passage de WP-Syntax à Highlight.js

Écrit le 30 07 2013 par Kévin MET _

Pour changer on va parler de WordPress, et on va plus précisément parler de la façon de switcher de WP-Syntax à Highlight.js. Je viens tout juste de faire le changement sur mon blog et je suis ravi du résultat. Mais pourquoi avoir changer me direz vous ? Tout simplement car depuis que j'avais mis WP-Syntax, le blog ramait sur quelques navigateurs. Et comme mon collègue de boulot me le faisait remarqué, ça n'était pas cool. Voici donc comment changer.

Pour commencer, il faut désactiver et désinstaller WP-Syntax de votre WordPress. Ça je ne vais pas vous expliquer comment faire car si vous ne le savez pas, vous devriez arrêter de lire ceci dès maintenant car vous n'allez rien comprendre 😃

Il faut ensuite ajouter un JS et un CSS dans votre thème. Vous pouvez ajouter le CSS dans le header.php de votre thème (voire dans le style.css de votre thème si vous êtes adepte de l'optimisation) et ajouter le JS dans le footer.php de votre thème. Ces fichiers sont téléchargeables sur le site highlight.js. Vous pouvez y choisir le type de language que le JS peut supporter ce qui permettra de plus ou moins diminuer la taille de celui-ci.

On commence par le bout de code à ajouter dans le header


<link rel="stylesheet" href="https://mnt-tech.fr/wp-content/themes/my-theme/highlight.css" type="text/css" media="screen" />

On ajoute ensuite la partie JS dans le footer


<script src="https://static.mnt-tech.fr/my-theme/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Il ne reste ensuite qu'à changer le code dans nos articles. Pour cela on va exécuter quelques requêtes SQL. En effet pour ajouter du code dans vos pages il faudra utiliser les balises suivantes :


<pre><code>
mon code
</pre></code>

On commence par remplacer les balise ouvrantes. Imaginons que comme moi on est est pas mal de bash sur notre blog on doit donc avoir des balises ouvrantes de ce type <pre lang="BASH" line="1"> que l'on veut convertir en <pre><code>. On va donc utiliser cette requête SQL :


UPDATE wp_posts SET post_content = REPLACE(post_content, '<pre lang="BASH" line="1">', '</code></pre>') WHERE post_content LIKE '%<pre lang="BASH" line="1">%';

Il ne vous reste plus qu'à faire la même chose pour les balise fermantes et les autres langages.

Enjoy 😃

♥ Partage sur tes réseaux sociaux ♥
Kévin MET
Kévin MET

Auteur de ce blog et gérant de la société MNT-TECH, je publie sur ce blog lorsque le temps me le permet et lorsqu'un sujet qui me parait intéressant n'a pas encore été abordé en français. Toutes les informations techniques présentes sur cette page peuvent être réutilisées moyennant le fait de citer la source.