Add Line Numbers To Code Blocks Using Only CSS (And Some Spans)

I'm using syntect^1^^ to highlight code for my site. It's working nicely. One feature I'd like that it doesn't have is the ability to add line numbers to the code blocks. It's possible to do it in CSS with a little tweaking.

The trick to this approach is adding `<span>`html` tags that wrap every line of code. They're used by the CSS to position the line numbers. I wish this step wasn't necessary, but I haven't found a way around it.

The syntect highligher I'm using doesn't