line-numbers Web Component

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

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

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