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 les articles de vos sites internet
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. En effet, le balisage est immédiatement contenu dans le code HTML chargé par le navigateur web. Dans le cas d'une coloration via javascript un délai est nécessaire pour que les fonctions analysent puis colorisent le code source.
