diff --git a/html/dev/canvas.html b/html/dev/canvas.html
index 951fc51..cc45803 100644
--- a/html/dev/canvas.html
+++ b/html/dev/canvas.html
@@ -1,7 +1,10 @@
 <section id="main">
 	<h1><span id="title">$title</span> <input type="text" id="edit-title" hidden="" value="$title" /> <a id="fullscreen-button" href="#fullscreen" hidden="">⤢</a> <a id="regular-layout" hidden="">⇲</a> <small><a id="save">Save</a></small></h1>
 	<div id="row" class="row">
-		<textarea id="code" autofocus="">$code</textarea>
+		<div id="ta-cont">
+			<textarea id="code" autofocus="" autocapitalize="none" autocomplete="off" spellcheck="false">$code</textarea>
+			<code id="code-display"></code>
+		</div>
 		<iframe id="output" sandbox="allow-scripts"></iframe>
 	</div>
 </section>
@@ -34,11 +37,11 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
 <style>
 	*::-webkit-input-placeholder { color: #888 }
 	*::-moz-placeholder { color: #999 }
-	html, #content, #footer, #main { background: #000 }
+	html, #content, #output, #footer, #main { background: #000 }
 	#content { padding-bottom: 4px }
 	#main a:hover { color: #4ff }
 	#main a:active { color: #06f }
-	#main :not(input):not(button):not(.red):not(a), #main a:not(:hover):not(:active):not(.red), #footer * { color: #fff }
+	#main :not(input):not(button):not(.red):not(a):not(textarea):not(span), #main a:not(:hover):not(:active):not(.red), #footer * { color: #fff }
 	#main { clear: both }
 	#meta {
 		clear: both;
@@ -51,47 +54,79 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
 		display: inline-block;
 		margin-left: 8px;
 	}
-	#code, #output { width: 95% }
+	#ta-cont, #output { width: 95% }
 	#main { height: 500px }
 	#row { height: calc(100% - 2rem - 2px) }
-	#code {
+	#ta-cont {
+		margin-bottom: 8px;
+		position: relative;
+		overflow: auto;
+		border: 1px solid #fff;
+	}
+	#code, #code-display {
+		display: block;
+		min-height: 100%;
+		padding: 0;
+		margin: 2px;
 		color: #fff;
-		background: #000;
+		background: transparent;
 		font-family: monospace;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
 		font-size: 1rem;
-		border: 1px solid #fff;
+		line-height: 1.2;
 		resize: none;
-		margin-bottom: 8px;
+		outline: none;
+		border: none;
+		padding-left: 4px;
+	}
+	#code {
+		position: absolute;
+		top: 0; right: 0;
+		z-index: 1;
+		color: transparent;
+	}
+	#code-display {
+		width: calc(100% - 4px);
+		border-left: 1px solid #444;
+	}
+	#caret {
+		display: inline-block;
+		position: absolute;
+		background: #fff;
+		width: 1px;
 	}
-	#code, #output { height: calc(50% - 4px) }
+	#caret[hidden] { display: none }
+	#ta-cont, #output { height: calc(50% - 4px) }
 	@media (min-width: 600px) {
 		h1 {
 			height: 1.65rem;
 			margin-bottom: .35em;
 		}
-		#code, #output { height: 100% }
-		#code { width: 60% }
+		#ta-cont, #output { height: 100% }
+		#ta-cont { width: 60% }
 		#output {
 			width: 39%;
 			float: right;
 		}
-		.fullscreen #code:not(:focus) { width: 39% }
-		.fullscreen #code:not(:focus) + #output { width: 60% }
+		.fullscreen #ta-cont:not(:focus) { width: 39% }
+		.fullscreen #ta-cont:not(:focus) + #output { width: 60% }
 	}
 	@media (min-width: 600px) and (max-width: 800px) {
-		#code { width: 55% }
+		#ta-cont { width: 55% }
 		#output { width: 44% }
-		.fullscreen #code:not(:focus) { width: 44% }
-		.fullscreen #code:not(:focus) + #output { width: 55% }
+		.fullscreen #ta-cont:not(:focus) { width: 44% }
+		.fullscreen #ta-cont:not(:focus) + #output { width: 55% }
 	}
 	@media (min-width: 1500px) {
-		#code { margin-bottom: 0 }
+		#ta-cont { margin-bottom: 0 }
 	}
 	@media (min-width: 1600px) {
-		#code { width: 65% }
+		#ta-cont { width: 65% }
 		#output { width: 34% }
-		.fullscreen #code:not(:focus) { width: 34% }
-		.fullscreen #code:not(:focus) + #output { width: 65% }
+		.fullscreen #ta-cont:not(:focus) { width: 34% }
+		.fullscreen #ta-cont:not(:focus) + #output { width: 65% }
 	}
 	.fullscreen #main #output.fullscreen {
 		position: fixed;
@@ -188,6 +223,7 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
 		fill: #c00;
 	}
 	@media (min-width: 1500px) {
+		#nav { right: calc(96% - 144px) }
 		.fullscreen #nav {
 			top: 32px;
 			right: calc(100% - 40px);
@@ -202,10 +238,70 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
 		.fullscreen #nav:not(:hover) { opacity: 0.3 }
 		.fullscreen #content { margin: 6px 0 6px 46px }
 	}
