Discussion :

[Gluups]

Bonjour tout le monde,

Je sollicite votre aide pour un truc capillotracté.

Un forum présente du code dans une balise PRE, avec un cadre autour.

À l'intérieur, nous avons des balises SPAN, et je ne vois pas à première lecture comment sont déclenchés les sauts de lignes.

Sans mettre à contribution le serveur, je voudrais, à l'aide de l'extension Stylus, dans Firefox, numéroter les lignes dans ce bloc de code.

Pensez-vous que ce soit possible ?

Voici un exemple de code HTML généré par le serveur :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<pre class="prettyprint akdorFitToWidth prettyprinted" style=""><span class="pln">$b </span><span class="pun">=</span><span class="pln"> </span><span class="str akdorHasLongTextChild akdorFitToWidth">"\";
$g = """";
$p = (Get-Location).Path;
$d = [System.IO.DirectoryInfo]$p;
$d.Name
$c = "</span><span class="pln">D</span><span class="pun">:</span><span class="pln">\Projects </span><span class="typ">Visual</span><span class="pln"> </span><span class="typ">Studio</span><span class="pln">\NewRepo\" </span><span class="pun">+</span><span class="pln"> $d</span><span class="pun">.</span><span class="typ">Name</span><span class="pln">
ECHO </span><span class="typ">Git</span><span class="pln">
 
git init </span><span class="pun">--</span><span class="pln akdorHasLongTextChild akdorFitToWidth">bare origin
ECHO $p
CD $p\origin
git clone </span><span class="pun">-</span><span class="pln">l </span><span class="pun">.</span><span class="pln akdorHasLongTextChild akdorFitToWidth"> $c
git remote add origin $p
git push </span><span class="pun">--</span><span class="kwd">set</span><span class="pun">-</span><span class="pln akdorHasLongTextChild akdorFitToWidth">upstream origin master</span></pre>

Et voici le rendu, correspondant au code qui a été inséré lors de la rédaction du message :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$b = "\";
$g = """";
$p = (Get-Location).Path;
$d = [System.IO.DirectoryInfo]$p;
$d.Name
$c = "D:\Projects Visual Studio\NewRepo\" + $d.Name
ECHO Git
 
git init --bare origin
ECHO $p
CD $p\origin
git clone -l . $c
git remote add origin $p
git push --set-upstream origin master

Developpez.net fait ça automatiquement donc on ne se pose pas de question, mais ce n'est pas le cas partout.

[NoSmoking]

Bonjour,

Sans mettre à contribution le serveur, je voudrais, à l'aide de l'extension Stylus, dans Firefox, numéroter les lignes dans ce bloc de code.

Pensez-vous que ce soit possible ?

c'est souvent côté serveur que cela se fait avec JavaScript.
La réalisation en CSS est envisageable mais restrictive, j'entends par là qu'il ne faut pas que tu ais un nombre trop important de lignes.

Le principe est d'utiliser un pseudo-élément :before sur ton élément <pre> que tu formates de telle sorte que les retours à la ligne s'enchaînent et c'est là que peut résider les plus gros soucis.

• Concernant le CSS minimaliste du <pre> :

Code :

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

1
2
3
4
5
pre.prettyprint {
  position: relative;         /* pour servir de référent */
  padding-left: 2.5em;        /* de la place pour les numéros */
  border: 1px solid #069;
}

• Concernant le pseudo-élément :before :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
pre.prettyprint:before {
  content: "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20";  /* cela peut devenir long */
  position: absolute;
  left: 0;                          /* on place à gauche */
  width: 1.5em;                     /* de la place mais pas trop pour passage à la ligne */
  padding-right: .5em;              /* un peu d'air pour la bordure de droite */
  height: 100%;                     /* hauteur du parent */
  border-right: 1px dotted #069;
  overflow: hidden;                 /* cache le surplus */
  direction: rtl;                   /* pour alignement à droite */
  text-align: right;                /* ne fonctionnera pas seul */
  white-space: break-spaces;        /* force la mise à la ligne */
}

on voit bien la limite, si tu ne sais pas combien au maximum tu peux avoir de lignes la valeur du content peut devenir interminable, dans le code si dessus 20 lignes seront prises en compte !

