Coloration syntaxique sur le forum

**Auteur** · 28/11/2006, 14h23

Envoyé par Maxoo

si tu as deux div, avec des z-index, c'est bon, normalement.

Par exemple un div contenant les numéros de lignes et dedans un div postionné en absolute avec un z-index et le contenu du code ...

il faut encore synchroniser les scroll-bars

**Mr N.** · 28/11/2006, 15h04

Bien vu Auteur...

J'ai testé ma première proposition.
Si vous avez Firefox et que votre web developper toolbar est installée, vous faites CSS > Edit CSS
Puis vous rajoutez ces lignes à la fin :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
pre.alt2 div {
   background:#E1E4F2 url(http://img217.imageshack.us/img217/5668/screenshot61wt2.png) left top repeat-y;
   padding-left:30px;
}

J'ai pas tester sur IE, et je n'ose pas imaginer les différences de polices entre navigateurs où même entre les préférences utilisateurs

Mais chez moi ca marche bien du coup je vais peut-etre me faire un userstyle pour une petite utilisation perso

**Mr N.** · 28/11/2006, 16h50

Envoyé par Mr N.

Mais chez moi ca marche bien du coup je vais peut-etre me faire un userstyle pour une petite utilisation perso

Vous utilisez Firefox > 1.5 ? Vous avez installer l'extension stylish ?
Ceci est fait pour vous =>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@-moz-document domain(www.developpez.net) {
   pre.alt2 div {
      background:#E1E4F2 url(data:image/png;base64,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
BrMAAAAASUVORK5CYII=) left top repeat-y;
      padding-left:30px;
   }
}

Avec le petit screenshot qui va bien =>

**FremyCompany** · 28/11/2006, 17h28

Marche bien, mais il faut monter le nombre de ligne possible... à une centaine...

