Rainbow.linenumbers

Rainbow.linenumbers

A plugin for Rainbow to show linenumbers.
Adds line numbering to the code element by adding a span.line at each newline.

Instructions

Just include Rainbow.linenumbers.js alongside Rainbow.js

usage

Set the starting line number by adding data-line="234" attribute to code element.
Disable line numbering for a specific code block by setting data-line="-1"

styling

Be sure to check the example html and theme file.
Edit styles and colors by overriding the css:
pre code.rainbow .line <– the main element
pre code.rainbow .line:before <– the actual number
pre code.rainbow .line:after <– the underline

underlines

A pre element is inline by default so the size of the underline will be the size of that element.
If you set the display to block, an event listener will be added that resizes the underlines properly.

highlighting

Highlight a single line by doing this (block 2 line 6):

#rb2ln6:after {
	height: 100%;
	background-color: rgba(255, 255, 0, 0.1);
}

The highlight will appear over the line by default. Setting the pre element’s z-index to -2 an the .line:after to -1 solves this.

hyperlinking

Each span.line has an id so you can easily jump to a specific line using and anchor href like #rb1ln30 (meaning rainbow block 1 line 30)