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 …


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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

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


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2025-06-05T05:00:00+00:00) line-numbers Web Component. Retrieved from https://www.scien.cx/2025/06/05/line-numbers-web-component/

MLA
" » line-numbers Web Component." Zach Leatherman | Sciencx - Thursday June 5, 2025, https://www.scien.cx/2025/06/05/line-numbers-web-component/
HARVARD
Zach Leatherman | Sciencx Thursday June 5, 2025 » line-numbers Web Component., viewed ,<https://www.scien.cx/2025/06/05/line-numbers-web-component/>
VANCOUVER
Zach Leatherman | Sciencx - » line-numbers Web Component. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/06/05/line-numbers-web-component/
CHICAGO
" » line-numbers Web Component." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2025/06/05/line-numbers-web-component/
IEEE
" » line-numbers Web Component." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2025/06/05/line-numbers-web-component/. [Accessed: ]
rf:citation
» line-numbers Web Component | Zach Leatherman | Sciencx | https://www.scien.cx/2025/06/05/line-numbers-web-component/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts