Fil d'Ariane
Mis à jour le mercredi 30 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

Vous avez un site web, et vous souhaiteriez colorer vos codes sources comme sur le Site du Zéro, avec une couleur pour chaque fonction, variable... ? Non, c'est inutile de le faire à coups de <span> pour colorer chaque fonction ; quel que soit le langage, vous pouvez le faire très simplement, grâce à un système appelé GeSHi.

Préparer GeSHi

Pour utiliser GeSHi, vous avez besoin d'un hébergeur qui supporte le PHP et de 700 Ko d'espace (rien de bien dur à trouver, donc).

Tout d'abord, téléchargez GeSHi sur le site officiel. Une fois fait, extrayez-le (clic droit → extraire). Vous y trouverez les fichiers et dossiers suivants :

  • geshi.php, c'est le fichier le plus important qu'il faudra inclure ;

  • /contrib, le dossier du code de GeSHi ;

  • /geshi, qui contient la référence de chaque langage (pour savoir quelle couleur utiliser pour chaque fonction) ;

  • /docs, qui est la documentation officielle.

Prenez tous ces fichiers et copiez-les dans le répertoire de votre site. Vous pouvez très bien placer ce répertoire à la racine du site ou dans un dossier (inc/geshi, par exemple), mais faites en sorte qu'il soit facile d'accès par les autres fichiers PHP. Je vous expliquerai pourquoi plus tard.

Utiliser GeSHi

Ben oui, maintenant que je l'ai installé, comment l'utiliser ?

C'est là que ça se corse :o . En fait, il vous suffit d'écrire ça dès que vous voulez votre code sur une page :

<?php
include_once('geshi.php'); // Inclure la librairie GeSHi
 
// Mettre la source dans la variable $source
 
$source = '$foo = 45;
for ( $i = 1; $i < $foo; $i++ )
{
  echo "$foo<br />\n";
  --$foo;
}';
 
$language = 'php'; // Définir le langage à utiliser
 
$geshi =& new GeSHi($source, $language); // Créer un objet « GeSHi »
echo $geshi->parse_code(); // Afficher le résultat
?>

Évidemment, il faudra faire un peu de copier-coller... ou utiliser une technique plus astucieuse (que j'expliquerai en détail en bas).

Détaillons le code :

<?php
include_once('geshi.php');
?>

Ici, il y a juste à inclure le fichier geshi.php en indiquant son emplacement par rapport au fichier actuel. Dans cet exemple, il est dans le même dossier que celui où vous travaillez.

<?php
$source = '$foo = 45;
for ( $i = 1; $i < $foo; $i++ )
{
  echo "$foo<br />\n";
  --$foo;
}';
$language = 'php';
?>

Ici, vous devez juste remplir la variable $source avec le code à colorer, puis la variable $language pour savoir quel langage vous utilisez (une liste des langages est disponible un peu plus bas).

<?php
$geshi = new GeSHi($source, $language);
?>

Cela va créer un nouvel objet appelé « GeSHi » qui va contenir le code source et le langage.

<?php
echo $geshi->parse_code();
?>

Enfin, cette ligne va afficher le résultat.

Utilisation avancée

C'est tout ?

Non ! GeSHi permet de faire des choses plus poussées.

En une fonction !

Sachez qu'au lieu de retenir toutes ces fonctions, GeSHi permet de les regrouper en une seule (bah oui, c'est tellement plus pratique...).

La fonction est : geshi_highlight() :magicien: ! Voici son usage :

<?php
geshi_highlight($source, 'php', $path);
?>

$source : toujours la même variable, pour le code.
'php' : à remplacer bien sûr si vous voulez un autre langage.
$path : c'est le chemin vers le fichier de définition ; vous n'avez rien à faire, laissez-le tel quel.

Si on reprend le même exemple qu'avant avec ces fonctions... :

<?php
include_once('geshi.php'); 
 
$source = '$mavariable = "fichier.php";
include($mavariable);';
 
geshi_highlight($source, 'php', $path);
?>

Vachement plus simple, hein ? Et tant que vous y êtes, sachez que vous pouvez garder le code coloré dans une variable, au lieu de retaper le code à chaque fois. Comment ?

<?php
$code = geshi_highlight($source, 'php', $path);
?>

Et voilà, je n'ai plus qu'à utiliser $code au lieu de retaper toute la fonction la prochaine fois. Pas mal, hein ?

Changer le conteneur

