<line-numbers> Web Component

<line-numbers> is a web component to add line numbers alongside <pre> or <textarea> elements.

• Demo
• npm package

Install:

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 custom property --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