<line-numbers> Web Component Examples

Download Back To CSSScript.Com

A lightweight web component for adding line numbers to pre & textarea elements. Supports custom start numbers and CSS styling.

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