[Sujet] Coloration syntaxique de la balise code

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Une coloration syntaxique directement intégrée aux forums ?

[Sujet] Coloration syntaxique de la balise code Left1183%[Sujet] Coloration syntaxique de la balise code Right11 83% 
[ 10 ]
[Sujet] Coloration syntaxique de la balise code Left1117%[Sujet] Coloration syntaxique de la balise code Right11 17% 
[ 2 ]
 
Total des votes : 12
 
 
Sondage clos

Validé [Sujet] Coloration syntaxique de la balise code

Message par Riku Asakura Dim 10 Juil 2011 - 13:06

Bonjour à tous,

Il me semblait que le sujet avait été abordé sur ce forum, mais impossible de le retrouver.
En espérant qu'il n'ai pas fini à la poubelle et le mien ne subisse pas le même sort, je propose une fonctionnalité relativement simple à mettre en œuvre aussi bien pour les utilisateurs que pour les développeur de F-A (a priori).

La coloration syntaxique est un procédé qui consiste à colorer une partie d'une phrase en fonction de sa syntaxe.
C'est très utile dans un code HTML, CSS, PHP, JS, etc.
En effet, le code est composé d'éléments distincts qui lui permettent de donner des résultats bien différents dans certain cas.
Par exemple, un code HTML qui ressemblerait à cela :
< a href="/forum.php" target="_blank" title="Retour au forum">Forum< /a >

pourrait aisément être embelli et rendu plus clair :
< a href="/forum.php" target="_blank" title="Retour au forum">Forum< /a >

J'utilise plusieurs solutions en fonctions de mes sites web, mais la plus rapide à implémenter semble être celle proposée sur Google-Code (Prettify).
http://code.google.com/p/google-code-prettify/downloads/list
dont voici le README :
http://google-code-prettify.googlecode.com/svn/trunk/README.html

Le code BBcode associé pourrait rester le même et offrirait quelques bonus :
Code:
[ c o d e = h t m l ]< ! - -   h t m l  - - >[ / c o d e ]
Code:
[ c o d e = c s s ] e l e m e n t   {   d i s p l a y :   b l o c k ;  }[ / c o d e ]

Voili voiloù.

Navré si le sujet a déjà été abordé, je ne l'ai pas retrouvé.

Merci.

PS : je sais que l'astuce existe ici : https://forum.forumactif.com/t287569-coloriser-les-balises-de-code#2538388, l'idée serait d'implémenter cela directement dans nos forums en proposant à l'administrateur de l'activer, ou non (pour ne pas alourdir inutilement le chargement du forum en faisant un appel au JS), ou pour ceux qui souhaiterait obtenir cette fonctionnalité sans entrer dans des manipulations trop complexes pour eux.
Riku Asakura

Riku Asakura
**

Masculin
Messages : 97
Inscrit(e) le : 04/01/2007

http://never-utopia.com
Riku Asakura a été remercié(e) par l'auteur de ce sujet.

Validé Re: [Sujet] Coloration syntaxique de la balise code

Message par Threax Dim 10 Juil 2011 - 13:14

Bonjour,

A l'avenir, merci de lire les règles avant de poster une suggestion. Le sondage doit comporter 2 choix (pour / contre) et un délai de 30 jours.
J'ai mis votre sondage en conformité pour cette fois. Wink
Threax

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Validé Re: [Sujet] Coloration syntaxique de la balise code

Message par Riku Asakura Dim 10 Juil 2011 - 13:17

Aïe.
Moi qui n'aime pas ce genre de comportement d'habitude, je fais un beau boulet.

Merci Threax Wink
Riku Asakura

Riku Asakura
**

Masculin
Messages : 97
Inscrit(e) le : 04/01/2007

http://never-utopia.com
Riku Asakura a été remercié(e) par l'auteur de ce sujet.

Validé Re: [Sujet] Coloration syntaxique de la balise code

Message par Ea Dim 10 Juil 2011 - 13:24

Bonjour,


je sais que l'astuce existe ici : https://forum.forumactif.com/t287569-coloriser-les-balises-de-code#2538388, l'idée serait d'implémenter cela directement dans nos forums en proposant à l'administrateur de l'activer, ou non (pour ne pas alourdir inutilement le chargement du forum en faisant un appel au JS), ou pour ceux qui souhaiterait obtenir cette fonctionnalité sans entrer dans des manipulations trop complexes pour eux.
"(pour ne pas alourdir inutilement le chargement du forum en faisant un appel au JS)" l'astuce utilise "google-code-prettify" et google code prettify comme 90% des scripts pour coloriser du code c'est du JS, donc que ça soit par une option dans le PA ou utilisant un script ( ce que l'option dans le PA ferait vu que google code prettify est un script ) ne change rien.

ou pour ceux qui souhaiterait obtenir cette fonctionnalité sans entrer dans des manipulations trop complexes pour eux
Pour la mise en place il y a la manipulation très complexe :

Etana a écrit:Il faut d'abord ajouter dans le CSS ( PA > Affichage > Couleurs > Feuille de style CSS ) le code suivant ( qui est modifiable selon ce que vous souhaitez ) :

Code:
/* Début - Styles pour la colorisation des codes */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; }
ol.linenums { margin-top: 0; margin-bottom: 0 }
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}

/* Fin - Styles pour la colorisation des codes */


Ensuite il suffit d'ajouter ce code javascript ici sur les sujets ( voir les codes javascript ).
Qui doit prendre à tout casser 30 secondes...

Enfin je suis pour la suggestion mais la complexité / js supplémentaire ce n'est pas un argument valable =P

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Validé Re: [Sujet] Coloration syntaxique de la balise code

Message par Riku Asakura Dim 10 Juil 2011 - 14:51

Hello,

Le plus difficile quand on connait quelque chose, c'est de ce mettre à la place de ceux qui ni connaissent pas grand chose (comme on ne peut pas désapprendre).
Même si, je te l'accorde, l'activation de cette option est avant tout destinée à un utilisateur aguerri et qui, a priori, aurait des connaissances en CSS, tout le monde n'a pas forcément cette facilité de lecture ou d'adaptation.

Le code que tu fournis est sympa et, certes, facile à mettre en place, mais ça ne veut pas dire qu'il sera compris, juste qu'il sera copié/collé.

Quitte à offrir une manipulation incomprise, autant l'automatisée.

Concernant le chargement du fichier JS, tu ne m'as pas compris.
Si l'option n'est pas activée dans le backoffice, alors le fichier JS ne sera pas chargé. Si elle est activée, alors ce fichier JS (et pourquoi pas les codes CSS afférents) sera chargé.
L'idée étant toujours d'optimiser un maximum les interfaces.

Enfin, le fait d'avoir le fichier directement inclus dans un forum évitera l'erreur 404 déjà rencontrées avec cette astuce.

Merci pour ton intervention Etana (et pour ton astuce) Smile

Bon dimanche à tous.
Riku Asakura

Riku Asakura
**

Masculin
Messages : 97
Inscrit(e) le : 04/01/2007

http://never-utopia.com
Riku Asakura a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum