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 3228 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Tom dans java

Hello!
Cependant, mon Eclipse ne reconnait pas HttpLoader comme type valide...
Comment faire pour que ca marc...

Publié par Tchatche dans news

Salut a tous,
@ Outsourcing je suis tout a fait d'accord avec toi que le Pagerank d'un site (ou page) n'est pas un gage de bonnes positions sur Google,on peut tous citer des sites ay...

Publié par Fobec dans php5

En effet, Twitter a modifie la structure de son API. P'etre qu'un jour, on trouve le temps pour finaliser un wrapper pour la version 1.1

Publié par Tytydodo dans java

Top cool merci cela ma super aide!!!

Publié par Souti dans php5

Merci pour ce code. Trs utile.

Pour mon cas, il a fallu que j'ajoute une } avant ?> le pour fermer le for each.