[UTILE] Colorisation du code source

davyk · 17/10/2009 06:38:19

Voilou ma deuxième contrib de la soirée (enfin, à 6h20..)

tout est dit dans le titre, j'ai utilisé CodeMirror (infos: http://marijn.haverbeke.nl/codemirror/ ), cerise sur le gâteau, le js agit en temps réel et, en plus de coloriser le(s) code(s) (html, php,css,etc..) , il affiche en surligné rouge (pas dans tous les cas malheureusement) les erreurs php.
puisque dans notre cas il s'agit d'un textarea, et bien ça se colorise presque à mesure que l'on écrit!!!!
la licence me semble ok.

pour ce faire il faut ce zip:

http://mmultimediaservice.free.fr/js.zip à dézipper directement à la racine du site

ensuite dans le header du template rajouter:

  <script src="js/colcod/js/codemirror.js" type="text/javascript"></script>

puis, toujours dans le template, juste avant la fermeture de la balise </body> rajouter

	    <script type="text/javascript">
      var editor = CodeMirror.fromTextArea('code', {
        height: "350px",
        parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",
                     "tokenizephp.js", "parsephp.js",
                     "parsephphtmlmixed.js"],
        stylesheet: ["js/colcod/css/xmlcolors.css", "js/colcod/css/jscolors.css", "js/colcod/css/csscolors.css", "js/colcod/css/phpcolors.css"],
        path: "js/colcod/js/",
        continuousScanning: 500
      });
    </script>

enfin, dans zite.php il faut donner l'id="code" aux 2 <textarea>

enjoy

++ vYk

un petit rien qui rend notre ziteplus plus bô

EDIT:

ça y est, le module de colorisation baptisé codcol est dispo ici:
http://mmultimediaservice.free.fr/codcol_0.9.zip
(à extraire tel quel à la racine du site)

EDIT2:

la nouvelle version du module de colorisation est dispo ici:
http://mmultimediaservice.free.fr/CoDCoL_1.3.zip
(à extraire tel quel à la racine du site)

Dernière modification par davyk (01/11/2009 06:12:59)

Fredo42 · 17/10/2009 08:45:12

Va falloir que je teste ça!

Fredo42 · 17/10/2009 09:35:01

davyk a écrit :

enfin, dans zite.php il faut donner l'id="code" aux 2 <textarea>

J'ai la flème de chercher... tu as les lignes?

davyk · 17/10/2009 12:57:25

yes 755 et 810 mais si tu utilises notepad++ ou n'importe quel autre éditeur, tu as une fonction recherche, bien pratique quand il y a 1046 lignes de code!

++ vYk

Fredo42 · 17/10/2009 15:05:14

J'utilise Notepad++ v5.5.1 mais je l'ai même pas ouvert avant d'écrire le message... honte à moi.
J'ai fait les modifs sur un zite+ vierge, ça fait super sympa!
Je vais le mettre sur mon zite+ en prod pour le tester à fond et voir comment il se comporte!

Belle trouvaille en tout cas!
@+

davyk · 17/10/2009 16:03:16

juste un ti pb avec la coloration du code de style.css, je m'en occupe.

davyk · 17/10/2009 16:40:34

voilà, fini la petite modif, dans le template en lieu et place du script js, on met:

  <?php $p= $this->base; $s= $_GET['z']; $t= ''.$p.''.$s.''; if ($t == 'index.php?z=source_editor|files_style') {echo '<script type="text/javascript"> 
  var editor = CodeMirror.fromTextArea("code", {
    height: "550px",
    parserfile: "parsecss.js",
    stylesheet: "js/colcod/css/csscolors.css",
    path: "js/colcod/js/"
  });
</script> ';} else {echo ' <script type="text/javascript">
      var editor = CodeMirror.fromTextArea("code", {
        height: "550px",
        parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",
                     "tokenizephp.js", "parsephp.js",
                     "parsephphtmlmixed.js"],
        stylesheet: ["js/colcod/css/xmlcolors.css", "js/colcod/css/jscolors.css", "js/colcod/css/csscolors.css", "js/colcod/css/phpcolors.css"],
        path: "js/colcod/js/",
        continuousScanning: 500
      });
    </script>';}?>

voilou c'est fini

++ vYk

Fredo42 · 18/10/2009 00:16:48

J'ai installé directement le nouveau code sur mon zite+ en prod, et pour modifier le zite.php je l'ai rajouté sur config.ini, ça évite de passer par le fpt... et ton script me surligne en rouge de multiples morceaux de ligne en rouge dans zite.php...
je sais que le code est bon puisque c'est pas moi qui l'ai fait mais jpg donc...??

