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)
Le GeSHi permet de mettre du code en couleur, comme sur le Site du Zér0, par exemple. GeSHi signifie :
Generic Syntax Highlighter. Nous allons l'utiliser ici pour intégrer du code dans un forum, ou dans une news par exemple, tout en utilisant des balises de type bbcode.
Vous voyez un petit exemple de ce que le GeSHi peut donner...
Voici les fichiers que vous obtiendrez en suivant ce tuto :
- bbcode.js sera un fichier javascript, qui contiendra le script pour les boutons et les smileys du formulaire
- fonction.php sera un fichier php, qui contiendra les fonctions d'affichage
- bbcode.php sera un fichier php qui servira à la lecture du message. Il sera structuré ainsi : Code : PHP
1
2
3
4 | <?php
// 1ère Partie, affichage et traitement
// 2ème Partie, formulaire
?>
|
Pour pouvoir commencer, vous devez avoir la bibliothèque GeSHi (Generic Syntax Highlighter), qui permet d'éviter d'intégrer plein de
Code : HTML1 | <font color="#FF0000"></font>
|
Pour télécharger la bibliothèque, rendez-vous à l'adresse suivante :
Puis choisissez le fichier correspondant à votre système ou logiciel de décompression :
Décompressez l'archive. Vous devriez avoir les fichiers suivants :
Copiez
geshi.php et le dossier
geshi dans le même répertoire que celui des scripts de votre site
de l'entreprise dont vous êtes le PDG personnel.
Le fichier
geshi.php contient les fonctions, et les fichiers dans "
/geshi" les styles, les éléments du langage sélectionné.
Ça y est, vous pouvez enfin commencer !
Commencez par créer votre fichier javascript qui sera inclus.
Code : JavaScript - Fichier 'bbcode.js' 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 | function bbcode(debut, fin)
{
var input = window.document.formulaire.message;
input.focus();
if(typeof document.selection != 'undefined')
{
var range = document.selection.createRange();
var insText = range.text;
range.text = debut + insText + fin;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -fin.length);
}
else
{
range.moveStart('character', debut.length + insText.length + fin.length);
}
range.select();
}
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + debut + insText + fin + input.value.substr(end);
var pos;
if (insText.length == 0)
{
pos = start + debut.length;
}
else
{
pos = start + debut.length + insText.length + fin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("insertion (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Veuillez taper le texte");
input.value = input.value.substr(0, pos) + debut + insText + fin + input.value.substr(pos);
}
}
function smilies(img)
{
window.document.formulaire.message.value += '' + img + '';
}
|
Voici
fonctions.php, le fichier
le plus dur que je vais essayer de vous expliquer le mieux possible.
Code : PHP - Fichier 'fonctions.php' 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <?php
include_once('geshi.php');
function couleur($matches){
if ($matches[1] == "html"){
$matches[1] = "html4strict"; }
$geshi = new GeSHi($matches[2], $matches[1]);
if ($matches[1] == "html4strict"){
return '<div id="geshi"><strong>Code HTML:</strong><div class="code">'.$geshi->parse_code().'</div></div>';
}
else {
return '<div id="geshi"><strong>Code '.strtoupper($matches[1]).':</strong><div class="code">'.$geshi->parse_code().'</div></div>';
}
}
?>
|
On commence par inclure
geshi.php, que vous avez normalement dans le même répertoire, si vous m'avez bien suivi...
Pour avoir des informations concernant le GeSHi, vous pouvez consulter le tuto de
DeadPixel.
On crée la fonction
couleur(), qui met le texte en couleur selon la syntaxe geshi (vous pouvez d'ailleurs aller voir le tutoriel d'un zéro expliquant la syntaxe).
Arrêtons-nous ici :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12 | <?php
if ($matches[1] == "html"){
$matches[1] = "html4strict"; }
$geshi = new GeSHi($matches[2], $matches[1]);
if ($matches[1] == "html4strict"){
return '<div id="geshi"><strong>Code HTML:</strong><div class="code">'.$geshi->parse_code().'</div></div>';
}
else {
return '<div id="geshi"><strong>Code '.$matches[1].':</strong><div class="code">'.$geshi->parse_code().'</div></div>';
}
}
?>
|
Si on a mis la balise
[code=html][/code], le script remplace
html par
html4strict.
On lance ensuite la fonction de geshi, et on affiche, si c'est du code html, "
Code:HTML", et de la même façon pour les autres codes.
.
On définit ensuite la fonction
code(), qui prend en charge le traitement des données (ici, il n'y a pas de remplacement des smileys et des autres balises de bbcode, mais vous pouvez naturellement les rajouter
) :
Code : PHP1
2
3
4
5
6
7
8 | <?php
function code($texte)
{
$texte= stripslashes($texte);
$texte= preg_replace_callback('`\[code=(.*)\](.*)\[/code\]`isU', 'couleur', $texte);
return $texte;
}
?>
|
A la fin, vous aurez le fichier php
fonctions.php suivant :
Code : PHP - Fichier final 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | <?php
include_once('geshi.php');
function couleur($matches){
if ($matches[1] == "html"){
$matches[1] = "html4strict"; }
$geshi = new GeSHi($matches[2], $matches[1]);
if ($matches[1] == "html4strict"){
return '<div id="geshi"><strong>Code HTLM:</strong><div class="code">'.$geshi->parse_code().'</div></div>';
}
else {
return '<div id="geshi"><strong>Code '.strtoupper($matches[1]).':</strong><div class="code">'.$geshi->parse_code().'</div></div>';
}
}
function code($texte)
{
$texte= stripslashes($texte);
$texte= preg_replace_callback('`\[code=(.*)\](.*)\[/code\]`isU', 'couleur', $texte);
return $texte;
}
?>
|
Vous avez fini les fonctions !
Ce fichier contient le formulaire ainsi que le code de traitement, la partie assez facile du tuto.
Partie Traitement
Voici le début de ce fichier...
Code : PHP1
2
3
4
5
6 | <?php
if ($_GET['action'] == 'ok') {
include ("fonctions.php");
echo code($_POST['message']);
}
?>
|
On récupère les données envoyées en
POST, puis on exécute la fonction
code(), définie dans le fichier
fonctions.php. Enfin, on affiche le résultat !
Partie Formulaire
...et la fin !
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 | <?php
else {
echo'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Un super formulaire!</title>
<script type="text/javascript" src="bbcode.js"></script>
</head>
<body>
<form method="post" action="ecrire.php?action=ok" name="formulaire">
<p><input type="button" id="lien" name="html" value="PHP" onclick="javascript:bbcode(\'[code=php]\', \'[/code]\');return(false)" /></p>
<p><input type="button" id="lien" name="html" value="HTML" onclick="javascript:bbcode(\'[code=html]\', \'[/code]\');return(false)" /></p>
<div><textarea cols="60" rows="9" id="message" name="message"></textarea></div>
<p>
<input type="submit" name="submit" value="Envoyer" />
<input type="reset" name = "Effacer" value = "Effacer"/>
</p>
</form>
</body>
</html>';
}
?>
|
Le formulaire contient les boutons avec les fonctions js au clic (comme sur le Site du Zér0). A l'envoi de celui-ci, il sera traité dans la 1ère partie ci-dessus.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
129 Zéros connectés |
8 requêtes |
0.0536s (0.0426s)
