jQuery Plugin For Adding Line Numbers To Any DOM Elements - lineLine

lineLine is a lightweight jQuery plugin which has the ability to add easy-to-customize line numbers to any DOM elements like textarea, code, pre, etc.

See also:

• jQuery Plugin To Display Line Numbers In Textarea - numberedTextarea

How to use it:

1. Include jQuery JavaScript library and the jQuery lineLine plugin at the bottom of your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.lineline.js"></script>

2. Call the function on desired element and done.

$('textarea,pre,code').lineLine();

3. Style the line numbers whatever you want.

.lineline {
  max-height: 300px;
  width: 700px;
  margin: 50px auto 0;
  background: #ececec;
  padding: 20px;
  overflow: auto;
  text-align: left;
}

.lineline-numbers {
  width: 20px;
  border-right: 1px solid #ccc;
  padding-right: 5px;
  color: #777;
}

.lineline-lines {
  padding-left: 20px;
  white-space: pre;
  white-space: -moz-pre;
  white-space: -pre;
  white-space: -o-pre;
  word-wrap: break-word;
}

.lineline-code {
  font-family: 'Consolas';
  font-size: 12px;
  line-height: 18px;
  width: 100%;
  white-space: nowrap;
}

4. Options and defaults.

$('textarea,pre,code').lineLine({
  startsFrom: 0,
  className: 'lineline'
});

---

This awesome jQuery plugin is developed by im4aLL. For more Advanced Usages, please check the demo page or visit the official website.