[Sujet] Coloration syntaxique de la balise code

[Riku Asakura]

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.

[Threax]

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.

[Riku Asakura]

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

Merci Threax

[Ea]

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 :

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.

[Riku Asakura]

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)

Bon dimanche à tous.