Voici le resultat sur IE (utilisation +/- efficace de la web developper toolbar d'ie pour effectuer le test)

**Mr N.** · 28/11/2006, 17h58

Envoyé par FremyCompany

Marche bien, mais il faut monter le nombre de ligne possible... à une centaine...

Déja fait

Il suffit de mettre ça comme url dans la css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
url(data:image/png;base64,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
BrMAAAAASUVORK5CYII=)

Et ça monte que jusqu'à 100, j'avais la flemme d'aller plus loin

**FremyCompany** · 28/11/2006, 19h15

Data n'existe pas sous IE... tu dois en faire une image et sauver celle-ci...

Envoyé par Mr N.

Déja fait

Il suffit de mettre ça comme url dans la css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAY/AQMAAACjwK8PAAAABlBMVEUAAwCAgIDVycP0AAAAAXRS
TlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfWCxwPKggP
QI+DAAAFS0lEQVRYw41YsY6kOhBcIQeOECKyEAFCaERAcJrIAaEDPmVDwgms+fZXTRc7Pt29c69U
GgZtQ1e5pt3tr6/f/k6g+x/kr3//jcAMNIQDPGPl/rsSH4HEOEFg/P39VYkPxEocROZzxkr8DkzE
XvBomNdeiW8LreQZG/Ak997w/lzw9wXKNbDol8g78vO+Fw3rtzBfwQMYirWsxf+Cfb6RZvoLoEUO
X9W/E/7rur8jG/x3Iu+uIZBz5xmP+9ngvzMxThAYz+/Z4L9TYlbiILI+Jxv8d8I3nWAveDSqYTb4
77z1mlTz7qncu97w/lzw9wVu/Tujfom8Iz95Lxv8dy7MVwD/dcNnLWvxI/w3w39NUjjA890ztHgH
Q/mC/5pO4QBP7jPwrvhvxANm5N00CoecPfWT+++K/0bwmyV3p3CB8biegXfFfyP+fwaaVeGgvaf/
ZjznXVn/Ef6a4ZtGgGsHDp7+k7zeFf+Nrep06YdnOGju6b+5N7w/F/yRr/OFfqJ/Z9RPAN4ukn9i
/tGwfvBfMysc/Ofpv0v/SnyE/9K3+k4Q6L/rO7R4BUP5PtV3gkD/3d9fFf9F5J9mXTdBoP+ueNx/
VfwXkUBK6ltBoP/u76+K/yL+PwFuVQT6z2Vdy1dl/SP8lcQ3AlwH+u/ig7xeFf9F+C/deuEZgf4T
7q43vD8X/JFv8IV+on9n1C/pby/Qf7cfXtGwfgvzBQL951hLavEB/gvw35oUB5HFh5vWh2r7BP+t
neIgMn04VvwXkH9A3mujOJDz4RmP+2PFf6KX/GZWpzgC48XHwFjxn/hVsK6K41BI3yDrOFbWP4jn
4JtVgOujUeRGf8djxX+h1d/spR+ecUDzA/7L4O57w/tzwd8r9x/9RP/OqJ9AuEfyZx0ao2H94L91
Vhzw3zGQv6vH7/DfBP9NeNeePvuwIEGLPRjab/hvAs+9++zDAvld7xX/7ch/Qt4T8t2bzz5yxeP+
XvHfHjX3CXG7xAbG4zrJvYr/hN8kgPf2VfegC1JXvOb3z3gIME0Kub77CIHUlb3iv71V7S79ZA+H
5s1T97LUG96fC/6e3H2hf2fUT3IV3pH8E/OPhvVbdA132YPhv2Ygf1ePb+G/jvOH5LABT+79vaH+
XeMb5w/RcAOe7D16Q/1rR/atjXpwQ85Pz3hD/Wsje2Wna7AFxuO6N9S/NnBmWdWDG7R/AjPy7g31
r905N4gHcb2Bw1N6H6A31L+2/cwK4uENmj+f2vv2hvrX5oI/8t18oZ+h/v3oJ+sP3lsk/8T8o2H9
OH+IBzf47zmQv6H+5aL/8wXu+bcLhvH//Mwdvpg/LlT8l4v+z7Nm+2L+7Sr+y0X/d8UW88eFiv9y
0f/5VXsfX8y/XWX9c9H/+Z0civm3q/gvF/2fn7Tn8cX8W31/0f95/0F5BmHSL5F7MX9ciIb1Y/8n
/ZIv5o9Lf+P8kdj3RX4m7r/ROH8k9n2Rn4mIxvkjsW+K7P8S999onD+k1kvvGNn/Je6/0Th/JOn9
gMj+L3H/jcb5Q3DgOpJH4v4bjfPHpR+eEdn/Je6/0Th/JOoWfaEf18OkX1Lekf3ffS8a5w/J95D1
Yv+XuP9Gw/nL8q31VvAAhvssxuC/6/jx1HoveABDcRYTDecvy6z1WvBAzgP7F2fwn9T3Jel+K3gE
xnP+jYbzl0XOYFbFA9oP7P+cwX+yvy6TnsHMuH6Aw3CfJRn8J+cvC7WTZzyg+cD+zxn8J/3ND3/k
+/CFfgb//egnAO9HJH/WxGg4f1kW7RcED/hvGD5nabX4X7++zu9vlNr0J9CL5PCH//4D8UoDBCBs
BrMAAAAASUVORK5CYII=)

Et ça monte que jusqu'à 100, j'avais la flemme d'aller plus loin

**Maxoo** · 28/11/2006, 21h13

L'image en background est surement la plus simple des solutions, c'est beaucoup plus simple que de synchroniser des textareas

**Mr N.** · 29/11/2006, 09h56

Envoyé par FremyCompany

Data n'existe pas sous IE... tu dois en faire une image et sauver celle-ci...

Ouais j'avais oublié.
Il suffit alors d'ouvrir l'image avec firefox ("view background image") et de la sauver

Envoyé par Maxoo

L'image en background est surement la plus simple des solutions, c'est beaucoup plus simple que de synchroniser des textareas

Malheureusement ça ne suit pas le changement de taille de police du navigateur

**Médinoc** · 29/11/2006, 10h23

Il n'existe pas un style "Non-sélectionnable" pour des listes ordonnées ?
Si c'est le cas, ça pourrait aider...

PS: C'est pas gagné... Avec une liste normale, les numéros n'apparaissent pas sélectionnés sous FF, mais ils apparaissent dans le copier-coller...

**Mr N.** · 29/11/2006, 13h24

Bon, maintenant que j'ai résolu (pour moi-même, vive l'égoïsme) le problème des numéros de ligne (mais comment faisais-je avant ?), j'ai une autre requete à vous formuler :

La coloration syntaxique ne se fait que pour un langage. Soit c'est du java, soit c'est du php, soit c'est du vb...
Seulement, pour certains domaines comme le web par exemple, on peut avoir plusieurs langage à colorer dans une meme portion de code. un bout de css dans un flux html ou des bouts de php dans un flux html... Surtout que ça apporte des bugs dans la coloration. Exemple :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<html>
   <body>
      <h1>L'avion Rafale</h1>
      <?php
         echo "Il est rapide !";
      ?>
   </body>
