Créer un BBCode avec PHP et GeSHi

Dans ce tutoriel nous allons voir comment faire du zCode (ou bbCode c’est synonyme) avec php et GeSHi. Un bbCode c’est un système utilisé pour permettre aux visiteurs de mettre en forme leurs textes de manière simple et en évitant d’autoriser le code Html dans les champs des formulaires (ce qui est très dangereux !). Le principe est relativement simple, les visiteurs doivent taper des « balises » autour d’une chaine de caractère pour la mettre en forme. Un exemple :

Le visiteur tape ceci :

Lorem ipsum <gras>dolor</gras> sit amet, consectetu

Et automatiquement c’est remplacé par ceci :

Lorem ipsum dolor sit amet, consectetu

Avant d’aller plus loin dans le tutoriel, je vous conseille de regarder l’article sur l’intégration de TinyMCE dans un formulaire, car c’est un script « tout fait » beaucoup plus fonctionnelle et performant que celui que je propose. Néanmoins il est plus lourd …
De plus dans le tutoriel que je vous propose, nous allons créer une balise « <code> » qui permet d’insérer du code (html, css, php et bien plus) et de le colorer automatiquement (comme sur notepad++ ou scite par exemple) !

Contrairement aux autres tutoriels, la on peut dire que c’est assez difficile quand même ! Premièrement, ce que je vous conseille c’est d’aller lire les 2 chapitres sur le siteduzéro concernant les expressions régulières (ou regex, c’est la même chose).
Ensuite, il y a quelques petits trucs subtiles comme l’histoire de « gourmand – non gourmand » dans les regex, j’ai vaguement expliqué le bug, mais si vous voulez plus d’information je vous conseille d’aller sur ce site. Pareil pour les options s (explications) et i (explications).
Je pense que vous avez compris le principe du script, mais un petit rappel ne fait pas de mal :

Lorem ipsum <gras>dolor</gras> sit amet, consectetu

Avec une regex, on se débrouille pour repérer la balise « <gras> », ensuite on récupère la chaine qui est après jusqu’à ce qu’on rencontre la balise de fermeture « </gras> » et on remplace tout ça par le code html/css adapté.

Maintenant place aux codes :

1) La page index, le code du formulaire et ce qui nous permet d’afficher le texte :

<?php
	include "zcode/func_code.php";
?>
 
<form name="form" method="post" action="" style="text-align:center;">
	<textarea name="text" cols="50" rows="20"></textarea><br/>
	<input type="submit" />
</form>
<div>
<?php
	if(isset($_POST['text'])){
		echo zcode($_POST['text']);
	}
?>
</div>

2) Le code de la page func_code.php, le coeur de notre système :

<?php

include "geshi.php"; 

function zcode($texte){
	
	$texte = htmlentities($texte);
	$texte = preg_replace_callback("#&lt;code=(.+)&gt;(.*)&lt;/code&gt;#siU", create_function('$matches', 'return code($matches[2], $matches[1]);'), $texte);
	$texte = preg_replace("/&lt;gras&gt;(.*)&lt;\/gras&gt;/siU", "<span class=\"gras\">$1</span>", $texte);
	$texte = preg_replace("/&lt;italique&gt;(.*)&lt;\/italique&gt;/siU", "<span class=\"italique\">$1</span>", $texte);
	$texte = preg_replace("/&lt;souligne&gt;(.*)&lt;\/souligne&gt;/siU", "<span class=\"souligne\">$1</span>", $texte);
	$texte = preg_replace("#&lt;color=(red|green|purple|blue|yellow)&gt;(.*)&lt;/color&gt;#siU", "<span style=\"color:$1\">$2</span>", $texte);
	
	$texte = mynl2br($texte);	
	return($texte);
}

function code($source, $language){
	
	$source = html_entity_decode($source);
	$code = new GeSHi($source, $language); 
	$parse = $code->parse_code();
	$resultat = '<div>Code : '.$language.'<br/>'.$parse.'</div>';
	
	return ($resultat);
	
}


function mynl2br($text) {
   return strtr($text, array("\r\n" => '<br />', "\r" => '<br />', "\n" => '<br />'));
}


?>

N’oublier pas de télécharger GeSHi qui nous permet de colorer le(s) code(s) php, css, html et j’en passe (jetez un oeil dans le dossier de geshi pour voir un aperçu de ce qu’il est capable de faire !).

Voilà, je pense avoir fait le tour, j’ai essayé d’être le plus complet possible d’où les répétitions dans le tutoriel, mais c’est nécessaire car les regex c’est assez compliqué et après avoir fait ce tutoriel je suis un peu plus à l’aise avec et on se rend compte de leurs puissances !
Si vous avez des questions laissez des commentaires ou faites un tour sur le forum et je serai ravi de vous aider !

12 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. GOKU

    Bonjour Madrzejewski Alexis =)
    je vous remercie pour les tuto !
    est il possible de faire l’inverse de geshi transformer le code comme a sont état d’origine ?
    j’ai fait plusieurs recherche et tenter de faire un code, mais en vain 🙁
    j’ai déjà fait l’inverse des balise si vous on avais besoin pour un tuto =)
    bon courage a bientôt.