Coloration syntaxique automatique du CSS

[[Nihil]]

Hello ♥

Petite question par rapport à la coloration syntaxique.
Dans le tutoriel Coloriser les balises de code il est spécifié que pour colorer correctement le CSS il faut rajouter les balises style autour de son CSS.

Néanmoins, sur ce forum, la distinction se fait toute seule ^____^. D'après ce que j'ai compris, le script rajoute la class "lang-css" quand il faut le faire.

Code:

#logo {
    color: red;
}

Est il possible de rajouter cela sur le code du tuto ? Si non, des pistes pour pouvoir le faire ^^ ? J'avoue que je n'ai pas encore beaucoup cherché, car je me suis dit que vous alliez peut être partager :p

Bonne soirée !

[Ea]

Bonjour,


Le code qu'on utilise sur le FDF est le suivant :

Code:

$(function () {
    if (!is_ie && $("code").filter(function () {
        var a = $(this).text(),
            b = a.indexOf("["),
            c = a.indexOf("]"),
            d = a.indexOf("[/"),
            e = a.indexOf("<"),
            f = a.indexOf('"'),
            g = a.indexOf("'"),
            h = a.indexOf("/");
        return 5000 > a.length && (-1 == b || -1 == c || -1 == d || b > c || c > d || -1 != e && e < b || -1 != f && f < b || -1 != g && g < b || -1 != h && h < b)
    }).each(function () {
        $(this).wrapInner('<pre class="prettyprint' + (-1 == $(this).text().indexOf("<") && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')
    }).length) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = !0;
        s.src = "http://forum.forumactif.com/12076.js";
        document.getElementsByTagName("head")[0].appendChild(s)
    };
});

La première partie :

Code:

if (!is_ie && $("code").filter(function () {
        var a = $(this).text(),
            b = a.indexOf("["),
            c = a.indexOf("]"),
            d = a.indexOf("[/"),
            e = a.indexOf("<"),
            f = a.indexOf('"'),
            g = a.indexOf("'"),
            h = a.indexOf("/");
        return 5000 > a.length && (-1 == b || -1 == c || -1 == d || b > c || c > d || -1 != e && e < b || -1 != f && f < b || -1 != g && g < b || -1 != h && h < b)
    })

sert à détecter de façon imparfaite si on a un tag bbcode avant un tag html,  si c'est le cas ( ou que le code fait plus de 5000 caractères ) on ne colore pas ( car colorer des codes avec des dizaines de millier de ligne de CSS causait un problème, et il n'y a pas de bonne coloration de bbcode ).

Ensuite :

Code:

$(this).wrapInner('<pre class="prettyprint' + (-1 == $(this).text().indexOf("<") && /[\s\S]+{[\s\S]+:[\s\S]+}/.test($(this).text()) ? " lang-css" : "") + ' linenums" />')

"linenums" permet d'ajouter les numéros de ligne, et on ajoute "lang-css" si il n'y a pas de < dans le code ( ce qui pourrait arriver dans un commentaire ) et si il y a quelque chose qui ressemble à "  ... { ... : ... } ".

Au final on charge le script de coloration ( et l'extension CSS ) : https://forum.forumactif.com/12000.js

On peut comme on l'a fait sur ce forum utiliser la ligne qui met le lang-css.

Mais toute cette façon de faire présente plusieurs problèmes où ça peut colorer d'une mauvaise façon dans un certain nombre de cas ( < dans un commentaire, { : } présent sans que ce soit du css, ... ), c'est pourquoi ce ne sera probablement pas dans le tutoriel.

La version d'il y a 4 ans permettait de spécifier un langage mais au remaniement du tutoriel ça a été simplifié par <sql> et <style> car les autres cas étaient peu rencontrés.

Coloriser les balises de code

Cette astuce donne la marche à suivre pour permettre de coloriser les balises de code donc avoir : Alors qu'on aurait au départ par exemple ce rendu là : 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 */ Puis si vous avez déjà une feuille javascript liée à toutes les pages du forum vous pouvez y ajouter le code javascript se trouvant ici. Si vous n'en n'avez pas alors il faut : Créer une page html ( PA > Modules > Gestion des pages HTML > Créer une nouvelle page HTML ). Mettre un titre ( il n'a pas d'importance mais il ne faut pas qu'il soit vide ^^ ), ne pas utiliser le haut ni le bas de page de votre forum, mettre comme code HTML abc et puis cliquer sur le bouton Valider. Remplacer le abc du code html par le code dans le cadre noir sur la page ici. Ensuite cliquer de nouveau sur le bouton Valider pour enregistrer. Retourner dans la liste des pages html ( PA > Modules > Gestion des pages HTML ) et retenir l'ID de la page que vous venez de créer qui se trouve dans la colonne Page ID à la ligne de la page créée. Ajouter dans la description du forum ( PA > Général > Forum | Configuration > Description du site ) cette balise en remplaçant le 1 par l'ID de votre page : Code: <script src=/-h1.htm></script> La dernière chose à faire est d'enregistrer la description en cliquant sur le bouton Enregistrer et la mise en place de ce script permettant de coloriser les balises de code est terminée ^__^ Pour ce qui est de l'utilisation tout d'abord ce n'est pas parfait et certains langages peuvent être très peu complet mais dans tout les cas il y a deux cas : Soit il s'agit d'un code bash, de language de type c, d'html, de sql, de java, de javascript, de makefile, de perl, de python, de ruby, de shell, ou d'xml et il suffit juste mettre la balise Code: ... . Soit il s'agit d'un des langages suivant : Langage assembleur d'AGC/AEA ( cc-apollo ) Langage CSS ( cc-css ) Langage Haskell ( cc-hs ) Langage Lisp ( cc-lisp ) Langage Lua ( cc-lua ) Langage ML ( cc-ml ) Format des protocoles de buffers ( cc-proto ) Langage Scala ( cc-scala ) Langage SQL ( cc-sql ) Langage Visual Basic ( cc-vb ) Langage VHDL ( cc-vhdl ) Syntaxe Wikipédia ( cc-wiki ) Langage Yaml ( cc-yaml ) Dans ces cas si vous n'avez pas activé le html ( voir ici comment faire ) il faut que vous mettiez la balise Code: ... dans une case d'un tableau avec comme classe ce que j'ai mis en vert entre parenthèse à côté du langage ci-dessus, donc si vous voulez mettre du CSS vous n'avez qu'à mettre : Code: [table class=cc-css][tr][td][code]body { color: #ff0000; }[/code][/td][/tr][/table] Pas contre si vous avez activé le html vous avez d'autres options, vous pouvez juste ne pas mettre un tableau mais une autre balise avec le même nom de classe ou bien tout simplement mettre une balise de ce nom de classe, voici un exemple des 2 : Code: <div class=cc-sql>[code]code sql[/code]</div> <cc-sql>[code]code sql[/code]</cc-sql> Et voilà c'est tout ce qu'il y avait à dire, voici juste pour finir le code du message qui est affiché sur la première et deuxième ( en ayant désactivé le script ) image du tutoriel : Code: <cc-css>[code].str { color: #080; } .kwd { color: #008; } .com { color: #800; }[/code]</cc-css> [code]$(document).ready(function(){  $('*').each(function(){  $(this).removeClass();  }); });[/code] <cc-sql>[code]SELECT * FROM Products WHERE cost BETWEEN 1000 AND 4000;[/code]</cc-sql>

Cette astuce a été rédigée par le Staff du Forum des Forums, utilise le plugin google-code-prettify, Et a été réalisée au départ par Etana. Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI. Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.

Cela ne fonctionnera pas car le code javascript a été changé.


Enfin bon, tout cela repose sur la version de http://code.google.com/p/google-code-prettify/ d'il y a plusieurs années, et à l'époque c'était la solution qui me semblait la plus intéressante.

Désormais si je fais une courte recherche google il y a http://prismjs.com/ http://craig.is/making/rainbows et http://highlightjs.org/ qui je pense n'étaient pas disponible à l'époque, et le dernier semble assez bien pour la détection de langage automatique.

On pourrait probablement passer le tutoriel dessus.

Cordialement.

[[Nihil]]

Merci beaucoup d'avoir pris le temps de me faire une réponse complète !
Grâce à ça, j'ai bien compris comment tout cela fonctionnait (:

J'utilise déjà hightlight.js pour d'autres projets, je vais donc essayer de le mettre sur mon ForumActif ! (en fait, en re-lisant ce topic, je pense déjà voir comment je vais faire )

Merci encore pour cette réponse, je passe en "Résolu" avec plaisir !