MAJ - Coloration des exemples et codes sources

Sur le site fobec.com, les tutoriels contiennent généralement des codes sources pour rendre l'exemple plus concret. Afin d'en améliorer la lisibilité, nous avons mis en place une coloration syntaxique par langage de programmation.

Principe de la coloration syntaxique
Les copies d'écran ci-dessous reprennent le script PHP de l'article sur le dessin de graphique sans flash avec la librairie GD, à gauche le code source sans formatage, à droite coloration syntaxique spécifique au PHP. Le principe consiste à appliquer une couleur différente en fonction du type de texte (variable, string, nom de fonction, ...)



Utiliser la coloration dans vos articles
La coloration syntaxique améliore la lisibilité d'un code source en mettant en évidence les structures du langage de programmation. Ainsi nous vous demandons de mettre en couleur les scripts présentés dans vos articles à l'aide de l'outil en ligne csHighlight.

Comment fait-on ?
coller le code source dans la zone de texte,
sélectionner le langage de programmation,
cocher la colorisation "feuille CSS",
lancer le formatage "bouton coloriser"
copier le texte "apercu" puis coller directement dans l'éditeur d'article du site.


Choix technologique
La coloration syntaxique s'obtient en délimitant les mots clés avec des balises couleur. En langage HTML, le balisage s'obtient en ajoutant des balises span autour des portions de texte.
Il existe 2 techniques pour réaliser la coloration syntaxique:
- le balisage dynamique en Javascript,
- un formatage statique dans le code HTML de l'article.
Nous avons opté pour la deuxième solution pour accélérer l'affichage des pages du site.