https://github.com/zachleat/line-numbers
A web component to add line numbers next to various HTML elements
https://github.com/zachleat/line-numbers
Last synced: 8 months ago
JSON representation
A web component to add line numbers next to various HTML elements
- Host: GitHub
- URL: https://github.com/zachleat/line-numbers
- Owner: zachleat
- License: mit
- Created: 2025-06-05T16:55:51.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-23T21:25:11.000Z (12 months ago)
- Last Synced: 2025-09-11T13:20:30.530Z (9 months ago)
- Language: JavaScript
- Homepage: https://zachleat.github.io/line-numbers/demo.html
- Size: 25.4 KB
- Stars: 156
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Unencumbered `` 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
- ✅ `
` supported
- ✅ `` 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 (``)
- ✅ Numbers are unobtrusive by default to reduce layout shift (opt-in to obtrusive behavior via ``)
### 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