</html>

L'apostrophe dans le flux html pourri le reste du code. Et si on force la coloration en html, on perd la coloration php.
L'idéal serait d'avoir les deux en même temps...

Qu'en pensez-vous ?

**FremyCompany** · 29/11/2006, 14h09

Envoyé par Mr N.

Bon, maintenant que j'ai résolu (pour moi-même, vive l'égoïsme) le problème des numéros de ligne (mais comment faisais-je avant ?), j'ai une autre requete à vous formuler :

La coloration syntaxique ne se fait que pour un langage. Soit c'est du java, soit c'est du php, soit c'est du vb...
Seulement, pour certains domaines comme le web par exemple, on peut avoir plusieurs langage à colorer dans une meme portion de code. un bout de css dans un flux html ou des bouts de php dans un flux html... Surtout que ça apporte des bugs dans la coloration. Exemple :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<html>
   <body>
      <h1>L'avion Rafale</h1>
      <?php
         echo "Il est rapide !";
      ?>
   </body>
</html>

L'apostrophe dans le flux html pourri le reste du code. Et si on force la coloration en html, on perd la coloration php.
L'idéal serait d'avoir les deux en même temps...

Qu'en pensez-vous ?

Ca a déjà été proposé, mais on avait estimé à l'époque que c'était trop dur à mettre en place...

Sinon, moi j'avais proposé cette syntaxe BBCode-ci :

Envoyé par FremyCompany

Pour ce qui est du multi codages, je suis désolé si l'exemple du VB n'est pas vraiment intéressant (je le reprenais juste des autres messages postés), mais par contre, je trouve que mal interprêter du PHP dans du HTML, de ne pas colorier de JS dans du HTML, c'est comme ne pas colorier les chaines de caractères dans le C#... vous ne trouvez pas ?

Sinon, voici le rendu que je donnerais à : [ CODE=HTML]<html><body>[ CODE=PHP]<?php $var = 3.5; ?>[/ CODE]<script>[ CODE=JS]var x=null[/ CODE]</script></body></html>[/ CODE]

Code HTML(modified) :

Sélectionner tout - Visualiser dans une fenêtre à part

<html><body><? $var=3.5; ?><script> var x = null</script></body></html>

**Mr N.** · 29/11/2006, 14h12

Envoyé par FremyCompany

Sinon, moi j'avais proposé cette syntaxe BBCode-ci :
[snip]

En effet, mais ce n'est pas très naturel et assez lourd pour l'utilisateur

**Eusebius** · 29/11/2006, 14h18

Envoyé par Mr N.

En effet, mais ce n'est pas très naturel et assez lourd pour l'utilisateur

Déjà, l'utilisateur, s'il mettait les balises code tout court, ça serait un grand plus

**FremyCompany** · 29/11/2006, 15h04

Envoyé par Eusebius

Déjà, l'utilisateur, s'il mettait les balises code tout court, ça serait un grand plus

+1 !

Sinon, pour uniformiser la police sur tous les navigateurs, il faut ajouter dans le style pre.alt2 div {
} ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
... {
   font: Courier New;
   font-size: 10pt;
   font-weight: normal;
}

**gorgonite** · 05/01/2007, 21h35

y a-t-il un mode pour le shell ?

si non, que faut-il faire pour l'avoir ?
(si ce n'est pas trop long je veux bien aider...

)

**BiM** · 08/01/2007, 16h29

A la tienne Ano !!

**gorgonite** · 15/01/2007, 10h02

Envoyé par gorgonite

y a-t-il un mode pour le shell ?

si non, que faut-il faire pour l'avoir ?
(si ce n'est pas trop long je veux bien aider...

)

vraiment pas ?

**Anomaly** · 15/01/2007, 11h28

Qu'est-ce que ça veut dire exactement, un mode pour le shell ? Tu veux dire un mode qui reconnaît les mots-clés de bash ? Mais il n'y a même pas de forum spécifique consacré au shell, non ? Je ne sais pas s'il serait cohérent d'imposer la coloration shell à tout le forum linux.

**Emmanuel Lecoester** · 22/01/2007, 20h02

Bonjour à tous et plus particulièrement à Anomaly,

Pour demander la coloration syntaxique pour WinDev, que dois-je fournir pour que celà se fasse le plus facilement pour vous ?

Merci de ta réponse.