Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Vous avez un site web, et vous souhaiteriez colorer vos codes sources comme sur le Site du Zér0, 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.
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 le placer à la racine 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.
Ben oui, maintenant que je l'ai installé, comment l'utiliser ?
C'est là que ça se corse
. 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 faudra faire un peu de copier-coller... ou utiliser une technique plus astucieuse (j'expliquerai en détail en bas).
Détaillons le code :
Code : PHP1
2
3 | <?php
include_once('geshi.php');
?>
|
Ici, il y a juste à inclure le fichier
geshi.php, par rapport au fichier actuel. Ici, par exemple, c'est s'il est dans le même dossier que celui où vous travaillez.
Code : PHP1
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 ci-dessous).
Code : PHP1
2
3 | <?php
$geshi = new GeSHi($source, $language);
?>
|
Ceci va créer un nouvel objet appelé "GeSHi" qui va contenir le code source et le langage.
Code : PHP1
2
3 | <?php
echo $geshi->parse_code();
?>
|
Enfin, cette ligne va afficher le résultat.
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 ? Car il créait un objet indispensable pour les fonctions telles que les numéros de lignes, le changement de couleurs... mais si vous ne comptez pas les utiliser, utilisez cette fonction courte.
La fonction est :
geshi_highlight() 
! Voici son usage :
Code : PHP1
2
3 | <?php
geshi_highlight($source, 'php', $path);
?>
|
: 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 : PHP1
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 : PHP1
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
pour les espaces et des
<br /> pour les sauts de lignes. 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 : PHP1
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 : PHP1
2
3 | <?php
$geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
?>
|
Si vous voulez utiliser les lignes colorées, vous devez mettre ceci :
Code : PHP1
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 ?
Avec
set_style_line().
Code : PHP1
2
3 | <?php
$geshi->set_line_style('color: #fcfcfc;');
?>
|
Vous devez alors simplement mettre une propriété CSS qui définira le style du n° de ligne.. Si vous utilisez les balises colorées, vous devez mettre la couleur des lignes secondaires après une virgule :
Code : PHP1
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 :
Changer les couleurs des fonctions
Tout comme les numéros de ligne, les changement de couleurs 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 : PHP1
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 (
) :
Code : PHP1
2
3 | <?php
$geshi->set_keyword_group_style(3, 'color: #FF0000; background-color:#000000');
?>
|
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 :
Code : PHP1
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 : PHP1
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 : PHP1
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 :
Bon : je vous conseille bien sûr de prendre des styles de meilleurs 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...).
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 ?
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 supportent 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 !
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.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
678 Zéros connectés |
7 requêtes |
0.4218s (0.4094s)
