Zapiski na marginesach

TL;DR

Numerowanie linii w blokach kodu wygląda banalnie, dopóki nie zacznie się wymagać, żeby numery nie kopiowały się razem z kodem, żeby nie dokładać dodatkowych elementów HTML i żeby trzymały się na miejscu, gdy długa linia przewija się w bok. Comandeer rozwiązuje to samym CSS-em: liczniki (counter-reset, counter-increment, counter()) generowane jako pseudoelementy, position: sticky przypinający numerację przy scrollu poziomym oraz container queries, które chowają numery, gdy blok kodu robi się za wąski.

Po drodze wychodzą typowe pułapki - reset licznika trzeba zawiesić na :first-child zamiast na kontenerze, a ostatnią pustą linię trzeba ukryć selektorem :last-child:empty, żeby nie dostała numeru znikąd. Całość pokazuje, że nowoczesny CSS załatwia dziś funkcjonalność, która kiedyś wymagałaby JS-a i dodatkowego znacznika na każdą linię kodu.