En tout cas voilà une piste

[Edit] correction code pour prise en compte remarque post #10.

[Gluups]

Merci, si déjà on numérote les vingt premières lignes, c'est déjà ça. En poussant jusqu'à 50 on dépasserait rarement j'imagine.

Mais avant d'avoir essayé j'ai un doute : PRE c'est l'élément qui englobe tout le code présenté.
Est-ce que ce n'est pas à chaque ligne, qu'on veut un ::before ?
Si je mets un ::before pour le PRE, il sera au tout début du code, non ?

Et dans l'exemple que j'ai en tête (voir exemple fourni) le site ne facilite pas vraiment les choses, puisqu'on a plusieurs span pour chaque ligne. Il faut que j'épluche ça un peu plus, je suppose que c'est le style du span qui détermine qu'il marque un saut de ligne ou non.

[NoSmoking]

Il te faut te remettre en tête les caractéristiques des éléments <pre> :

• <pre> : l'élément de texte préformaté
• CSS : white-space

Est-ce que ce n'est pas à chaque ligne, qu'on veut un ::before ?
Si je mets un ::before pour le PRE, il sera au tout début du code, non ?

fait tourner le code que je t'ai fournis pour voir le comportement global, le pseudo-élément va s'« écouler » le long du <pre>, tiens on devient poétique

[Gluups]

Ah oui, impeccable, merci.

Il ne me reste plus qu'à éplucher ça pour comprendre comment ça marche.

N.B. Les numéros sont alignés à gauche.

[NoSmoking]

N.B. Les numéros sont alignés à gauche.

cette méthode à bien des « défauts » mais logiquement cela devrait être aligné à droite !?!

Parmi les « défauts », en vrac

• Pas de scroll vertical, la numérotation suivrait mais les numéros suivants ne s'afficheraient pas;.
• Si l'on autorise un scroll horizontal, la numérotation disparaîtra par la gauche ;
• Pas de white-space:break-spaces ou de white-space: pre-wrap sur le <pre>, la numérotation ne suivrait pas les retours à la ligne ;
• Cela reste quand même limité à des petits bouts de code ;
• et sûrement bien d'autres ...

[Gluups]

C'est sur social.msdn.microsoft.com
Exemple : https://social.msdn.microsoft.com/Fo...visualcsharpfr

Je n'ai pas encore bien compris comment ça marche, toujours est-il que j'ai réussi à obtenir un alignement des numéros à droite en leur mettant un point à gauche pour avoir une largeur à peu près constante. J'ai essayé !important après ltr mais ça n'a pas l'air probant non plus.

[NoSmoking]

Je suis surpris, lors de mes tests je n'ai rien constaté de tel.

Je te mets un exemple en ligne : Numéroter les lignes d'un élément <pre>, sur base de ton lien et de tes codes.

[Gluups]

Il doit y avoir une autre extension qui intervient, il faudra les désactiver une par une ...

Pour l'instant j'ai copié/collé la mise en forme que tu dis, et ça donne ça :

[NoSmoking]

En injectant le CSS directement dans le lien que tu as fourni on constate en effet la non prise en compte des directives d'alignement.
Il semblerait que cela soit lié à la font, mais pas que !

Le problème n'apparaît plus si tu ajoutes text-align:right au pseudo-élément :before.

Donc le code au final serait celui-ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.messageContent .prettyprint::before {
  content: "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20";  /* cela peut devenir long */
  position: absolute;
  left: 0;                          /* on place à gauche */
  width: 1.5em;                     /* de la place mais pas trop pour passage à la ligne */
  padding-right: .5em;              /* un peu d'air pour la bordure de droite */
  height: 100%;                     /* hauteur du parent */
  border-right: 1px dotted #069;
  overflow: hidden;                 /* cache le surplus */
  direction: rtl;                   /* pour alignement à droite */
  text-align: right;                /* ne fonctionnera pas seul */
  white-space: break-spaces;        /* force la mise à la ligne */
}

PS : j'ai mis à jour le fichier test en ligne.

[Gluups]

Le problème n'apparaît plus si tu ajoutes text-align:right au pseudo-élément :before.

En effet, là les numéros sont alignés à droite, et ... ça j'ai compris comment ça marche

Merci.