Edit: grosse galère pour poster le message!

Error: Unable to connect to MySQL and select database. MySQL reported: Too many connections.

davyk · 18/10/2009 04:42:06

normalement, codemirror surligne en rouge ce qui paraît être faux (car ce js a une fonction de parser, littéralement, ce qui peut révéler des parse errors)
dis-moi Fred, tu as mis zite.php dans la page de config
petite question à la c*n: pourquoi?

Fredo42 a écrit :

Edit: grosse galère pour poster le message!
Error: Unable to connect to MySQL and select database. MySQL reported: Too many connections.

perso, comme hébergeur je pense que ovh sucks
bcp de ralentissements lors de posts de messages,nombreux freeses, je recommande 1and1; pour même pas 200 balles par an. nom de domaine inclu, avis à Michael
++ vYk

PS:

Fredo42 a écrit :

je sais que le code est bon puisque c'est pas moi qui l'ai fait mais jpg donc...??

ne doutes pas de toi comme ça, c"est pas bon pour ton karma

Dernière modification par davyk (18/10/2009 05:10:08)

Fredo42 · 18/10/2009 09:34:46

davyk a écrit :

normalement, codemirror surligne en rouge ce qui paraît être faux (car ce js a une fonction de parser, littéralement, ce qui peut révéler des parse errors)
dis-moi Fred, tu as mis zite.php dans la page de config
petite question à la c*n: pourquoi?

Tout simplement pour pouvoir modifier zite.php directement depuis mon site en ligne et non via un ftp...

davyk · 18/10/2009 11:27:15

j'avais bien dit que c'était une question con.
si ça te gonfle: tu peux éditer le fichier phpcolors.css dans js/codcol/css/
et enlever
span.syntax-error {
background-color: red;
}

++

Dernière modification par davyk (18/10/2009 11:33:27)

jpg · 18/10/2009 12:10:52

Beau boulot davyk

J'ai été voir sur le site de l'auteur: c'est sympa on peu entrer du code et tester le parser en ligne

Par contre, je crois que je lui ferais plus confiance pour parser du HTML qu'un langage plus complexe.

J'ai pas eu le temps de tester du javascript, mais en PHP .... c'est pas vraiment concluant d'après mes premiers tests.

Dommage, car c'est une petite extension qui serait intéressante à intégrer.

a+
jean-paul

davyk · 18/10/2009 19:18:23

jpg a écrit :

Beau boulot davyk
J'ai été voir sur le site de l'auteur: c'est sympa on peu entrer du code et tester le parser en ligne
Par contre, je crois que je lui ferais plus confiance pour parser du HTML qu'un langage plus complexe.
J'ai pas eu le temps de tester du javascript, mais en PHP .... c'est pas vraiment concluant d'après mes premiers tests.
Dommage, car c'est une petite extension qui serait intéressante à intégrer.
a+
jean-paul

et bien, merci

à la base, c'est plus la fonction de colorisation qui m'intéresse, donc on peut faire péter les warnings de syntax error en modifiant le css comme ci dessus.
sinon, le produit est en évolution et peut-être qu'une future version parsera comme il faut, en attendant je pense qu'on peut l'utiliser tel quel, rien que pour s'y retrouver dans le code.
je vais me démener pour créer mon premier module, souhaitez-moi bonne chance
je me permettrais peut-être de poser quelques questions ..

++ vYk

Dernière modification par davyk (18/10/2009 19:19:08)

jpg · 18/10/2009 21:11:31

davyk a écrit :

à la base, c'est plus la fonction de colorisation qui m'intéresse, donc on peut faire péter les warnings de syntax error en modifiant le css comme ci dessus.

une option du futur module, une

davyk a écrit :

sinon, le produit est en évolution et peut-être qu'une future version parsera comme il faut, en attendant je pense qu'on peut l'utiliser tel quel, rien que pour s'y retrouver dans le code.
je vais me démener pour créer mon premier module, souhaitez-moi bonne chance

ça c'est une bonne nouvelle
et pour t'encourager je t'ai mis dans la 0.9.0 pour les 2 <textarea> un id="source"

a+
jean-paul

Fredo42 · 18/10/2009 22:16:58

davyk a écrit :

j'avais bien dit que c'était une question con.
si ça te gonfle: tu peux éditer le fichier phpcolors.css dans js/codcol/css/
et enlever
span.syntax-error {
background-color: red;
}
++

C'est pas que ça me gonfle, mais en plus le rouge "cache" pas mal le texte... plutôt que de le supprimer, je vais changer la couleur, pour commencer.

Edit: j'ai basculé sur yellow, c'est plus lisible