Le conteneur ? Bah oui, les balises situées autour du code. Par défaut, GeSHi utilise <pre> pour les codes créés avec la première méthode ; cette balise permet d'éviter de rajouter plein de &nbsp; pour les espaces et des <br /> pour les sauts de ligne. Grâce à cette technique, vous économiserez donc de la place (on va dire 0,001 % :-° ), mais aussi de la bande passante et du temps de chargement pour les visiteurs. L'inconvénient ? Cette balise a des problèmes pour être stylée (couleurs, fonds...).

La seconde méthode (avec la fonction unique), elle, utilise la balise <code>, qui a elle aussi ses avantages. Mais des inconvénients également : le principal étant qu'il s'agit d'un élément en ligne, et que ça fait plein de <br /> en plus.

Bref, vous voulez un pre, un div ou rien autour ? GeSHi vous laisse choisir :

<?php
$geshi->set_header_type(GESHI_HEADER_DIV);
$geshi->set_header_type(GESHI_HEADER_PRE); 
$geshi->set_header_type(GESHI_HEADER_NONE);
?>

Les numéros de ligne

GeSHi vous permet d'utiliser des numéros de ligne, ce qui est particulièrement pratique. Vous pouvez utiliser plusieurs styles :

  • GESHI_NORMAL_LINE_NUMBERS — Activer les numéros de ligne ;

  • GESHI_FANCY_LINE_NUMBERS — Activer les numéros de ligne colorés ;

  • GESHI_NO_LINE_NUMBERS — Désactiver les numéros de ligne (par défaut).

Les numéros de ligne colorés ? Je m'explique : avec les numéros de ligne normaux, les lignes auront toutes le même style. Avec les numéros colorés, le style change toutes les X lignes.

Pour changer le style :

<?php
$geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
?>

Si vous voulez utiliser les lignes colorées, vous devez mettre ceci :

<?php
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 8);
?>

C'est quoi, le nombre après ? C'est le « X » : si vous le réglez à 8, alors la couleur changera toutes les 8 lignes, le régler à 2 le fera changer de couleur toutes les lignes. Vous pouvez aussi ne pas mettre de numéro : à ce moment-là, il sera réglé par défaut à 5.

Changer les styles

Maintenant que vous avez mis des numéros de ligne colorés ou non, comment les... colorer ?
:magicien: Avec set_line_style(). ;)

<?php
$geshi->set_line_style('color: #fcfcfc;');
?>

Vous devez alors tout simplement mettre une propriété CSS qui définira le style du no de ligne.. Si vous utilisez les balises colorées, vous devez mettre la couleur des lignes secondaires après une virgule :

<?php
$geshi->set_line_style('background: #fcfcfc;', 'background: #f0f0f0;'); 
?>

Si on prend cet exemple :

<?php
$coordonnees = array (
"Prénom" => "François",
"Nom" => "Dupont",
"Adresse" => "3, rue du Paradis",
"Ville" => "Marseille");
echo '<pre>';
print_r($coordonnees);
echo '</pre>';
?>

donnera ce résultat :

Image utilisateur

Changer les couleurs des fonctions

Vous n'aimez pas les couleurs par défaut ? Il est possible de les changer. Malheureusement, cela est un peu compliqué :

<?php
$geshi->set_keyword_group_style($groupe, $style);
?>

Oui, il faut un groupe... et là, ce n'est pas très pratique, car il faudra regarder dans le fichier de définitions quel groupe équivaut à quoi. Par exemple, en PHP (les groupes 1, 2 et 3 sont similaires dans la plupart des autres langages) :

  • groupe 1 : fonctions de contrôle (if, else, include, while, require, switch...) ;

  • groupe 2 : données par défaut et paramètres (null, <?php, true, false, E_ERROR...) ;

  • groupe 3 : toutes les fonctions incluses dans PHP ;

  • groupe 4 : certains types de données et modificateurs de variables (static, double...).

Imaginons donc que vous voulez changer la couleur des fonctions par défaut en rouge avec fond noir ( :o ) :

<?php
$geshi->set_keyword_group_style(3, 'color: #FF0000; background-color:#000000');
?>

Donnera :

Image utilisateur

Voilà pour les fonctions de bases. Mais certaines choses ne sont pas dans la liste...

Mais alors, comment faire pour modifier les couleurs des signes, commentaires... ?

Chaque chose a sa méthode :

<?php
$geshi->set_comments_style($nombre_lignes, $style);
?>

