Unencumbered <line-numbers> Web Component

• Demo
• npm package

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>)

Limitations

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