Skip to the demo zachleat Demo

<line-numbers> Web Component

A web component to add line numbers next to various HTML elements.

Back to the source code on GitHub.

Demo styles (border on <main> and a background-color on <line-numbers>) have been added here to demonstrate obtrusive behavior (the numbers intrude on and shrink the width of the original content).

<pre>

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer

<pre> (obtrusive, start with 999)

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer

<pre> with vertical overflow

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer

<pre> with vertical overflow (obtrusive)

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer

<pre> with horizontal overflow

# Hello {{ subject }}

line
super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line
another line

this is getting longer

this is getting longer

<pre> with horizontal overflow (obtrusive)

# Hello {{ subject }}

line
super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line
another line

this is getting longer

this is getting longer

<pre> with both overflow

# Hello {{ subject }}

line
super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line
another line


this is getting longer

this is getting longer

<pre> with both overflow (obtrusive)

# Hello {{ subject }}

line
super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line super long line
another line


this is getting longer

this is getting longer

Change the counter type

Leading zero

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer

Upper roman

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer

<textarea>

<textarea> with vertical overflow

If you type additional lines into the textarea, we add more numbers.

<textarea> with both overflow

<textarea> with both overflow (obtrusive)

Upgrade unwrapped elements

# Hello {{ subject }}

line
another line


this is getting longer

this is getting longer