bcralnit.js

jQuery plugin to add line number in textarea, pre, div etc.

Sample:

// Default
$(element).bcralnit();

// with options
$(element).bcralnit({
    width: '50px',           // default: '60px'
    background: 'salmon',    // default: '#ddd'
    color: '#fff',           // default: '#333'
    addClass: 'foo'          // default: ''
});

Demo <TEXTAREA/>

Demo <PRE/> with Google code prettify

<pre class="demo2"></pre>

<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bcralnit.js"></script>
<script>
$(function() {
    $(".demo2").bcralnit({
        addClass: 'prettyprint'
    });
});
</script>

Demo <DIV/> and <P/>

#demo3 { width: 600px; height: 430px; padding: 10px; background: #ddd; color: #000; line-height: 24px; display: inline-block } <div id="demo3"></div> $("#demo3").bcralnit({ width: '70px', background: '#FF5C5C', color: '#fff' });

#demo4 { width: 600px; height: 430px; padding: 10px; background: #ddd; color: #000; line-height: 24px; display: inline-block } <p id="demo4"></p> $("#demo4").bcralnit({ width: '70px', background: '#AD5CFF', color: '#fff' });

Fork me on GitHub