Add line number links

static/application.css

@@ -36,6 +36,27 @@ textarea {
 	user-select: none;
 }
 
+.highlight {
+	background-color: rgba(187, 128, 9, 0.25);
+	position: absolute;
+	width: 100%;
+	height: 16px;
+}
+
+.linenumber {
+	color: #3D3F41;
+	z-index: 1000;
+	text-decoration:none;
+	position: absolute;
+	top: 20px;
+	left: 0px;
+	width: 30px; /* 30 to get 20 away from box */
+	font-size: 13px;
+	font-family: monospace;
+	text-align: right;
+	user-select: none;
+}
+
 /* code box when locked */
 
 #box {

static/application.js

@@ -170,16 +170,44 @@ haste.prototype.lookupTypeByExtension = function(ext) {
 // Add line numbers to the document
 // For the specified number of lines
 haste.prototype.addLineNumbers = function(lineCount) {
-  var h = '';
+  removeElementsByClass('linenumber');
   for (var i = 0; i < lineCount; i++) {
-    h += (i + 1).toString() + '<br/>';
+    let div = document.createElement('a');
+    div.classList.add('linenumber');
+    div.style.marginTop = i * 16 + 'px';
+    let line = i + 1;
+    div.href = '#' + line;
+    div.onclick = function() {
+        var box = document.getElementById("box");
+        // create highlight div
+        removeElementsByClass('highlight');
+        let highlight = document.createElement('div');
+        highlight.classList.add('highlight');
+        highlight.style.marginTop = ((line - 1) * 16) + 'px';
+        box.insertBefore(highlight, box.firstChild);
+    }
+    let text = document.createTextNode(line.toString());
+    div.appendChild(text);
+    document.body.appendChild(div)
   }
-  $('#linenos').html(h);
 };
 
+function removeElementsByClass(className){
+  const elements = document.getElementsByClassName(className);
+  while(elements.length > 0){
+    elements[0].parentNode.removeChild(elements[0]);
+  }
+}
+
 // Remove the line numbers
 haste.prototype.removeLineNumbers = function() {
-  $('#linenos').html('&gt;');
+  removeElementsByClass("highlight");
+  removeElementsByClass('linenumber');
+  let div = document.createElement('a');
+  div.classList.add('linenumber');
+  let text = document.createTextNode('>');
+  div.appendChild(text);
+  document.body.appendChild(div)
 };
 
 // Load a document and show it

static/index.html

@@ -76,10 +76,8 @@
 			</div>
 		</div>
 
-		<div id="linenos"></div>
 		<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
 		<textarea spellcheck="false" style="display:none;"></textarea>
-
 	</body>
 
 </html>