Compatibilité avec la nouvelle mouture de coloration_code + prism (et toujours avec Geshi)

dev_fonctions.php

@@ -57,21 +57,29 @@ function bel_env($env, $afficher_en_clair = false) {
 /**
  * Afficher un bloc de code informatique avec coloration syntaxique si possible.
  *
- * Coloration syntaxique si le plugin coloration code est activé.
- * Sinon le texte est retourné entre des balises <pre><code>.
+ * Retours :
+ * - sans plugin : <pre class="brut"><code>
+ * - avec plugin version PrismJS : <pre class="avec-prism"><code>
+ * - avec plugin version Geshi : <div class="coloration_code">
  *
  * @param string $texte
  * @param string $language
- *     Type de code : html5 | spip
+ *     Type de code : html | spip
  * @return string
  */
-function filtre_dev_afficher_code_dist(string $texte, string $language = 'html5') : string {
+function filtre_dev_afficher_code_dist(string $texte, string $language = '') : string {
 	include_spip('inc/utils');
-	if (test_plugin_actif('coloration_code') === true) {
-		$texte = coloration_code_color($texte, $language);
+	$fn_coloration_geshi = (function_exists('coloration_code_color') ? 'coloration_code_color' : null);
+	$class_pre_color = (test_plugin_actif('coloration_code') ? 'avec-prism' : 'brut');
+	$language_defaut = ($fn_coloration_geshi ? 'html5' : 'html');
+	$language = $language ?: $language_defaut;
+	// Avec coloration Geshi
+	if ($fn_coloration_geshi) {
+		$texte = $fn_coloration_geshi($texte, $language);
+	// Avec ou sans coloration Prism
 	} else {
 		include_spip('inc/filtres');
-		$texte = '<pre class="pre_code"><code>' . entites_html($texte) . '</code></pre>';
+		$texte = "<pre class=\"pre_code $class_pre_color line-numbers\"><code class=\"language-$language\">" . entites_html(trim($texte)) . '</code></pre>';
 	}
 	return $texte;
 }

prive/style_prive_plugin_dev.html

@@ -27,8 +27,8 @@
 	font-size: 0.9em;
 	color: #d63384;
 }
-/* bloc de code non coloré & coloré */
-[class^=charte_] .pre_code,
+/* bloc de code non coloré & coloré avec Geshi */
+[class^=charte_] .pre_code.brut,
 [class^=charte_] .coloration_code {
 	background-color: var(--spip-color-gray-lightest);
 	padding: 0.5em;
@@ -36,17 +36,17 @@
 	font-family: monospace;
 }
 /* bloc de code non coloré */
-[class^=charte_] .pre_code {
+[class^=charte_] .pre_code.brut {
 	display: block;
 	max-width: 100%;
 	overflow-x: auto;
 	margin-top: 0;
 }
-[class^=charte_] .pre_code code {
+[class^=charte_] .pre_code.brut code {
 	font-size: inherit;
 	color: inherit;
 }
-/* bloc de code coloré */
+/* bloc de code coloré avec Geshi */
 [class^=charte_] .coloration_code {
 	white-space: normal;
 }
@@ -89,6 +89,7 @@
 	display: grid;
 	grid-gap: 1em;
 	grid-template-columns: 1fr 1fr;
+	align-items: start;
 }
 
 /* Fonds de couleur */