[Résolu] Chili, coloration syntaxique, c'est toujours noir et blanc

Salut à tous

J'ai découvert grâce à Alsa encore une fois, le colorateur syntaxique Chili (avec Jquery).

J'ai installé les script etc etc sur mon serveur. J'ai réécris un bout de parseur pour que je puisse spécifier le langage.

Côté PHP tout roule, j'ai bien mon message sous la forme :

<pre><code="php">blabla</code></pre>

Le sélecteur est bon, puisque c'est toute balise "code", mais ... ça ne fonctionne pas, et je ne comprends rien du tout, tout à l'air bon pourtant.

Merci pour votre aide car je deviens fou fou fou
Modifié par Super_baloo8 (26 Aug 2009 - 18:39)

Bonjour,

Pas bien:

<script src="jquery.js"></script>
<script src="jquery.chili-2.2.js"></script>
<script>
$(document).ready(function(){
	ChiliBook.recipeFolder = "http://www.grid-france.net/fonctions/js/chili/";
	ChiliBook.stylesheetFolder = "http://www.grid-france.net/fonctions/js/chili/"; 
});
</script>

Bien:

<script src="jquery.js"></script>
<script src="jquery.chili-2.2.js"></script>
<script>
ChiliBook.recipeFolder = "http://www.grid-france.net/fonctions/js/chili/";
ChiliBook.stylesheetFolder = "http://www.grid-france.net/fonctions/js/chili/"; 
</script>

Avec la configuration par défaut, Chili est instancié automatiquement lors de l'évènement domready. Mais si tu places les options de configuration dans un $(document).ready(), et que celui-ci est placé dans le code HTML après l'appel de Chili, eh bien Chili sera instancié d'abord, puis les options de configuration supplémentaires seront définies... mais trop tard.

Solutions:
- faire comme la correction proposée ci-dessus (application stricte de la documentation de Chili);
- ou bien modifier la configuration directement dans le fichier source de Chili;
- ou bien modifier le fichier source de Chili pour passer ChiliBook.automatic à false, et par la suite tu peux modifier les propriétés de l'objet ChiliBook pour donner ta configuration, puis il faut instancier Chili toi-même.

Une suggestion à tout hasard: plutôt que d'appliquer Chili à tous les éléments code, ça peut être intéressant de l'appliquer au sélecteur code[ class] (sans espace après le crochet ouvrant).

Une précision pour finir: dans les exemples de code HTML ci-dessus, j'utilise la syntaxe HTML5 par souci de concision. Parce que les sections CDATA juste pour pas faire hurler le validateur du W3C c'est quand même excessivement prise de tête.
Modifié par Florent V. (26 Aug 2009 - 12:56)

Salut Florent,

Merci pour ta réponse !

Il me semble que j'avais essayé au départ sans attendre le chargement complet de la page. Mais je vais réessayer ce soir.

HTML 5, je n'y suis pas encore (j'ai trop avancé sur un de mes projet pour le passer en html 5 maintenant )

Une petite précision, le sélecteur code class sélectionne uniquement les balises code contenant une class ?

Je ne comprends pas la syntaxe de ce sélecteur

Re,

Je viens d'appliquer la modification, sans succès

J'ai essayer aussi d'appliquer le sélecteur "code class" sans succès non plus.

Code avant :

<script type="text/javascript" src="http://www.***.net/fonctions/js/chili/jquery.chili-2.2.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	$('a').filter(function(){ return this.hostname && this.hostname !== location.hostname; }).addClass('ext').attr({ target: "_blank", rel: "nofollow", title: "Ouverture dans une nouvelle fenêtre (site externe)" });
	ChiliBook.recipeFolder = "http://www.***.net/fonctions/js/chili/";
	ChiliBook.stylesheetFolder = "http://www.***.net/fonctions/js/chili/"; 
	});
//]]>
</script>

Code après :

<script type="text/javascript" src="http://www.***.net/fonctions/js/chili/jquery.chili-2.2.js"></script>

<script type="text/javascript">
//<![CDATA[
ChiliBook.recipeFolder = "http://www.***.net/fonctions/js/chili/";
ChiliBook.stylesheetFolder = "http://www.***.net/fonctions/js/chili/"; 
$(document).ready(function(){
	$('a').filter(function(){ return this.hostname && this.hostname !== location.hostname; }).addClass('ext').attr({ target: "_blank", rel: "nofollow", title: "Ouverture dans une nouvelle fenêtre (site externe)" });
	});
