jQueryLinenNumbersPlugin/example.html at master · cotton/jQueryLinenNumbersPlugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"><title>
	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="jquery-linenumbers.js"></script>
	<script>$('document').ready(function(){
		$('#line_numbers').linenumbers({col_width:'75px'});
	})</script>
<style>
body{
	background: #eeeeee;
	font: 200 1.5em/1.75em "Helvetica Neue", Helvetica, sans-serif;
	width: 575px;
	margin: auto;
	padding-top: 50px;
	padding-bottom: 100px;
	color: #555555;
}
h1{
	font: bold 2em/1em "Optima", serif;
	margin:0px;
	padding:0px;
	text-align: center;
	padding-bottom: 25px;
	text-shadow: 0px -1px 1px white, 0px 1px 0px #999;
}
p{
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0px;
	text-shadow: 0px -1px 1px white, 0px 1px 0px #999;
}
b{
	font-weight: 500;
}
textarea{
	width: 555px;
	height: 270px;
	font-size: 20px;
	padding: 10px;
	line-height: 30px;
	border-radius: 3px;
	border: 1px solid #aaaaaa;
}
code{
	display: block;
	margin-bottom: 10px;
	font-size: 17px;
	padding: 10px;
	line-height: 24px;
	background-color: #cccccc;
	color: #000000;
	border-radius: 3px;
	border: 1px solid #aaaaaa;
}
h2 a{
	color: #555;
	text-decoration: none;
	text-align: center;
	display: block;
}
h2 a:hover{
	text-decoration: underline;
}
h2{
	margin: 0px;
	padding: 0px;
	padding-top: 30px;
}
h3{
	font-size: .6em;
	text-align: center;
	font-weight: 200;
	margin: 0px;
	padding: 0px;
}
</style>
</head>
<body>
	<h1>jQuery linenumbers plugin</h1>
	<p>The jQuery linenumbers plugin turns this...</p>
	<textarea>This is some example text.
Some line are long, and some lines are short, just line real text.
It's in a standard textarea.
Nothing special about this, not even any fancy CSS.
But havent you ever wanted to have a textarea with fancy line numbers?
Problem? Solved.</textarea>
	<p>into this...</p>
	<textarea id="line_numbers">This is some example text.
Some line are long, and some lines are short, just line real text.
It's in a standard textarea.
Nothing special about this, not even any fancy CSS.
But havent you ever wanted to have a textarea with fancy line numbers?
Problem? Solved.</textarea>
	<p>By simply doing this...</p>
	<code>$('document').ready(function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#line_numbers').linenumbers({col_width:'75px'});
})</code>
	<p>neat huh. Line numbers make it easy to track the size of a text area, and look right at home if your dealing with code. It wraps lines intelligently, just because the textarea wraps doesn't mean it's actually a new line. How wonderful it recognizes that.</p>
	<p>Setup is a snap, at it's simplest form all you have to do is call the linenumbers function like this...</p>
	<code>.linenumbers()</code>
	<p>If you want to get fancy there are some additional options you can pass...</p>
	<ol>
		<li><b>col_width</b>: <em>Default: 25px</em> The width of the numbers column. Default should be big enough for 4 columns on a text area with no styles applied. This will need to be modified for the number of digits you choose, and the textarea styles.</li>
		<li><b>start</b>: <em>Default: 1</em> The number at which line numbering starts.</li>
		<li><b>digits</b>: <em>Default 4</em> The number of digits the line numbers should max out at. This si used for calculating leading space, and does not include the colon.</li>
	</ol>
	<p>You'll need to give your text area a set width, or the two line numbers won't line up right with the text, this has been tested as a px value, but percents should be ok in any format as long as the col_width is the same. Other than that it should work just fine. Internet Explorer has not been fully tested (due to the lack of a machine that can run it) but should work.</p>
	<h2><a href="https://github.com/pgooch/jQueryLinenNumbersPlugin/zipball/master" target="_blank">Download</a></h2>
	<h3>version 1.0.0 &mdash; May 27, 2012 &mdash; 4.80kb</h3>
	<p>Version History</p>
	<ul>
		<li><b>1.0.0</b> <em>May 27th 2012</em> Initial release.</li>
	</ul>
</body>
</html>