Coloration Code, un plugin pour SPIP

22 avril 2021

Sur ce blog, au fil des articles, je présente de nombreuses commandes, des fichiers de configuration, des extraits de code... et souhaite les donner à voir le plus agréablement possible, ce qui passe par leur coloration syntaxique, d’où le redéveloppement du plugin Coloration Code.

Présentation

Coloration Code apporte la coloration syntaxique de vos extraits de code au sein de SPIP.

Cette nouvelle version (actuellement sur la branche dev/prismjs) est une réécriture complète du plugin existant, basculant d’une coloration syntaxique réalisée côté serveur avec la librairie PHP GeSHi à un traitement côté client grâce à la librairie Javascript PrismJS apportée dans SPIP grâce au plugin Prism (voir cet article) dont il dépend.

Concrètement, le plugin charge le plugin Autoloader de PrismJS, appelant à la volée les scripts de grammaire nécessaires.
Il propose également de charger quelques unes des extensions de la librairie (numérotation ou surlignage des lignes, affichage d’un prompt, bouton Copier dans le presse-papier) et de choisir entre les thèmes fournis ou d’en générer un.

Le plugin agit sur les extraits de code aussi bien inline que block, et s’il détecte des sauts de lignes dans une simple balise <code> il génère alors automatiquement un bloc de code (<pre><code>).

Démonstration

if (!defined('_ECRIRE_INC_VERSION')) {
    return;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 class="titre">Titre</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus odit officiis quisquam voluptate obcaecati. Dignissimos rerum reprehenderit sapiente veniam deleniti eum <i>mollitia</i> dicta amet, exercitationem possimus laboriosam ipsam numquam? Odit.</p>
</body>
</html>

	var script = Prism.util.currentScript();
	if (script) {
		var autoloaderFile = /\bplugins\/autoloader\/prism-autoloader\.(?:min\.)?js(?:\?[^\r\n/]*)?$/i;
		var prismFile = /(^|\/)[\w-]+\.(?:min\.)?js(?:\?[^\r\n/]*)?$/i;

		var autoloaderPath = script.getAttribute('data-autoloader-path');
		if (autoloaderPath != null) {
			// data-autoloader-path is set, so just use it
			languages_path = autoloaderPath.trim().replace(/\/?$/, '/');
		} else {
			var src = script.src;
			if (autoloaderFile.test(src)) {
				// the script is the original autoloader script in the usual Prism project structure
				languages_path = src.replace(autoloaderFile, 'components/');
			} else if (prismFile.test(src)) {
				// the script is part of a bundle like a custom prism.js from the download page
				languages_path = src.replace(prismFile, '$1components/');
			}
		}
	}

Balisage

Pour que PrismJS puisse agir et apporter la coloration syntaxique à vos extraits de code, il convient de fournir après compilation du squelette un balisage sous la forme suivante :

<pre><code class="language-*">
     [...snip...]

Par exemple :

<pre><code class="language-php">
if (!defined('_ECRIRE_INC_VERSION')) {
	return;
}

générera cela :

if (!defined('_ECRIRE_INC_VERSION')) {
	return;
}

À noter que l’indentation du code copié est respectée :

<pre><code class="language-php">
		if(array_intersect($classes, $langages)) {
			$langage = array_intersect($classes, $langages)[0];
			$classes = str_replace($langage, "language-".$langage, $classes);
		}

		if(array_intersect($classes, $langages)) {
			$langage = array_intersect($classes, $langages)[0];
			$classes = str_replace($langage, "language-".$langage, $classes);
		}

Saisie, réécriture des grammaires et rétrocompatibilité

La librairie PrismJS s’appuie sur des classes de type language-* afin de sélectionner les grammaires nécessaires à la coloration syntaxique.
Le plugin se charge automatiquement de faire correspondre les classes du genre grammaire vers la classe adéquate pour PrismJS sous réserve que le script correspondant existe. Ainsi, <code class="html"> sera automatiquement transformé en <code class="language-html">.

Le plugin prend également en compte les « anciens » éléments <cadre>.

Le plugin permet ainsi de prendre en compte les saisies suivantes :

<code class="php">
if (!defined('_ECRIRE_INC_VERSION')) {
	return;
}

<pre>
<code class="language-php">
if (!defined('_ECRIRE_INC_VERSION')) {
	return;
}

<cadre class="php">
if (!defined('_ECRIRE_INC_VERSION')) {
	return;
}
</cadre>

My Own Memory Hole

Coloration Code, un plugin pour SPIP

Présentation

Démonstration

Balisage

Saisie, réécriture des grammaires et rétrocompatibilité

Un message, un commentaire ?