Update source

static/application.css

@@ -71,7 +71,7 @@ textarea {
 
 #box code {
 	padding: 0px;
-	background: transparent !important; /* don't hide hastebox */
+	/*background: transparent !important; /* don't hide hastebox */
 }
 
 /* key */

static/application.js

@@ -171,6 +171,16 @@ haste.prototype.lookupTypeByExtension = function(ext) {
 // For the specified number of lines
 haste.prototype.addLineNumbers = function(lineCount) {
   removeElementsByClass('linenumber');
+
+  if(window.location.hash) {
+    const hash = window.location.hash.substring(1);
+    highlightNew(getLineElement(hash));
+
+    /*document.getElementById('line' + hash).scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });*/
+  }
   /*for (var i = 0; i < lineCount; i++) {
     let div = document.createElement('a');
     div.classList.add('linenumber');
@@ -272,7 +282,19 @@ haste.prototype.lockDocument = function() {
       _this.showMessage(err.message, 'error');
     }
     else if (ret) {
-      _this.$code.html(htmlEscape(ret.value));
+      //_this.$code.html(htmlEscape(ret.value));
+      var lines = ret.value.split(/\r\n|\r|\n/);
+      for (var i = 0; i < lines.length; i++) {
+        let code = document.createElement('code');
+        code.innerHTML = lines[i];
+        let pre = document.getElementById("box");
+        pre.appendChild(code);
+
+        code.onclick = function() {
+          highlightNew(code);
+        }
+      }
+
       _this.setTitle(ret.key);
       var file = '/' + ret.key;
       window.history.pushState(null, _this.appName + '-' + ret.key, file);
@@ -285,6 +307,25 @@ haste.prototype.lockDocument = function() {
   });
 };
 
+function highlightNew(code) {
+  const codes = document.getElementsByTagName("code");
+  let maxWidth = 0;
+  for (let i = 0; i < codes.length; i++) {
+    if (codes[i].offsetWidth > maxWidth) {
+      maxWidth = codes[i].offsetWidth;
+    }
+    codes[i].style.removeProperty("background-color");
+  }
+  for (let i = 0; i < codes.length; i++) {
+    codes[i].style.width = maxWidth + 'px';
+  }
+  code.style.backgroundColor = "rgba(187, 128, 9, 0.25)";
+}
+
+function getLineElement(line) {
+  return document.getElementsByTagName("code")[line - 1];
+}
+
 haste.prototype.configureButtons = function() {
   var _this = this;
   this.buttons = [

static/index.html

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

static/solarized_dark.css

@@ -18,8 +18,10 @@ pre.code {
   padding: 0.5em;
   background: #1E1F22;
   color: #78797A;
-  white-space: pre-wrap;
   margin-left: 8em;
+  white-space: pre;
+  word-break: normal;
+  word-wrap: normal;
 }
 
 pre.code::before {
@@ -34,13 +36,13 @@ pre.code code {
 }
 
 pre.code code::before {
-  content: counter(listing) ". ";
+  content: counter(listing) " ";
   display: inline-block;
   float: left;
-  height: 3em;
-  padding-left: auto;
-  margin-left: auto;
-  text-align: right;
+  height: 16px;
+  padding-left: 0;
+  margin-left: -28px;
+  color: #3D3F41;
 }
 
 .hljs-comment,