Basic Text Editor With Line Numbers - jQuery LinedTextDiv

LinedTextDiv is a lightweight jQuery plugin which converts any Div or Pre elements into a scrollable text/code editor with support for line numbers and custom scrollbars.

How to use it:

1. Load the stylesheet linedTextEditor-jquery.css in the header to style the scrollbar & line numbers.

<link href="linedTextEditor-jquery.css" rel="stylesheet">

2. Wrap your text into a DIV or Pre element as this:

<pre class="lined">
  #jquery-script-menu {
    position: fixed;
    height: 90px;
    width: 100%;
    top: 0;
    left: 0;
    border-top: 5px solid #316594;
    background: #fff;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    z-index: 999999;
    padding: 10px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  .jquery-script-center {
    width: 960px;
    margin: 0 auto;
  }

  .jquery-script-center ul {
    width: 212px;
    float: left;
    line-height: 45px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .jquery-script-center a { text-decoration: none; }

  .jquery-script-ads {
    width: 728px;
    height: 90px;
    float: right;
  }

  .jquery-script-clear {
    clear: both;
    height: 0;
  }
</pre>

3. Load jQuery library and the JavaScript linedTextEditor-jquery.js at the bottom of the webpage.

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

4. Initialize the plugin to generate a basic text/code editor.

$(".lined").linedTextEditor();

---

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