Numberfier: add line numbers to your textareas

• » Overview
• » Example
• » Usage
• » Notes

Overview

Numberfier is a jQuery plugin which adds line number support for nominated textareas. It is most useful for sites that wish to show code snippets, or allow users to write code. Line numbers appear in a left column appended before the textarea, and update on insertion or modification of the textarea's content.

Example

var drinks = ['coffee', 'tea', 'Ribena', 'Vimto', 'ginger beer', 'hot chocolate']; $('<p >', {text: 'Select the drink you'd like:'}).appendTo('body'); var ul = $('<ul>').appendTo('body'); for (var i in drinks) $('<li>', {text: drinks[i]}).appendTo(ul);

Here's the code behind that example:

Usage

Simply select the textarea(s) you wish to have line numbers in a jQuery selector, then call the numberfy() method. See demo above. The method takes no parameters.

Note that the font and font size of the line numbers are based on the font and font size of the textarea to which Numberfy is applied.

Notes

Colours

To change the background and/or text colour of the line numbers column, adjust the column_BG and column_text variables, near the head of the script.

Firefox

Firefox applies padding to the left of scrollbars inside textareas. Numberfy is equipped to deal with this and this should not affect its detection of the number of lines - and the number of wraps per line - in your textarea. If you get any bad results, please let me know.

Opera not supported

Opera is presently not supported because Opera does not fire scroll events inside textareas, for some bizarre reason, something that is crucial to the workings of Numberfy.