Dernière modification par Fredo42 (18/10/2009 22:32:42)

jpg · 19/10/2009 00:18:03

Une version pour la prochaine version alpha 090 sans aucune modification du template.
si vous voulez la tester avec la version alpha actuelle, il faut mettre dans le textarea id="source" pour que cela marche (comme le disait davyk plus haut)

1) Créer une page PHP de type panneau latéral
2) Modifier le type en panneau latéral "après la page centrale"
3) coller le code ci-dessous dans la page

<script src="js/colcod/js/codemirror.js" type="text/javascript"></script>
<?php 
if ($this->args[0]=='source_editor') {
	if ($this->args[1]=='files_style') {
		echo '<script type="text/javascript">  var editor = CodeMirror.fromTextArea("source", {height: "550px",parserfile: "parsecss.js", stylesheet: "js/colcod/css/csscolors.css", path: "js/colcod/js/" });</script> ';
	} else {
		echo ' <script type="text/javascript"> var editor = CodeMirror.fromTextArea("source", {height: "550px",parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",
                  	"tokenizephp.js", "parsephp.js", "parsephphtmlmixed.js"],
			stylesheet: ["js/colcod/css/xmlcolors.css", "js/colcod/css/jscolors.css", "js/colcod/css/csscolors.css", "js/colcod/css/phpcolors.css"],
			path: "js/colcod/js/",  continuousScanning: 500 }); </script>';
	}

}
?>

Miracle: ça marche

a+
jean-paul

Fredo42 · 19/10/2009 01:16:45

A préciser: il faut que la page soit visible dans le menu. Publiée ou pas, comme on est en admin, ça fonctionne.
Merci jpg

Ma question peut paraitre stupide, mais dans quel ordre sont exécutés les panneaux latéraux?
type 1 puis 2 puis 3 ....... ? ou dans l'ordre où ils apparaissent dans le listing 'pages'?

jpg · 19/10/2009 10:13:07

Fredo42 a écrit :

A préciser: il faut que la page soit visible dans le menu. Publiée ou pas, comme on est en admin, ça fonctionne.
Merci jpg
Ma question peut paraitre stupide, mais dans quel ordre sont exécutés les panneaux latéraux?
type 1 puis 2 puis 3 ....... ? ou dans l'ordre où ils apparaissent dans le listing 'pages'?

Les panneaux latéraux sont "executés" dans l'ordre ou ils apparaissent dans le listing pages, en tenant compte de leur "visibilité" dans le menu.

exemple:

page1
---sous-page1
---sous-panneau1
panneau2

=> le sous-panneau 1 ne sera chargé que si la page1 ou la sous-page1 est visible. et cela pour tous les types de panneau.
=> le panneau 2 sera toujours chargé

La position ou l'on crée le panneau est donc importante et cela permet de personnaliser fortement son site, sans intervention manuelle dans le template

a+
jean-paul

davyk · 19/10/2009 11:56:51

jpg a écrit :

davyk a écrit :
à la base, c'est plus la fonction de colorisation qui m'intéresse, donc on peut faire péter les warnings de syntax error en modifiant le css comme ci dessus.
une option du futur module, une
davyk a écrit :
sinon, le produit est en évolution et peut-être qu'une future version parsera comme il faut, en attendant je pense qu'on peut l'utiliser tel quel, rien que pour s'y retrouver dans le code.
je vais me démener pour créer mon premier module, souhaitez-moi bonne chance
ça c'est une bonne nouvelle
et pour t'encourager je t'ai mis dans la 0.9.0 pour les 2 <textarea> un id="source"
a+
jean-paul

bon ben j'ai plus qu'à continuer sur ma lancée
j'ai pris comme base les modules GA (qui remplace la balise </body> par le script, pas c*n ) et xmenu pour me mettre le pied à l'étrier dans ce nouveau challenge.

merci pour l'encouragement

++ vYk

Dernière modification par davyk (19/10/2009 11:57:22)

jpg · 19/10/2009 12:16:48

davyk a écrit :

jpg a écrit :
davyk a écrit :
à la base, c'est plus la fonction de colorisation qui m'intéresse, donc on peut faire péter les warnings de syntax error en modifiant le css comme ci dessus.
une option du futur module, une
davyk a écrit :
sinon, le produit est en évolution et peut-être qu'une future version parsera comme il faut, en attendant je pense qu'on peut l'utiliser tel quel, rien que pour s'y retrouver dans le code.
je vais me démener pour créer mon premier module, souhaitez-moi bonne chance
ça c'est une bonne nouvelle
et pour t'encourager je t'ai mis dans la 0.9.0 pour les 2 <textarea> un id="source"
a+
jean-paul
bon ben j'ai plus qu'à continuer sur ma lancée
j'ai pris comme base les modules GA (qui remplace la balise </body> par le script, pas c*n ) et xmenu pour me mettre le pied à l'étrier dans ce nouveau challenge.
merci pour l'encouragement
++ vYk

