Vous êtes à : Accueil > Nos techniques > Présenter du code

Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

Coloriser du code css, html, php…

Mais comment est mis en page le code dans cette sous-section tech ? Avec une version personnalisée de SyntaxHighlighter !
Cette page présente ce logiciel et la personnalisation proposée par micr0lab sans expliquer son installation : il est supposé que le manuel d’installation est lisible et compris, même si nous donnons quelques conseils de mise en place. La version employée est la 3.0.83.

Sommaire : PrésentationMise en placePersonnalisation

Coloriser du code ?

Il y a les fonctions highlight_string et highlight_file de php qui permettent de coloriser du code, jugez plutôt :

<?php global $local;
$local = ($_SERVER['SERVER_NAME'] == 'localhost');
$ch pathinfo($_SERVER['SCRIPT_NAME'], PATHINFO_DIRNAME);
$cvr = ($ch == '/') ? "" str_repeat('../' , (substr_count$ch '/') -$local));
?>

Cependant il existe également SyntaxHighlighter qui permet de coloriser sans effort de nombreux formats de code.

<?php global $local;
$local = ($_SERVER['SERVER_NAME'] == 'localhost');
$ch = pathinfo($_SERVER['SCRIPT_NAME'], PATHINFO_DIRNAME);
$cvr = ($ch == '/') ? "" : str_repeat('../' , (substr_count( $ch , '/') -$local));
?>

Plus lisible, non ? De plus, on peut facilement coloriser de nombreux langages et styliser l’apparence du rendu.

Conseils de mise en place

Le code est inclus en utilisant la « <pre> method », dont l’inconvénient d’après le site de cette application est que « tous les chevrons gauches doivent être encodés par leur caractère HTML, c.-à-d. que tous les < doivent être remplacés par des &lt; afin d‘avoir un rendu correct. ». Une alternative a cependant été trouvée :

Ça donne :

<?php
$code_php = file_get_contents("mon_code.php");
$code_php2 =
<<<EOT
$cvr = ($ch == '/') ? "" : str_repeat('../' , (substr_count( $ch , '/') -$local));
EOT;
?>
<pre class="brush: php;">
	<?=htmlentities($code_php, ENT_COMPAT | ENT_HTML401 ,"UTF-8");
	echo htmlentities($code_php2, ENT_COMPAT | ENT_HTML401 ,"UTF-8"); ?>
</pre>

Ensuite, plutôt que d’utiliser l’autoloader pour charger dynamiquement les brosses, un fichier .js compilant les brosses utilisées a été crée : brush.js. Il contient les brosses pour les scripts Bash, le css, le Java, le PHP, le texte brut et le Xml.

Pour masquer l’icône d’« aide » (le qui s’affiche en haut à droite) : plutôt que de spécifier à chaque fois toolbar: false;, vous pouvez plus simplement éditer le thème css de SyntaxHighlighter pour masquer cet icône, par exemple en précisant dans votre thème :

.syntaxhighlighter .toolbar_item {
	display : none !important;
}

Seulement, pour que la modification soit effective, il faut éditer votre fichier shCore.css et commenter le une partie du code :

.syntaxhighlighter .toolbar a {
/* La ligne ci-dessous est commentée pour masquer la commande d'aide.*/
/* display: block !important; */
 text-align: center !important;
 text-decoration: none !important;
 padding-top: 1px !important;
}

Une petite curiosité pour finir : si vous indiquez comme options collapse:true et toolbar:false, votre code ne s’affiche tout simplement pas, soyez-en avertis !

micr0lab y mets sa touche de style

Outre l’application de nos couleurs et quelques autres améliorations, micr0lab a surtout ajouté une étiquette mentionnant le langage présenté. La totalité du fichier .css est disponible (ainsi que le .less, qui importe une autre feuille less), comment ce « tampon » a été ajouté est expliqué ci-dessous.

Chaque bloc div crée par SyntaxHighlighter en vue de remplacer votre bloc pre comporte une classe explicite : dans nos cas, ce sera css, bash, js, php, plain, html et enfin htmlscript. Pour chaque de ces classes (nous ne traitons ici que le PHP), spécifiez dans votre thème :

.php {
 padding: .3em 0;
}
.php > div:after {
 text-align: center;
 position: absolute;
 right: 4px;
 /* Ci-dessous, la seule ligne qui varie d’une classe à l’autre. */
 content: "PHP";
 font-size: 150%;
 font-weight: bold;
 transform: rotate(30 deg);
 transform-origin: 25% 20%;
 -ms-transform: rotate(30 deg);
 -ms-transform-origin: 25% 20%;
 -webkit-transform: rotate(30 deg);
 -webkit-transform-origin: 25% 20%;
 -moz-transform: rotate(30 deg);
 -moz-transform-origin: 25% 20%;
 -o-transform: rotate(30 deg);
 -o-transform-origin: 25% 20%;
 color: #4c4c25;
 border: 1px solid #b6b6a3;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 padding: 3px;
}

Bien évidemment, c’est fastidieux (mais ça va nettement mieux avec less), c’est à mettre à vos couleurs, mais c’est accessible et ça en jette.

Contact :

Contact Plan Lettre F.a.q. C.G.U.