Unencumbered `<line-numbers>` Web Component

npm install @zachleat/line-numbers

Features

✅ <pre> supported
✅ <textarea> supported (even when adding or removing lines)
✅ CSS overflow supported (with obtrusive/visible or nonobtrusive scrollbars)
✅ Numbers are excluded from content flow (not selectable, important for copy paste components!)
✅ Use any CSS counter style via --uln-number-type
✅ Change the starting index for counter via (<line-numbers start="999">)
✅ Numbers are unobtrusive by default to reduce layout shift (opt-in to obtrusive behavior via <line-numbers obtrusive>)

Trying to keep this one as simple as possible, so please note the following:

Line wrapping is not supported (white-space: pre or white-space: nowrap only, and this is enforced by the component)
Elements using contenteditable are not supported