Par contre, relis aussi ce poste là http://www.zitecms.org/zite/forum/viewt … 3529#p3529 => modifier le template n'est plus nécessaire

a+
jean-paul

snypi · 19/10/2009 23:38:39

modeste lecteur que je suis je trouve la lecture plus que passionnante Merci à vous !!

davyk · 20/10/2009 00:49:26

jpg a écrit :

Par contre, relis aussi ce poste là http://www.zitecms.org/zite/forum/viewt … 3529#p3529 => modifier le template n'est plus nécessaire

en fait tu proposes que le module crée plutôt des panneaux, plutôt que de modifier le template, c'est ça?
pour celui du bas ok, mais (et je te réponds sans avoir testé) pour le script qui doit se trouver entre les balises <head>..
je dois bien avouer que pour l'instant, j'en ch*e un peu

néanmoins, merci du conseil

++

Fredo42 · 20/10/2009 00:54:21

J'ai testé la méthode de jpg. J'ai donc supprimé les modifs que j'avais fais dans le template (y compris le morceau entre les balises head) et ça fonctionne très bien!

davyk · 20/10/2009 01:21:30

Fredo42 a écrit :

J'ai testé la méthode de jpg. J'ai donc supprimé les modifs que j'avais fais dans le template (y compris le morceau entre les balises head) et ça fonctionne très bien!

ok, merci pour l'info, je pars là dessus

davyk · 24/10/2009 04:58:54

ça y est, le module de colorisation baptisé codcol est dispo ici:
http://mmultimediaservice.free.fr/codcol_0.9.zip
(à extraire tel quel à la racine du site)

c'est mon tout premier, je l'ai enfanté dans la douleur et souffre pour l'instant de ne pouvoir être désactivé (d'où la version 0.9)

++ vYk

PS: quand je vois à quoi il ressemble au final (largement inspiré de x_menu), je me dis que c'est fou la façon dont j'ai pu me compliquer la vie au début.
PPS: dis-moi jean-paul, te serait-il possible de créer un espace de téléchargement des modules sur ton site?

Dernière modification par davyk (24/10/2009 05:30:37)

Forum ZitePLUS

#1 17/10/2009 06:38:19

[UTILE] Colorisation du code source

#2 17/10/2009 08:45:12

Re : [UTILE] Colorisation du code source

#3 17/10/2009 09:35:01

Re : [UTILE] Colorisation du code source

#4 17/10/2009 12:57:25

Re : [UTILE] Colorisation du code source

#5 17/10/2009 15:05:14

Re : [UTILE] Colorisation du code source

#6 17/10/2009 16:03:16

Re : [UTILE] Colorisation du code source

#7 17/10/2009 16:40:34

Re : [UTILE] Colorisation du code source

#8 18/10/2009 00:16:48

Re : [UTILE] Colorisation du code source

#9 18/10/2009 04:42:06

Re : [UTILE] Colorisation du code source

#10 18/10/2009 09:34:46

Re : [UTILE] Colorisation du code source

#11 18/10/2009 11:27:15

Re : [UTILE] Colorisation du code source

#12 18/10/2009 12:10:52

Re : [UTILE] Colorisation du code source

#13 18/10/2009 19:18:23

Re : [UTILE] Colorisation du code source

#14 18/10/2009 21:11:31

Re : [UTILE] Colorisation du code source

#15 18/10/2009 22:16:58

Re : [UTILE] Colorisation du code source

#16 19/10/2009 00:18:03

Re : [UTILE] Colorisation du code source

#17 19/10/2009 01:16:45

Re : [UTILE] Colorisation du code source

#18 19/10/2009 10:13:07

Re : [UTILE] Colorisation du code source

#19 19/10/2009 11:56:51

Re : [UTILE] Colorisation du code source

#20 19/10/2009 12:16:48

Re : [UTILE] Colorisation du code source

#21 19/10/2009 23:38:39

Re : [UTILE] Colorisation du code source

#22 20/10/2009 00:49:26

Re : [UTILE] Colorisation du code source

#23 20/10/2009 00:54:21

Re : [UTILE] Colorisation du code source

#24 20/10/2009 01:21:30

Re : [UTILE] Colorisation du code source

#25 24/10/2009 04:58:54

Re : [UTILE] Colorisation du code source

Pied de page des forums