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
list($scriptPath) = get_included_files();
#echo $scriptPath; # Pour tester où je suis, d’après php.
$cvr = str_repeat('../' , (substr_count( $scriptPath , '/') -5));
?>
Cependant il existe également SyntaxHighlighter qui permet de coloriser sans effort de nombreux formats de code.
<?php
list($scriptPath) = get_included_files();
#echo $scriptPath; # Pour tester où je suis, d’après php.
$cvr = str_repeat('../' , (substr_count( $scriptPath , '/') -5));
?>
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 < afin d‘avoir un rendu correct. ». Une alternative a cependant été trouvée :
- Mettez, par exemple grâce à
file_get_contents
ou à <<<EOT
et EOT;
votre code dans une variable $code
.
- Appelez votre
pre
avec la classe qui va bien, par exemple <pre class="brush: php;">
- Puis affichez votre code à l’aide de
htmlentities
, qui se chargera de la conversion pour vous.
Ç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 style (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.