Adding line-numbers to your code
=================================
Introduction
-------------
Want to add line-numbers to your code? Here it is.
Most methods are using table s or height-aligned div s. Horrible. This method uses semantic HTML and CSS counters .
(HTM) CSS counters
Advantages
-----------
- Clean copy/paste i.e. it does not copy line numbers.
- Relatively clean and semantic HTML .
- No JavaScript.
- Responsive wrap.
The pre element is used in combination with code elements for each line of code.
We have to wait for the pseudo selector ::nth-line to make this clean and semantic.
The HTML
As you can see, I use it myself. Beware of newlines or spaces in your HTML!
C’est Tout.
(DIR) previous CSS word wrap indicators
Related
--------
(DIR) Convert CSV and TSV
(TXT) CSV logo (.svg)
(DIR) CSS white-space property
(TXT) /img/fallback.svg (.svg)
(DIR) CSS word wrap indicators
(TXT) /img/fallback.svg (.svg)
(DIR) Stachys
(IMG) stachys.nl (.png)
(DIR) Minimalistic slides
(TXT) /img/fallback.svg (.svg)