Numéroter les lignes d'un élément <pre>

Ajout d'un numéro de ligne pour du code contenu dans un élément <pre> via le CSS et l'utilisation d'un pseudo-élément :before unique.

Affichage par défaut

Rendu par défaut tel que défini initialement. 

$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

Affichage avec numéro de ligne

Rendu après application des règles CSS définies ci-après. 

$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

Le sur lignage une ligne sur deux est réalisé par la mise en place d'un background.

Le CSS appliqué

Observations

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 white-space:pre-wrap, la numérotation ne suivrait pas les retours à la ligne.

Cela reste quand même limité à des petits bouts de code.