jQuery Plugin To Create Textarea With Line Numbers - SetNumber

SetNumber is a tiny jQuery plugin that displays line numbers on the left hand side of your textarea element.

How to use it:

1. Copy and include the JavaScript file set-number.min.js on your webpage which has jQuery library installed.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="dist/set-number.min.js"></script>

2. Apply the plugin to your textarea element.

$("textarea").setNumber();

3. Style the line numbers.

.set-number textarea, .numbers .line-no {
  font-family: monospace !important;
  line-height: normal !important
}

.set-number {
  overflow: auto !important;
  margin: 30px 0 0 9px;
  width: 100%;
}

.set-number .lines {
  margin: 0 3px 0 0;
  padding: 0 2px 0 0;
  min-width: 50px;
  float: left
}

.set-number .numbers {
  border-right: 1px solid #e6ebe6;
  padding: 0;
  margin: 0;
}

.set-number .numbers .line-no {
  padding: 0 .5em 0 0;
  margin: 0;
  color: #aaa;
  text-align: right;
  white-space: nowrap
}

4. Set the active line (Optional).

$("textarea").setNumber({
  activeLine:   1, 
  activeClass:  "active"
});

.lines .numbers .active {
  background-color: #fffaff;
  color: #e0a3c2
}

---

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