Version en ligne (../../../www.siteduzero.

com/informatique/tutoriels/geshi-colorer-son-code)

Tutoriel : [GeSHi] Colorer son code

Table des matières
[GeSHi] Colorer son code
Préparer GeSHi
Utiliser GeSHi
Utilisation avancée
FAQ

[GeSHi] Colorer son code

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 o!iciel (http://qbnz.com/highlighter/). 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 o!icielle.

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.

GeSHi est déjà inclus (ou disponible comme plugin) dans certains systèmes de contenu (CMS),
tels que Dokuwiki, Wordpress, Joomla, phpBB, MediaWiki, Dotclear... Il est alors inutile d'avoir
à convertir soi-même le script pour son système, ce qui permet aussi une inclusion plus facile,
grâce à des balises.
:
 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 su!it 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 a!icher 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...).

Mais à quoi servait l'autre code, alors ? Il créait un objet indispensable pour les fonctions telles
que les numéros de lignes, le changement de couleur... mais si vous ne comptez pas les
utiliser, utilisez cette fonction courte.

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);
?>

GESHI_HEADER_DIV, GESHI_HEADER_PRE et GESHI_HEADER_NONE sont des constantes,

donc ne les mettez pas en chaînes (avec des ' autour) !

Les numéros de ligne

Les numéros de ligne ne fonctionnent qu'avec la structure complète, et non avec la fonction
courte !

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 :

Changer les couleurs des fonctions

Tout comme les numéros de ligne, les changements de couleur ne fonctionnent qu'avec la
structure complète et non avec la fonction courte.
:
 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:#00000
0');
?>

Donnera :

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:sma
ll-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 :

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 di!é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 (http://www.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

Ei!el : ei!el

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

OpenO!ice 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 su!it simplement d'utiliser la feuille XML, puisque c'est la même syntaxe.

Notez que d'autres systèmes existent aussi, certains sont plus évolués mais plus compliqués à
mettre en place, et inversement.

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).
: