Petite présentation de PrismJs développé par Léa Verrou qui permet d'afficher sur son blog des portions de code pour plusieurs langages de programmation (css, html, php, javascript. Et d'autres klangages non spécifiques aux sites Internet.

Très classiquement, on insère le code à afficher entre une paire de blocs de balises <pre class="language-php"><code> et </code></pre>.

Le langage employé sera précisé dans la classe de la balise <pre> comme ci-dessus.

Dans le cas de code PHP, il est nécessaire de transformer les caractères < et > en leurs entités HTML.

Code inline

<?php

// if (!defined('PLX_ROOT')) exit;

const TIMESTAMP_FORMAT = 'D, d M Y H:i:s';

session_start();

if(empty($_GET)) {
	header('Content-Type: application/octet-stream');
	header('Content-Disposition: attachment; filename='.basename(__FILE__));
	header('Content-Length: '.filesize(__FILE__));
	header('Last-Modified: '.gmdate(TIMESTAMP_FORMAT, filemtime(__FILE__)).' GMT');
	header('Expires: '.gmdate(TIMESTAMP_FORMAT, time() + 7200));
	readfile(__FILE__);
	exit;
}
?>

Mais on peut aussi employer le code d'un fichier hébergé chez Github et chez BitBucket.

Le principe est d'envoyer une requête JSONP et en retour, on reçoit le code à afficher, encodé en base64.

La syntaxe à employer est celle-ci :

<pre data-jsonp="https://api.github.com/repos/leaverou/prism/contents/prism.js" class="language-javascript">Cette partie sera affichée en cas d'échec</pre>.

L'adresse de la requête est précisée dans l'attribut data-jsonp. Comme dans l'exemple précédent, le langage est précisé dans la class.

Il n'y a pas de traitement particulier à faire pour le code PHP, vu que le code ne transite pas par le serveur mais est reçu par le navigateur qui fait le traitement approprié.

Toute la documentation en anglais est disponible sur le site de PrismJS.

Télécharger le plugin