Numérotation des lignes

Version imprimable

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <pre class="prettyprint akdorFitToWidth prettyprinted" style="">$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</pre>
Et voici le rendu, correspondant au code qui a été inséré lors de la rédaction du message :
Code:

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.

Bonjour,

Citation:

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:

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:

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.

18/05/2021, 18h03
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.
18/05/2021, 18h25
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
Citation:

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 ;)
18/05/2021, 18h49
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.
19/05/2021, 18h36
NoSmoking
Citation:

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 ...
19/05/2021, 21h27
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.
20/05/2021, 10h44
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.
21/05/2021, 11h58
Gluups

1 pièce(s) jointe(s)

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 :
Pièce jointe 598317

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:

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.

21/05/2021, 18h06
Gluups

Citation:

Envoyé par NoSmoking

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.