# Unencumbered `<line-numbers>` Web Component

- [**Demo**](https://zachleat.github.io/line-numbers/demo.html)
- [npm package](https://www.npmjs.com/package/@zachleat/line-numbers)

```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/counter#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