Pour modifier la couleur des commentaires. $nombre_lignes équivaut au nombre de lignes utilisables pour ce type de code : réglez-le sur 1 pour une seule ligne (// et #), ou sur 'MULTI' pour les commentaires multi-lignes (/* de ce style */).

<?php 
$geshi->set_symbols_style($style);
$geshi->set_strings_style($style);
$geshi->set_numbers_style($style);
?>

Pour changer au choix la couleur des symboles, des textes ou des numéros.

Ainsi, le code :

<?php
$geshi->set_comments_style('MULTI', 'background-color:orange; font-variant:small-caps;');
$geshi->set_symbols_style('font-weight:bold; size:24px;');
$geshi->set_strings_style('background:navy; color:white;');
$geshi->set_numbers_style('font-size:16px;');
?>

donnera :

Image utilisateur

Bon : je vous conseille bien sûr de prendre des styles de meilleur goût ; ici, il s'agit juste bien sûr de marquer les différences, mais essayez d'accorder avec le style général de votre site ;) (en espérant que vous n'utilisez pas ce genre de style...).

FAQ

Que signifie GeSHi ?

Generic Syntax Highlighter. Mais vous avez assez d'acronymes à connaître comme ça. ;)

Est-ce que c'est valide CSS/XHTML ?

Oui, et c'est l'un des gros points forts de GeSHi. Il écrit tout via un fichier CSS externe, avec des <span> et balises valides, contrairement à certains autres systèmes de surlignage (tel que celui de PHP 3 ou 4, qui écrit des <font color=...> totalement dépassés).

J'ai besoin de colorer rapidement mon code, sans avoir à installer GeSHi.

Pas de problème, un outil en ligne vous permet de le faire : geshi.org. C'est tellement plus simple, mais à quoi aurait servi ce tuto, sinon ? :soleil:

Toutes les possibilités de GeSHi ont été citées ici ?

Malheureusement non, car je n'ai pas encore la place ni le temps pour ! Mais les fonctionnalités principales ont été décrites ; si vous avez besoin de choses très approfondies, lisez la documentation. :-°

Quels langages supporte GeSHi, et quels sont les identifiants à utiliser ?

  • Actionscript : actionscript-french ou actionscript

  • ADA : ada

  • Apache Log : apache

  • AppleScript : applescript

  • ASM : asm

  • ASP : asp

  • AutoIT : autoit

  • Bash : bash

  • BlitzBasic : blitzbasic

  • C : c

  • C for Macs : c_mac

  • C# : csharp

  • C++ : cpp

  • CAD DCL : caddcl

  • CadLisp : cadlisp

  • CFDG : cfdg

  • ColdFusion : cfm

  • CSS : css

  • Delphi : delphi

  • DIV : div

  • DOS : dos

  • Eiffel : eiffel

  • Fortran : fortran

  • FreeBasic : freebasic

  • GML : gml

  • HTML : html4strict

  • Inno : inno

  • Java : java

  • Java 5 : java5

  • Javascript : javascript

  • Lisp : lisp

  • Lua : lua

  • Microprocessor ASM : mpasm

  • MySQL : mysql

  • NSIS : nsis

  • Objective C : objc

  • OCaml : ocaml

  • OpenOffice BASIC : oobas

  • Oracle 8 SQL : oracle8

  • Pascal : pascal

  • Perl : Perl

  • PHP : php

  • Python : python

  • Q(uick)BASIC : qbasic

  • robots.txt : robots

  • Ruby : ruby

  • SAS : sas

  • Scheme : scheme

  • SDLBasic : sdlbasic

  • Smarty : smarty

  • SQL : sql

  • T-SQL : tsql

  • VB.NET : vbnet

  • Visual BASIC : vb

  • Visual Fox Pro : visualfoxpro

  • XML : xml

Pfouu ! :waw: Longue liste, dure à faire mais qui vous prouve le nombre époustouflant de langages que supporte GeSHi, d'autant plus que vous pourrez en rajouter si vous utilisez des langages moins communs.

On peut mettre du zCode ?

Oui, il suffit simplement d'utiliser la feuille XML, puisque c'est la même syntaxe.

Si vous avez une question ou une suggestion, n'hésitez pas à me le demander par le biais des commentaires du tuto (pas de MP s'il vous plaît, ce n'est pas fait pour ça).

Exemple de certificat de réussite
Exemple de certificat de réussite