+	code .line::before {
+		left: 0;
+		content: attr(data-linenum);
+		color: #aaa;
+		display: inline-block;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		user-select: none;
+		padding: 0 2px 0 4px;
+		position: absolute;
+	}
+	code .line.warning::before {
+		color: #ff6;
+		font-weight: bold;
+	}
+	#ta-cont.line-dig0 { padding-left: 0.8em }
+	#ta-cont.line-dig1 { padding-left: 1.4em }
+	#ta-cont.line-dig2 { padding-left: 2em }
+	#ta-cont.line-dig3 { padding-left: 2.6em }
+	#ta-cont.line-dig4 { padding-left: 3.2em }
+	#ta-cont.line-dig5 { padding-left: 3.8em }
+	#ta-cont.line-dig6 { padding-left: 4.4em }
+	#ta-cont.line-dig7 { padding-left: 5em }
+	#ta-cont.line-dig0 #code { width: calc(100% - 0.8em - 7px) }
+	#ta-cont.line-dig1 #code { width: calc(100% - 1.4em - 7px) }
+	#ta-cont.line-dig2 #code { width: calc(100% - 2em - 7px) }
+	#ta-cont.line-dig3 #code { width: calc(100% - 2.6em - 7px) }
+	#ta-cont.line-dig4 #code { width: calc(100% - 3.2em - 7px) }
+	#ta-cont.line-dig5 #code { width: calc(100% - 3.8em - 7px) }
+	#ta-cont.line-dig6 #code { width: calc(100% - 4.4em - 7px) }
+	#ta-cont.line-dig7 #code { width: calc(100% - 5em - 7px) }
+	code .inline-comment { color: #888 }
+	code .keyword { color: #fd3 }
+	code .constant, code .string .escape { color: #df0 }
+	code .string { color: #6C3 }
+	code .regex { color: #ffa }
+	code .regex .open, code .regex .close, code .regex .modifier { color: #ff0 }
+	code .regex .escape { color: #afa }
+	code .regex .backreference { color: #0f0 }
+	code .regex .special { color: #faa }
+	code .regex .grouper { color: #fff }
+	code .regex .charclass { color: #ffd }
+	code .regex .charclass { background: #730 }
+	code .regex .charclass .range { color: #fed }
+	code .regex .charclass .punctuation { color: #f90 }
+	code .regex .quantifier { color: #2af }
+	code .regex .quantifier .punctuation { color: #8cf }
+	code .regex .modifier { font-weight: bold }
+	code .operator { color: #ff8 }
+	code .operator.assigns, code .equals { color: #8ff }
+	code .argument, code .number { color: #3df }
+	code .newvar { font-weight: bold }
+	code .function-name { color: #f60 }
+	code .function-call { color: #f90 }
+	code .prototype { color: #f00 }
+	code .punctuation, code .dot { color: #ddd }
+	code .capvar { color: #9ac }
+	code .browser { color: #9bd }
 </style>
 <script>
 	var mine = $mine,
 		id = $id,
+		opName = '$op-name',
+		myRep = $rep,
 		footerOff = true,
 		noPageOverflow = 400,
 		pageOverflowMobile = true,
diff --git a/http/a/main.js b/http/a/main.js
index 98fcc24..fab72a7 100644
--- a/http/a/main.js
+++ b/http/a/main.js
@@ -325,7 +325,7 @@ function ago(od) {
 	else {
 		d = new Date(od);
 		var y = d.getUTCFullYear();
-		return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec' ][d.getUTCMonth()] + ' ' + d.getUTCDate() + (y == new Date().getUTCFullYear() ? '' : ' \'' + y.toString().substr(2));
+		return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'][d.getUTCMonth()] + ' ' + d.getUTCDate() + (y == new Date().getUTCFullYear() ? '' : ' \'' + y.toString().substr(2));
 	}
 }
 function agot(d) {
diff --git a/http/dev/canvas.js b/http/dev/canvas.js
index 966ede1..0fbd726 100644
--- a/http/dev/canvas.js
+++ b/http/dev/canvas.js
@@ -163,9 +163,14 @@ function removeLog() {
 	resetLog();
 	document.getElementById('console').hidden = true;
 }
-function print(input) {
+function print() {
 	var pre = document.createElement('pre');
-	pre.innerHTML = input;
+	for (var i = 0; i < arguments.length; i++) {
+		pre.appendChild(document.createTextNode(' '));
+		var span = document.createElement('span');
+		span.innerHTML = arguments[i];
+		pre.appendChild(span);
+	}
 	document.getElementById('console').appendChild(pre);
 	document.getElementById('console').hidden = false;
 }
diff --git a/http/dev/runcanvas.js b/http/dev/runcanvas.js
index e7d9450..0ec4d27 100644
--- a/http/dev/runcanvas.js
+++ b/http/dev/runcanvas.js
@@ -1,9 +1,98 @@
+function blink() {
+	document.getElementById('caret').hidden ^= 1;
+	blinkTimeout = setTimeout(blink, 500);
+}
+function insertNodeAtPosition(node, refNode, pos) {
+	if (typeof(refNode.nodeValue) == 'string') refNode.parentNode.insertBefore(node, refNode.splitText(pos));
+	else {
+		for (var i = 0; i < refNode.childNodes.length; i++) {
+			var chNode = refNode.childNodes[i];
+			if (chNode.textContent.length <= pos && i != refNode.childNodes.length - 1) pos -= chNode.textContent.length;
+			else return insertNodeAtPosition(node, chNode, pos);
+		}
+	}
+}
+var blinkTimeout;
+function upvoteComment() {
+	this.classList.toggle('clkd');
+	socket.send(JSON.stringify({
+		event: this.classList.contains('clkd') ? 'vote' : 'unvote',
+		id: parseInt(this.parentNode.parentNode.id.substr(1))
+	}));
+}
 addEventListener('DOMContentLoaded', function() {
 	var code = document.getElementById('code'),
+		codeDisplay = document.getElementById('code-display'),
+		taCont = document.getElementById('ta-cont'),
 		output = document.getElementById('output'),
 		save = document.getElementById('save'),
 		up = document.getElementById('up'),
 		dn = document.getElementById('dn');
+	code.lastSelectionStart = 0;
+	code.lastSelectionEnd = 0;
+	code.lastCursorPos = 0;
+	code.whichSelection = true;
+	highlight(codeDisplay, code.lastValue = code.value);
+	taCont.className = codeDisplay.className;
+	var caret = document.createElement('span');
+	caret.id = 'caret';
+	caret.appendChild(document.createTextNode('\xA0'));
+	codeDisplay.insertAfter(caret, codeDisplay.firstChild);
+	blinkTimeout = setTimeout(blink, 500);
+	function handleTAInput() {
+		var codeScrollDiff = code.scrollHeight - code.offsetHeight;
+		if (code.value != code.lastValue) {
+			highlight(codeDisplay, code.lastValue = code.value);
+			taCont.className = codeDisplay.className;
+		}
+		code.style.height = codeDisplay.offsetHeight + 'px';
+		taCont.scrollTop += codeScrollDiff;
+		if (code.selectionStart != code.lastSelectionStart) {
+			code.lastSelectionStart = code.selectionStart;
+			code.whichSelection = false;
+		}
+		if (code.selectionEnd != code.lastSelectionEnd) {
+			code.lastSelectionEnd = code.selectionEnd;
+			code.whichSelection = true;
+		}
+		var cursorPos = code.whichSelection ? code.selectionEnd : code.selectionStart;
+		if (cursorPos != code.lastCursorPos) {
+			code.lastCursorPos = cursorPos;
+			var oldCaret = document.getElementById('caret');
+			if (oldCaret) oldCaret.parentNode.removeChild(oldCaret);
+			var caret = document.createElement('span');
+			caret.id = 'caret';
+			caret.appendChild(document.createTextNode('\xA0'));
+			insertNodeAtPosition(caret, codeDisplay, cursorPos);
+			clearTimeout(blinkTimeout);
+			blinkTimeout = setTimeout(blink, 500);
+		}
+	}
+	code.addEventListener('keypress', function() {
+		setTimeout(handleTAInput, 0);
+	});
+	code.addEventListener('keyup', function() {
+		setTimeout(handleTAInput, 0);
+	});
+	code.addEventListener('keydown', function() {
+		setTimeout(handleTAInput, 0);
+	});
+	code.addEventListener('mousedown', function() {
+		setTimeout(handleTAInput, 0);
+	});
+	addEventListener('mousemove', function() {
+		setTimeout(handleTAInput, 0);
+	});
+	code.addEventListener('input', handleTAInput);
+	code.addEventListener('blur', function() {
+		document.getElementById('caret').hidden = true;
+		clearTimeout(blinkTimeout);
+	});
+	code.addEventListener('focus', function() {
+		document.getElementById('caret').hidden = false;
+		clearTimeout(blinkTimeout);
+		blinkTimeout = setTimeout(blink, 500);
+	});
 	code.addEventListener('keypress', function(e) {
 		var oldSelectionStart = this.selectionStart;
 		var pairChars = {};
@@ -214,7 +303,7 @@ addEventListener('DOMContentLoaded', function() {
 			request('/api/program/vote', function(res) {
 				if (res.indexOf('Error') == 0) alert(res);
 				else if (res == 'Success') {
-					document.getElementsByClassName('user-$op-name')[0].getElementsByClassName('rep')[0].textContent -= (dn.classList.contains('clkd') ? -1 : 0) - (up.classList.contains('clkd') ? -1 : 1);
+					document.getElementsByClassName('user-' + opName)[0].getElementsByClassName('rep')[0].textContent -= (dn.classList.contains('clkd') ? -1 : 0) - (up.classList.contains('clkd') ? -1 : 1);
 					up.classList.toggle('clkd');
 					dn.classList.remove('clkd');
 				} else alert('Unknown error. Response was: ' + res);
@@ -224,7 +313,7 @@ addEventListener('DOMContentLoaded', function() {
 			request('/api/program/vote', function(res) {
 				if (res.indexOf('Error') == 0) alert(res);
 				else if (res == 'Success') {
-					document.getElementsByClassName('user-$op-name')[0].getElementsByClassName('rep')[0].textContent -= (up.classList.contains('clkd') ? 1 : 0) - (dn.classList.contains('clkd') ? 1 : -1);
+					document.getElementsByClassName('user-' + opName)[0].getElementsByClassName('rep')[0].textContent -= (up.classList.contains('clkd') ? 1 : 0) - (dn.classList.contains('clkd') ? 1 : -1);
 					dn.classList.toggle('clkd');
 					up.classList.remove('clkd');
 				} else alert('Unknown error. Response was: ' + res);
@@ -262,7 +351,7 @@ addEventListener('DOMContentLoaded', function() {
 				var div = document.createElement('div');
 				div.classList.add('comment');
 				div.innerHTML = ' ' + markdown(data.body);
-				if ($rep >= 50) {
+				if (myRep >= 50) {
 					div.insertBefore(document.getElementById('content').children[2].cloneNode(true), div.firstChild);
 					div.firstChild.firstChild.onclick = upvoteComment;
 					var score = document.createElement('span');
@@ -275,7 +364,7 @@ addEventListener('DOMContentLoaded', function() {
 				sig.appendChild(document.createTextNode('-'));
 				var a = document.createElement('a');
 				a.href = '/user/' + data.user;
-				a.appendChild(document.createTextNode(data.user))
+				a.appendChild(document.createTextNode(data.user));
 				sig.appendChild(a);
 				sig.appendChild(document.createTextNode(', '));
 				var permalink = document.createElement('a');
@@ -308,16 +397,623 @@ addEventListener('DOMContentLoaded', function() {
 				}
 			};
 		}
-		function upvoteComment() {
-			this.classList.toggle('clkd');
-			socket.send(JSON.stringify({
-				event: this.classList.contains('clkd') ? 'vote' : 'unvote',
-				id: parseInt(this.parentNode.parentNode.id.substr(1))
-			}));
-		}
 		var comments = document.getElementsByClassName('comment');
 		for (var i = 0; i < comments.length; i++) {
 			comments[i].getElementsByClassName('sctrls')[0].firstChild.onclick = upvoteComment;
 		}
 	}
-});
\ No newline at end of file
+});
+function highlight(codeBlock, input) {
+	var input = typeof(input) == 'string' ? input : codeBlock.textContent,
+		chunk = '',
+		warnings = [],
+		beforeWord,
+		line = 1,
+		inVarDec = [],
+		d,
+		fc;
+	while (fc = codeBlock.firstChild) codeBlock.removeChild(fc);
+	var linenum = document.createElement('span');
+	linenum.className = 'line';
+	linenum.dataset.linenum = line;
+	codeBlock.appendChild(linenum);
+	for (var i = 0; i < input.length; i++) {
+		var c = input[i],
+			l;
+		if (c == '"' || c == "'") {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = c;
+			var string = document.createElement('span');
+			string.className = 'string';
+			while ((d = input[++i]) && d != c) {
+				if (d == '\n') {
+					warnings.push([i, 'Unexpected line end with unterminated string literal.']);
+					break;
+				} else if (d == '\\') {
+					string.appendChild(document.createTextNode(chunk));
+					chunk = d;
+					if (d = input[++i]) chunk += d;
+					else warnings.push([i - 1, 'Incomplete escape sequence.']);
+					var escape = document.createElement('span');
+					escape.className = 'escape';
+					if (d == 'u') {
+						if (d = input[++i]) chunk += d;
+						if (d == '{') {
+							while ((d = input[++i]) && d != '}') {
+								if (d == '\n' || d == string) {
+									warnings.push([i, 'Unclosed bracket escape sequence.']);
+									break;
+								}
+								chunk += d;
+							}
+							if (d == '}') chunk += '}';
+						} else if (input[i + 3]) chunk += input[++i] + input[++i] + input[++i];
+						else warnings.push([i, 'Incomplete escape sequence.']);
+					} else if (c == 'x') chunk += input[++i] + input[++i];
+					escape.appendChild(document.createTextNode(chunk));
+					string.appendChild(escape);
+					chunk = '';
+					if (d == '\n') {
+						var linenum = document.createElement('span');
+						linenum.className = 'line';
+						linenum.dataset.linenum = ++line;
+						string.appendChild(linenum);
+					}
+				} else chunk += d;
+			}
+			if (d) chunk += d;
+			string.appendChild(document.createTextNode(chunk));
+			codeBlock.appendChild(string);
+			chunk = '';
+			if (d == '\n') {
+				var linenum = document.createElement('span');
+				linenum.className = 'line';
+				linenum.dataset.linenum = ++line;
+				codeBlock.appendChild(linenum);
+			}
+		} else if (c == '/' && input[i + 1] == '/') {
+			i++;
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '//';
+			var comment = document.createElement('span');
+			comment.className = 'inline-comment';
+			while ((d = input[++i]) && d != '\n') chunk += d;
+			if (d) chunk += '\n';
+			comment.appendChild(document.createTextNode(chunk));
+			codeBlock.appendChild(comment);
+			chunk = '';
+			if (d) {
+				var linenum = document.createElement('span');
+				linenum.className = 'line';
+				linenum.dataset.linenum = ++line;
+				codeBlock.appendChild(linenum);
+			}
+		} else if (c == '/' && input[i + 1] == '*') {
+			i++;
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '/*';
+			var comment = document.createElement('span');
+			comment.className = 'inline-comment';
+			while ((d = input[++i]) && (d != '/' || input[i - 1] != '*')) {
+				chunk += d;
+				if (d == '\n') {
+					comment.appendChild(document.createTextNode(chunk));
+					chunk = '';
+					var linenum = document.createElement('span');
+					linenum.className = 'line';
+					linenum.dataset.linenum = ++line;
+					comment.appendChild(linenum);
+				}
+			}
+			if (d) chunk += d;
+			comment.appendChild(document.createTextNode(chunk));
+			codeBlock.appendChild(comment);
+			chunk = '';
+			if (d == '\n') {
+				var linenum = document.createElement('span');
+				linenum.className = 'line';
+				linenum.dataset.linenum = ++line;
+				codeBlock.appendChild(linenum);
+			}
+		} else if (c == '/') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var regex = document.createElement('span');
+			regex.className = 'regex';
+			var regexOpen = document.createElement('span');
+			regexOpen.className = 'open';
+			regexOpen.appendChild(document.createTextNode('/'));
+			regex.appendChild(regexOpen);
+			var d,
+				charclass = false;
+			while ((d = input[++i]) && d != '/') {
+				if (d == '\n') {
+					warnings.push([i, 'Unexpected line end with unterminated regex literal.']);
+					break;
+				}
+				if (d == '\\') {
+					if (charclass) charclass.appendChild(document.createTextNode(chunk));
+					else regex.appendChild(document.createTextNode(chunk));
+					chunk = d + (d = input[++i]);
+					var escape = document.createElement('span');
+					escape.className = 'escape';
+					if (d == 'c') chunk += d = input[++i];
+					else if (d == 'x' || d == '0') chunk += input[++i] + input[++i];
+					else if (d == 'u') chunk += input[++i] + input[++i] + input[++i] + input[++i];
+					else if (d.match(/\d/)) {
+						while (input[++i].match(/\d/)) chunk += input[i];
+						i--;
+						escape.className = 'backreference';
+					}
+					escape.appendChild(document.createTextNode(chunk));
+					chunk = '';
+					if (charclass) charclass.appendChild(escape);
+					else regex.appendChild(escape);
+					if (d == '\n') {
+						warnings.push([i, 'Unexpected line end with unterminated regex literal.']);
+						break;
+					}
+				} else if (charclass) {
+					if (d == ']') {
+						charclass.appendChild(document.createTextNode(chunk));
+						chunk = '';
+						var end = document.createElement('span');
+						end.className = 'punctuation';
+						end.appendChild(document.createTextNode(']'));
+						charclass.appendChild(end);
+						regex.appendChild(charclass);
+						charclass = false;
+					} else if (input[i + 1] == '-') {
+						charclass.appendChild(document.createTextNode(chunk));
+						chunk = '';
+						var range = document.createElement('span');
+						range.className = 'range';
+						range.appendChild(document.createTextNode(d + input[++i] + input[++i]));
+						charclass.appendChild(range);
+					} else chunk += d;
+				} else {
+					if (d == '^' || d == '$' || d == '|' || d == '.') {
+						regex.appendChild(document.createTextNode(chunk));
+						chunk = '';
+						var special = document.createElement('span');
+						special.className = 'special';
+						special.appendChild(document.createTextNode(d));
+						regex.appendChild(special);
+					} else if (d == '?' || d == '+' || d == '*') {
+						regex.appendChild(document.createTextNode(chunk));
+						chunk = '';
+						var quantifier = document.createElement('span');
+						quantifier.className = 'quantifier';
+						quantifier.appendChild(document.createTextNode(d));
+						regex.appendChild(quantifier);
+					} else if (d == '?' || d == '+' || d == '*') {
+						regex.appendChild(document.createTextNode(chunk));
+						chunk = '';
+						var quantifier = document.createElement('span');
+						quantifier.className = 'quantifier';
+						quantifier.appendChild(document.createTextNode(d));
+						regex.appendChild(quantifier);
+					} else if (d == '(' || d == ')') {
+						regex.appendChild(document.createTextNode(chunk));
+						chunk = d;
+						if (d == '(' && input[i + 1] == '?' && ':=!'.indexOf(input[i + 2]) != -1) chunk += input[++i] + input[++i];
+						var grouper = document.createElement('span');
+						grouper.className = 'grouper';
+						grouper.appendChild(document.createTextNode(chunk));
+						regex.appendChild(grouper);
+						chunk = '';
+					} else if (d == '{') {
+						regex.appendChild(document.createTextNode(chunk));
+						chunk = '';
+						var quantifier = document.createElement('span');
+						quantifier.className = 'quantifier';
+						var brace = document.createElement('span');
+						brace.className = 'punctuation';
+						brace.appendChild(document.createTextNode('{'));
+						quantifier.appendChild(brace);
+						while ((d = input[++i]) && d != '}') {
+							if (d == ',') {
+								quantifier.appendChild(document.createTextNode(chunk));
+								chunk = '';
+								var comma = document.createElement('span');
+								comma.className = 'punctuation';
+								comma.appendChild(document.createTextNode(','));
+								quantifier.appendChild(comma);
+							} else chunk += d;
+						}
+						quantifier.appendChild(document.createTextNode(chunk));
+						if (d == '}') {
+							var brace = document.createElement('span');
+							brace.className = 'punctuation';
+							brace.appendChild(document.createTextNode('}'));
+							quantifier.appendChild(brace);
+						} else warnings.push([i, 'Unclosed regex quantifier.']);
+						chunk = '';
+						regex.appendChild(quantifier);
+					} else if (d == '[') {
+						regex.appendChild(document.createTextNode(chunk));
+						chunk = '[';
+						if (input[++i] == '^') chunk += '^';
+						else i--;
+						charclass = document.createElement('span');
+						charclass.className = 'charclass';
+						var start = document.createElement('span');
+						start.className = 'punctuation';
+						start.appendChild(document.createTextNode(chunk));
+						charclass.appendChild(start);
+						chunk = '';
+					} else chunk += d;
+				}
+			}
+			regex.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			if (d) {
+				var regexClose = document.createElement('span');
+				regexClose.className = 'close';
+				regexClose.appendChild(document.createTextNode('/'));
+				regex.appendChild(regexClose);
+			} else warnings.push([i, 'Unterminated regex literal.']);
+			var modifiers = input.substr(i + 1).match(/^[igm]+/);
+			if (modifiers) {
+				var regexModifier = document.createElement('span');
+				regexModifier.className = 'modifier';
+				regexModifier.appendChild(document.createTextNode(modifiers));
+				regex.appendChild(regexModifier);
+				i += modifiers.length;
+			}
+			codeBlock.appendChild(regex);
+		} else if ((beforeWord = (input[i - 1] || ' ').match(/[^\w.]/)) && c != c.toLowerCase()) {
+		 	codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = c;
+			var capvar = document.createElement('span');
+			capvar.className = 'capvar';
+			while ((d = input[++i]) && d.match(/[\w\d]/)) chunk += d;
+			i--;
+			capvar.appendChild(document.createTextNode(chunk));
+			codeBlock.appendChild(capvar);
+			chunk = '';
+		} else if (input.substr(i, 10) == '.prototype') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var dot = document.createElement('span');
+			dot.className = 'dot';
+			dot.appendChild(document.createTextNode('.'));
+			codeBlock.appendChild(dot);
+			var proto = document.createElement('span');
+			proto.className = 'prototype';
+			proto.appendChild(document.createTextNode('prototype'));
+			codeBlock.appendChild(proto);
+			i += 9;
+		} else if (beforeWord && (
+				('NaN' == input.substr(i, 3) && !(input[i + 3] || '').match(/\w/) && (l = 3)) ||
+				('true' == input.substr(i, 4) && !(input[i + 4] || '').match(/\w/) && (l = 4)) ||
+				('null' == input.substr(i, 4) && !(input[i + 4] || '').match(/\w/) && (l = 4)) ||
+				('false' == input.substr(i, 5) && !(input[i + 5] || '').match(/\w/) && (l = 5)) ||
+				('Infinity' == input.substr(i, 8) && !(input[i + 8] || '').match(/\w/) && (l = 8))
+			)) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var keyword = document.createElement('span');
+			keyword.className = 'constant';
+			keyword.appendChild(document.createTextNode(input.substr(i, l)));
+			codeBlock.appendChild(keyword);
+			i += l - 1;
+		} else if (beforeWord && (
+				(['do', 'if', 'in'].indexOf(input.substr(i, 2)) != -1 && !(input[i + 2] || '').match(/\w/) && (l = 2)) ||
+				(['for', 'let', 'new', 'try', 'var'].indexOf(input.substr(i, 3)) != -1 && !(input[i + 3] || '').match(/\w/) && (l = 3)) ||
+				(['case', 'else', 'this', 'void', 'with'].indexOf(input.substr(i, 4)) != -1 && !(input[i + 4] || '').match(/\w/) && (l = 4)) ||
+				(['break', 'class', 'catch', 'const', 'super', 'throw', 'while', 'yield'].indexOf(input.substr(i, 5)) != -1 && !(input[i + 5] || '').match(/\w/) && (l = 5)) ||
+				(['delete', 'export', 'import', 'return', 'switch', 'typeof'].indexOf(input.substr(i, 6)) != -1 && !(input[i + 6] || '').match(/\w/) && (l = 6)) ||
+				(['default', 'finally'].indexOf(input.substr(i, 7)) != -1 && !(input[i + 7] || '').match(/\w/) && (l = 7)) ||
+				(['continue', 'debugger'].indexOf(input.substr(i, 8)) != -1 && !(input[i + 8] || '').match(/\w/) && (l = 8)) ||
+				(['instanceof'].indexOf(input.substr(i, 10)) != -1 && !(input[i + 10] || '').match(/\w/) && (l = 10))
+			)) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var keyword = document.createElement('span');
+			keyword.className = 'keyword';
+			keyword.appendChild(document.createTextNode(input.substr(i, l)));
+			codeBlock.appendChild(keyword);
+			if (input.substr(i, l) == 'var') inVarDec.unshift({
+				parens: 0,
+				brackets: 0,
+				braces: 0,
+				equals: false
+			});
+			if (input.substr(i, l) == 'in') inVarDec.shift();
+			i += l - 1;
+		} else if (beforeWord && (
+				(['top'].indexOf(input.substr(i, 3)) != -1 && !(input[i + 3] || '').match(/\w/) && (l = 3)) ||
+				(['self'].indexOf(input.substr(i, 4)) != -1 && !(input[i + 4] || '').match(/\w/) && (l = 4)) ||
+				(['fetch'].indexOf(input.substr(i, 5)) != -1 && !(input[i + 5] || '').match(/\w/) && (l = 5)) ||
+				(['window', 'screen', 'crypto', 'status', 'frames', 'opener', 'parent'].indexOf(input.substr(i, 6)) != -1 && !(input[i + 6] || '').match(/\w/) && (l = 6)) ||
+				(['console', 'history', 'menubar', 'toolbar'].indexOf(input.substr(i, 7)) != -1 && !(input[i + 7] || '').match(/\w/) && (l = 7)) ||
+				(['document'].indexOf(input.substr(i, 8)) != -1 && !(input[i + 8] || '').match(/\w/) && (l = 8)) ||
+				(['statusbar', 'navigator', 'indexedDB'].indexOf(input.substr(i, 9)) != -1 && !(input[i + 9] || '').match(/\w/) && (l = 9)) ||
+				(['scrollbars', 'styleMedia'].indexOf(input.substr(i, 10)) != -1 && !(input[i + 10] || '').match(/\w/) && (l = 10)) ||
+				(['locationbar', 'personalbar'].indexOf(input.substr(i, 11)) != -1 && !(input[i + 11] || '').match(/\w/) && (l = 11)) ||
+				(['frameElement', 'localStorage'].indexOf(input.substr(i, 12)) != -1 && !(input[i + 12] || '').match(/\w/) && (l = 12)) ||
+				(['performance'].indexOf(input.substr(i, 13)) != -1 && !(input[i + 13] || '').match(/\w/) && (l = 13)) ||
+				(['sessionStorage'].indexOf(input.substr(i, 14)) != -1 && !(input[i + 14] || '').match(/\w/) && (l = 14)) ||
+				(['speechSynthesis'].indexOf(input.substr(i, 15)) != -1 && !(input[i + 15] || '').match(/\w/) && (l = 15)) ||
+				(['devicePixelRatio', 'applicationCache'].indexOf(input.substr(i, 16)) != -1 && !(input[i + 16] || '').match(/\w/) && (l = 16))
+			)) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var keyword = document.createElement('span');
+			keyword.className = 'browser';
+			keyword.appendChild(document.createTextNode(input.substr(i, l)));
+			codeBlock.appendChild(keyword);
+			i += l - 1;
+		} else if (input.substr(i, 8) == 'function') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var node,
+				nodeNum = codeBlock.childNodes.length,
+				fnameNodes = [],
+				foundEquals = false,
+				endNode = false;
+			prevNodes: while (node = codeBlock.childNodes[--nodeNum]) {
+				if (node.className == 'equals') {
+					foundEquals = true;
+				} else if (foundEquals) {
+					if (!endNode) {
+						if (node.tagName) {
+							endNode = node;
+						} else {
+							var str = node.nodeValue;
+							for (var j = str.length - 1; j >= 0; j--) {
+								if (str[j].match(/[\S]/)) {
+									endNode = node.splitText(j + 1);
+									nodeNum++;
+									break;
+								}
+							}
+						}
+						continue;
+					}
+					if (node.tagName) {
+						if (node.className == 'inline-comment') continue;
+						if (['capvar', 'dot', 'prototype', 'newvar', 'line'].indexOf(node.className) != -1 && node.dataset.linenum != 1) fnameNodes.push(node);
+						else {
+							var fname = document.createElement('span');
+							fname.className = 'function-name';
+							for (var j = fnameNodes.length - 1; j >= 0; j--) fname.appendChild(fnameNodes[j]);
+							codeBlock.insertBefore(fname, endNode);
+							break;
+						}
+					} else {
+						var str = node.nodeValue;
+						for (var j = str.length - 1; j >= 0; j--) {
+							if (str[j].match(/[\s=(]/)) {
+								fnameNodes.push(node.splitText(j + 1));
+								var fname = document.createElement('span');
+								fname.className = 'function-name';
+								for (var j = fnameNodes.length - 1; j >= 0; j--) fname.appendChild(fnameNodes[j]);
+								codeBlock.insertBefore(fname, endNode);
+								if (endNode.tagName) fname.appendChild(endNode);
+								break prevNodes;
+							}
+						}
+						fnameNodes.push(node);
+					}
+				} else if (node.textContent.match(/\S/)) break;
+			}
+			var funcKeyword = document.createElement('span');
+			funcKeyword.className = 'keyword';
+			funcKeyword.appendChild(document.createTextNode('function'));
+			codeBlock.appendChild(funcKeyword);
+			i += 7;
+			var fname = document.createElement('span');
+			fname.className = 'function-name';
+			while ((c = input[++i]) && c != '(') {
+				chunk += c;
+				if (c == '\n') {
+					fname.appendChild(document.createTextNode(chunk));
+					chunk = '';
+					var linenum = document.createElement('span');
+					linenum.className = 'line';
+					linenum.dataset.linenum = ++line;
+					fname.appendChild(linenum);
+				}
+			}
+			fname.appendChild(document.createTextNode(chunk));
+			codeBlock.appendChild(fname);
+			chunk = '';
+			if (input[i] != '(') {
+				warnings.push([i, 'Arguments not found.']);
+				i--;
+			} else {
+				var paren = document.createElement('span');
+				paren.className = 'punctuation';
+				paren.appendChild(document.createTextNode('('));
+				codeBlock.appendChild(paren);
+				while ((c = input[++i]) && c != ')') {
+					if (c == ',') {
+						var arg = document.createElement('span');
+						arg.className = 'argument';
+						arg.appendChild(document.createTextNode(chunk));
+						codeBlock.appendChild(arg);
+						chunk = '';
+						var comma = document.createElement('span');
+						comma.className = 'punctuation';
+						comma.appendChild(document.createTextNode(','));
+						codeBlock.appendChild(comma);
+					} else chunk += c;
+				}
+				var arg = document.createElement('span');
+				arg.className = 'argument';
+				arg.appendChild(document.createTextNode(chunk));
+				codeBlock.appendChild(arg);
+				chunk = '';
+				if (c) {
+					var paren = document.createElement('span');
+					paren.className = 'punctuation';
+					paren.appendChild(document.createTextNode(')'));
+					codeBlock.appendChild(paren);
+				} else {
+					warnings.push([i, 'Unclosed argument list.']);
+					i--;
+				}
+			}
+		} else if (c == '(') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var lastChunk = codeBlock.lastChild.nodeValue;
+			if (lastChunk) {
+				var call = codeBlock.lastChild.splitText(Math.max(lastChunk.lastIndexOf(' '), lastChunk.lastIndexOf('\t'), lastChunk.lastIndexOf('\n'), 0));
+				var callspan = document.createElement('span');
+				callspan.className = 'function-call';
+				callspan.appendChild(call);
+				codeBlock.appendChild(callspan);
+			}
+			var charspan = document.createElement('span');
+			charspan.className = 'punctuation';
+			charspan.appendChild(document.createTextNode('('));
+			codeBlock.appendChild(charspan);
+			if (inVarDec[0]) inVarDec[0].parens++;
+		} else if (['++', '--', '*=', '/=', '%=', '+=', '-=', '&=', '|=', '^='].indexOf(input.substr(i, 2)) != -1) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var operator = document.createElement('span');
+			operator.className = 'operator assigns';
+			operator.appendChild(document.createTextNode(input.substr(i, 2)));
+			codeBlock.appendChild(operator);
+			i++;
+		} else if (input.substr(i, 3) == '<<=' || input.substr(i, 3) == '>>=') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var operator = document.createElement('span');
+			operator.className = 'operator assigns';
+			operator.appendChild(document.createTextNode(input.substr(i, 3)));
+			codeBlock.appendChild(operator);
+			i += 2;
+		} else if (input.substr(i, 3) == '>>>=') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var operator = document.createElement('span');
+			operator.className = 'operator assigns';
+			operator.appendChild(document.createTextNode(input.substr(i, 3)));
+			codeBlock.appendChild(operator);
+			i += 3;
+		} else if ('?:'.indexOf(c) != -1) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var operator = document.createElement('span');
+			operator.className = 'operator';
+			operator.appendChild(document.createTextNode(c));
+			codeBlock.appendChild(operator);
+		} else if (['<=', '>=', '==', '!=', '<<', '>>', '&&', '||'].indexOf(input.substr(i, 2)) != -1) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var operator = document.createElement('span');
+			operator.className = 'operator';
+			operator.appendChild(document.createTextNode(input.substr(i, 2)));
+			codeBlock.appendChild(operator);
+			i++;
+		} else if (input.substr(i, 3) == '===' || input.substr(i, 3) == '!==' || input.substr(i, 3) == '>>>') {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var operator = document.createElement('span');
+			operator.className = 'operator';
+			operator.appendChild(document.createTextNode(input.substr(i, 3)));
+			codeBlock.appendChild(operator);
+			i += 2;
+		} else if (beforeWord && c.match(/\d/)) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var start = i;
+			if (c == '0' && (c = input[++i])) {
+				if (c.toLowerCase() == 'b') {
+					while ('01'.indexOf(input[++i]) != -1);
+				} else if (c.toLowerCase() == 'o') {
+					while ('01234567'.indexOf(input[++i]) != -1);
+				} else if (c.toLowerCase() == 'x') {
+					while ('0123456789abcdefABCDEF'.indexOf(input[++i]) != -1);
+				} else if (c.match(/[\d\w]/)) warnings.push([i, 'Bad number literal.']);
+				var num = document.createElement('span');
+				num.className = 'number';
+				num.appendChild(document.createTextNode(input.substring(start, i--)));
+				codeBlock.appendChild(num);
+			} else {
+				while ('0123456789.'.indexOf(input[i]) != -1) i++;
+				if ((input[i] || '').toLowerCase() == 'e') {
+					if ('+-'.indexOf(input[i])) i++;
+					if ('0123456789'.indexOf(input[i]) == -1) warnings.push([i, 'No exponent found after "e".']);
+					else i++;
+					while ('0123456789.'.indexOf(input[i]) != -1) i++;
+				}
+				var num = document.createElement('span');
+				num.className = 'number';
+				num.appendChild(document.createTextNode(input.substring(start, i)));
+				codeBlock.appendChild(num);
+				i--;
+			}
+		} else if ('=.,;)[]{}'.indexOf(c) != -1) {
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			var charspan = document.createElement('span');
+			charspan.className = ({'=': 'equals', '.': 'dot'})[c] || 'punctuation';
+			charspan.appendChild(document.createTextNode(c));
+			codeBlock.appendChild(charspan);
+			if (inVarDec[0]) {
+				if (Math.max(inVarDec[0].parens, inVarDec[0].brackets, inVarDec[0].braces) == 0) {
+					if (c == '=') inVarDec[0].equals = true;
+					if (c == ',') inVarDec[0].equals = false;
+				}
+				if (c == ')') {
+					inVarDec[0].parens--;
+					if (inVarDec[0].parens < 0) {
+						warnings.push([i, 'Unexpected close paren, make sure you use a semicolon after a variable declaration.']);
+						inVarDec.shift();
+					}
+				}
+				if (c == '[') inVarDec[0].brackets++;
+				if (c == ']') {
+					inVarDec[0].brackets--;
+					if (inVarDec[0].brackets < 0) {
+						warnings.push([i, 'Unexpected close bracket, make sure you use a semicolon after a variable declaration.']);
+						inVarDec.shift();
+					}
+				}
+				if (c == '{') inVarDec[0].braces++;
+				if (c == '}') {
+					inVarDec[0].braces--;
+					if (inVarDec[0].braces < 0) {
+						warnings.push([i, 'Unexpected close brace, make sure you use a semicolon after a variable declaration.']);
+						inVarDec.shift();
+					}
+				}
+				if (c == ';') inVarDec.shift();
+			}
+		} else if (c == '\n') {
+			codeBlock.appendChild(document.createTextNode(chunk + '\n'));
+			chunk = '';
+			var linenum = document.createElement('span');
+			linenum.className = 'line';
+			linenum.dataset.linenum = ++line;
+			codeBlock.appendChild(linenum);
+		} else if (c.match(/\S/) && inVarDec[0] && !inVarDec[0].equals && Math.max(inVarDec[0].parens, inVarDec[0].brackets, inVarDec[0].braces) == 0) {
+			var newvar;
+			codeBlock.appendChild(document.createTextNode(chunk));
+			chunk = '';
+			if (codeBlock.lastChild.className == 'newvar') newvar = codeBlock.lastChild;
+			else {
+				newvar = document.createElement('span');
+				newvar.className = 'newvar';
+			}
+			newvar.appendChild(document.createTextNode(c));
+			codeBlock.appendChild(newvar);
+		} else chunk += c;
+	}
+	codeBlock.appendChild(document.createTextNode(chunk));
+	codeBlock.className = 'line-dig' + Math.floor(Math.log10(line));
+	var lines = input.split('\n');
+	for (var i = 0; i < warnings.length; i++) {
+		var line = input.substr(0, warnings[i][0]).split('\n').length - 1,
+			lineEl = codeBlock.getElementsByClassName('line')[line];
+		lineEl.classList.add('warning');
+		if (lineEl.title) lineEl.title += '\n';
+		lineEl.title += 'Column ' + (warnings[i][0] - lines.slice(0, line).join('\n').length) + ': ' + warnings[i][1];
+	}
+}
\ No newline at end of file