//]]>
</script>

J'y comprends vraiment rien, j'ai tout fait comme la doc l'indique, et ça ne fonctionne pas chez moi.

Hier soir j'ai oublié de préciser, mais j'ai même vérifier la configuration que j'avais mise par rapport à alsacreations, et ... ca ne m'a pas avancer pour autant.

Merci pour votre aide !
Modifié par Super_baloo8 (26 Aug 2009 - 18:38)

J'ai compris ce qu'il me fait, mais je ne comprends pas pourquoi.

Quand je regarde les éléments de la dom, il me trouve bien le nom de la class du code, (php et html pour mes exemples).

Mais, en temps qu'enfant du noeud, il me charge le contenu de ma page entière.

Je ne sais pas d'où ça peut venir
Modifié par Super_baloo8 (25 Aug 2009 - 20:29)

Pour commencer, le sélecteur recommandé était code[ class] (sans espace après le crochet ouvrant). La fonction BBcode du forum a fait des siennes...

Pour ta page de test, eh bien cette fois en regardant les requêtes HTTP (via Firebug, mais il y a d'autres outils comme LiveHTTPHeaders par exemple), il semblerait que le code JavaScript lance deux requêtes HTTP 1.1 en utilisant la méthode OPTIONS (plutôt que directement GET).

OPTIONS /js/chili/php.js

Host	 www.grid-france.net
 
User-Agent	Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr-FR; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
Accept	text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language	fr-FR,fr;q=0.7,chrome://global/locale/intl.properties;q=0.3
Accept-Encoding	gzip,deflate
Accept-Charset	ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive	300
Connection	keep-alive
Origin	 http://www.grid-france.fr
 
Access-Control-Request-Method	GET
Access-Control-Request-Headers	x-requested-with

Et le serveur répond:

200 OK

Date	Wed, 26 Aug 2009 11:05:38 GMT
Server	Apache
Allow	GET,HEAD,POST,OPTIONS,TRACE
Vary	Accept-Encoding
Content-Encoding	gzip
Content-Length	20
Keep-Alive	timeout=15, max=100
Connection	Keep-Alive
Content-Type	application/x-javascript

(Dit autrement: tiens, voilà du JavaScript, et ça fait 20 octets.)

20 octets pour ton script php.js, là j'y crois pas. L'onglet «Réponse» ne montre rien dans Firebug. À tester avec d'autres outils, peut-être.

Donc, pour une raison que j'ignore:
- le script JS (en utilisant les méthodes jQuery) fait une requête OPTIONS plutôt que GET;
- le serveur ne renvoie aucun contenu (tandis qu'un accès direct, donc un GET, donne bien le contenu du fichier).

Ca commence à devenir très technique, mais je vais apprendre tout ça.

Je vais modifier le sélecteur, pour voir si c'est lui qui pose problème au changement d'obtention des script des langages.

Est-ce que le fait d'avoir les script (qui sont chargé par le premier script appellé (Chili.2.2.js)) qui soient héberger sous un autre NDD pourrais poser ce problème ?

Je regarde ça dès que je suis chez moi, je pense que le problème viens simplement de là.

Merci mille fois Florent pour ces explications très précises ainsi que pour le temps que tu y a consacré !

Super_baloo8 a écrit :
Est-ce que le fait d'avoir les script (qui sont chargé par le premier script appellé (Chili.2.2.js)) qui soient héberger sous un autre NDD pourrais poser ce problème ?

À vrai dire je n'en sais rien. C'est une piste intéressante.
Par contre je pense pouvoir affirmer que ça ne vient pas du sélecteur. Celui que je propose, c'est juste pour avoir un sélecteur plus précis, qui ne s'appliquera pas à des éléments non souhaités.

Et voilà, la solution était toute simple, c'est bien le problème du NDD !

Il fallait simplement laissez les script sur le même "hébergement" sous le même nom de domaine.

Merci encore Florent pour ce débug !!!

P.S : j'ai supprimé les liens vers le site pour éviter un détournement du référencement
Modifié par Super_baloo8 (26 Aug 2009 - 18:40)