Afficher du code source dans WordPress sans plugin

Posté le par | Réponse(s) : 6

Le but de ce tutoriel est de montrer comment utiliser l'insertion d'un code source (html, php, java, ...) affiché comme du texte (donc sans être exécuté) dans un article WordPress et sans passer par une extension. Il y a deux types de manipulation à faire : insérer quelques lignes de commandes dans header.php de WordPress et l'intégration elle-même dans un article. Je me suis basé sur sur SHJS (Syntax Highlighting in JavaScript), un programme en JavaScript qui met en évidence les passages de code source dans les documents HTML. SHJS est distribué sous licence GNU General Public License version 3.

  • Tout d'abord, il faut télécharger, décompresser et mettre le dossier shjs-0.6 dans /votre/blog/wp-content. Téléchargement : shjs-0.6.zip ou shjs-0.6.tar.gz.
  • Le script à insérer en toute première ligne de header.php (attention, ne pas insérer ce code dans single.php ou autre, car cela provoque des erreurs d'affichage avec Internet Explorer) :
<!-- Add shjs -->
<script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script>
<script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_php.js"></script>
<script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_html.js"></script>
<link type="text/css" rel="stylesheet" href="./wp-content/shjs-0.6/css/sh_dull.css">
<body onload="sh_highlightDocument();">
<!-- Fin shjs -->

Explications :

Cette ligne charge le script principal de SHJS :

<script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script>

Cette ligne charge la prise en charge du langage PHP :

<script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_php.js"></script>

Cette ligne charge la prise en charge du langage HTML :

<script type="text/javascript" src="./wp-content/shjs-0.6/lang/sh_html.js"></script>

Il existe d'autre langages pris en charge comme Bison, C, C++, C#, ChangeLog, CSS, Desktop files, Diff, Flex, GLSL, Haxe pour les principaux. Ils se trouvent dans ./wp-content/shjs-0.6/lang. À vous de les ajouter en fonction de vos besoins.

Cette ligne charge le style d'affichage (couleur de fond, couleur du texte, pour visualiser les différents styles c'est sur cette page) :

<link type="text/css" rel="stylesheet" href="./wp-content/shjs-0.6/css/sh_dull.css">

Ils se trouvent dans ./wp-content/shjs-0.6/css. À vous de le changer en fonction de vos besoins.

  • Il faut désormais pré-formater les codes sources que vous voulez afficher dans votre article (c'est le gros point négatif de cette méthode sans plugin) : les symboles < (inférieur), les > (supérieur) et guillemet (2 traits verticaux) doivent être convertis en &lt; et &gt; et &quot; pour pouvoir être affichés sans être interprétés en tant que code à proprement dit, exemple :

Pour afficher :

<script type="text/javascript" src="./wp-content/shjs-0.6/sh_main.js"></script>

Il faut formater comme ceci  :

&lt;script type=&quot;text/javascript&quot; src=&quot;./wp-content/shjs-0.6/sh_main.js&quot;&gt;&lt;/script&gt;

Pour convertir et vous aider à  mettre en page, voici un outil indispensable pour faire ce formatage, aidez-vous de cette application :

du_code_source_au_html ou bien cette application.

  • Une fois avoir pré-formaté les codes sources, il suffit de les insérer dans le corps de votre article en basculant du mode "visuel" en monde "HTML" et le coller ces balises :
<pre class="sh_html">
votre code source pré-formaté
</pre>

Voilà votre code source s'affiche dans un joli cadre avec des couleurs en fonction du contenu. J'espère avoir été suffisant clair, si vous avez des questions ou des idées à me soumettre, n'hésitez-pas à me contacter par commentaire ou par courriel.


Licence Creative Commons
Cet article, sauf mention contraire expresse, est publié sous licence Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported Licence.

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :
Google Plus Twitter Facebook Linkedin Framasphere email Flattr !

6 commentaires sur “Afficher du code source dans WordPress sans plugin

Laisser un commentaire

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