Aller au menu - Aller au contenu

Icône [GeSHi] Colorer son code

Par Avatar DeadPixel
Mise à jour : 22/08/2008
70 visites depuis 7 jours , classé 629/777
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.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

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.

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.
Retour en haut

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 :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<?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 :

Code : PHP
1
2
3
<?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.

Code : PHP
1
2
3
4
5
6
7
8
9
<?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).

Code : PHP
1
2
3
<?php
$geshi = new GeSHi($source, $language);
?>

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

Code : PHP
1
2
3
<?php
echo $geshi->parse_code();
?>

Enfin, cette ligne va afficher le résultat.
Retour en haut

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 :

Code : PHP
1
2
3
<?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... :

Code : PHP
1
2
3
4
5
6
7
8
<?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 ?

Code : PHP
1
2
3
<?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 :

Code : PHP
1
2
3
4
5
<?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 :

Code : PHP
1
2
3
<?php
$geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
?>


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

Code : PHP
1
2
3
<?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(). ;)
Code : PHP
1
2
3
<?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 :

Code : PHP
1
2
3
<?php
$geshi->set_line_style('background: #fcfcfc;', 'background: #f0f0f0;'); 
?>


Si on prend cet exemple :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?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


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é :

Code : PHP
1
2
3
<?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 ) :

Code : PHP
1
2
3
<?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 :

Code : PHP
1
2
3
<?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 */).

Code : PHP
1
2
3
4
5
<?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 :

Code : PHP
1
2
3
4
5
6
<?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...).
Retour en haut

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.
Retour en haut
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).
Retour en haut

Partager

Retour en haut
65 commentaires pour "[GeSHi] Colorer son code"
Note moyenne : 4.00 / 4 (11 votes)
Pseudo Commentaire
Hors ligne fab@c++ # Posté le 22/02/2011 à 19:37:15
Impossible n'est pas français
Avatar

 Moi ce qui m'énerve, c'est que Geshi rajoute des liens vers des pages de doc sur les balises, donc quand je fais éditer mon bbcode, ca fout le borderl

legeekcafe.com : site communautaire d'informatique et bien plus.


The Blender Community : site de tutoriaux gratuits (déjà 1 tuto !!)

So-pix.fr site web de graphisme || ma brute || WIP Play Station 2 Slim


 
Hors ligne Polo03 # Posté le 28/02/2011 à 15:02:37
Windauber tue
Avatar

Avis : Très bon

Super tuto !!!
Depuis le temps que je cherchais a faire des cadres pour metttre mon code (comme sur le SDZ !!) :p :) :D

MAIS (parce'ke ya toujours un "mais" !! ) :colere:


Voila ce qu'il me met quand j'ouvre ma page avec wamp :

Image utilisateur

Et voila mon code source (au cas où vous trouviez la solution) :
Image utilisateur
"Un programme informatique fait ce que vous lui dites de faire, pas ce que vous voudriez qu'il fasse."
Image utilisateur






 
Hors ligne robin850 # Posté le 06/04/2011 à 16:45:16
Avatar
close

Ville : Avesnes-sur-helpe
Pays : France métropolitaine

 Super tutoriel. :) Merci. Il est assez léger mais puissant quand même.
Pardonnez mes fautes d'orthographe.
Image utilisateur


Utilisation de Twig, un moteur de Templates
 
Hors ligne fab@c++ # Posté le 15/05/2011 à 19:30:25
Impossible n'est pas français
Avatar

 J'ai suivi ton tuto et la doc, et voici le résultat : mon code

et ma fonction :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?php
function code($source, $language){

    $source = html_entity_decode($source);
    $code = new GeSHi($source, $language);
    $code->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 2);
    $code->set_line_style('background: #fefefe;', 'background: #f0f0f0;'); 
    $code->enable_keyword_links(false);
    $parse = $code->parse_code();
    $resultat = '<span style="font-family: Comic Sans MS;">Code : '.$language.'</span><div class="code">'.$parse.'</div>';
 
    return ($resultat);
}
?>


elle est appelé de cette façon :

Code : PHP
1
2
3
<?php
$message = preg_replace_callback('#\[code type=&quot;(.+)&quot;](.*)\[/code\]#isU', create_function('$matches', 'return code($matches[2], $matches[1]);'), $message);
?>

legeekcafe.com : site communautaire d'informatique et bien plus.


The Blender Community : site de tutoriaux gratuits (déjà 1 tuto !!)

So-pix.fr site web de graphisme || ma brute || WIP Play Station 2 Slim


 
Hors ligne remontees # Posté le 11/12/2011 à 09:42:00
Symfony2 : super... ou pas !
Avatar

 Et pas de BBCode en coloration syntaxique ?
Pensez à indiquer les messages qui vous ont aidé et à indiquer vos problèmes résolus ;)
XHTML 1.0/CSS <= 2 : IIIIIIIIII
PHP/MySQL : IIIIIIIIII
Javascript : IIIIIIIIII
HTML5/CSS3 : IIIIIIIIII



Citation
Je sais plus ce que j'écrivais ! :)
Qui que quoi dont où
Alors j'ai activé la prévisualisation automatique !
Citation : Moi
Eh oui

Et maintenant je suis tranquille !



Mon site : http://remontees.free.fr
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.