Publié le 21/01/2011
Auteur fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
0 commentaires

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 sur les portions de code source.

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, ...).
1082_none1082_highlight

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.

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
news - nos-realisations
Mise a jour
21/01/2011
Visualisation
vu 4203 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 267 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Josalado dans CMS

je n'arrive pas à installer le logiciel <br>Message d'erreur : l'assistant d'installation n'a pas pu créer le dossier C:\program Files\Olibul <br>...

Publié par Altair dans tuto

Bonjour, cette solution fonctionne-t-elle également sur les serveurs mutualisés Amen svp ?

Publié par slimaneboufnar2011 dans CMS

merci de votre aide <br>

Publié par Jacky dans tuto

Yes ! Merci pour l'astuce, c'est ce qu'il me fallait :) !

Publié par hilflo dans tuto

Pour Romaingineer, essaye d'aller voir dans le fichier functions.php dans ton theme, tu dois avoir des functions wp_enqueue_style ou wp_enqueue_script, c'est la que tu pourras faire des modifs