diff --git a/js/JavaScriptParser.js b/js/JavaScriptParser.js
index 3d183fd94..9640751bc 100644
--- a/js/JavaScriptParser.js
+++ b/js/JavaScriptParser.js
@@ -44,11 +44,47 @@ var JavaScriptParser = function(options) {
     this.store = options.store;
 };
 
-// Parse a string of JavaScript code and return the parse tree as a wikitext parse tree
+// Parse a string of JavaScript code or JSON and return the parse tree as a wikitext parse tree
 JavaScriptParser.prototype.parse = function(type,code) {
-	if(type === "application/json") {
-		code = "(" + code + ")";
+	if(type === "application/javascript") {
+		return this.parseJavaScript(code);
+	} else {
+		return this.parseJSON(code);
 	}
+}
+
+JavaScriptParser.prototype.parseJavaScript = function(code) {
+	// Get the parse tree
+	var parseTree = esprima.parse(code,{
+			tokens: true,
+			range: true
+		}),
+		result = [],
+		t,endLastToken = 0;
+	for(t=0; t<parseTree.tokens.length; t++) {
+		var token = parseTree.tokens[t];
+		if(token.range[0] > endLastToken) {
+			result.push(Renderer.TextNode(code.substring(endLastToken,token.range[0])));
+		}
+		result.push(Renderer.ElementNode("span",{
+			"class": "javascript-" + token.type.toLowerCase()
+		},[
+			Renderer.TextNode(token.value)
+		]));
+		endLastToken = token.range[1] + 1;
+	}
+	if(endLastToken < code.length) {
+		result.push(Renderer.TextNode(code.substring(endLastToken)));
+	}
+	return new WikiTextParseTree([
+			Renderer.ElementNode("pre",{"class": "javascript-source"},result)
+		],new Dependencies(),this.store);
+};
+
+JavaScriptParser.prototype.parseJSON = function(code) {
+	// Wrap it in parenthesis to make it a program
+	code = "(" + code + ")";
+	// Get the parse tree
 	return new WikiTextParseTree([
 		renderObject(esprima.parse(code))
 	],new Dependencies(),this.store);
diff --git a/tiddlywiki5/styles.css b/tiddlywiki5/styles.css
index 1a5fdd27e..ac98ef88a 100644
--- a/tiddlywiki5/styles.css
+++ b/tiddlywiki5/styles.css
@@ -18,7 +18,7 @@ code, pre {
     font-size: 13px;
     line-height: 18px;
     padding: 0 3px 2px;
-    font-family: Monaco, Andale Mono, Courier New, monospace;
+    font-family: 'Bitstream Vera Sans Mono','Courier','Courier New', monospace;
     font-size: 12px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -254,3 +254,43 @@ a.tw-slider-label::after {
 .tw-slider-label:focus {
   outline: 1px dotted #666;
 }
+
+.javascript-source {
+    font-style: italic;
+}
+
+.javascript-source .javascript-boolean {
+    font-style: normal;
+}
+
+.javascript-source .javascript-identifier {
+    font-style: normal;
+    color: #b00;
+}
+
+.javascript-source .javascript-keyword {
+    font-style: normal;
+    color: #393;
+    font-weight: bold;
+}
+
+.javascript-source .javascript-null {
+    font-style: normal;
+    color: #833;
+}
+
+.javascript-source .javascript-numeric {
+    font-style: normal;
+    color: #33a;
+}
+
+.javascript-source .javascript-punctuator {
+    font-style: normal;
+    color: #444;
+}
+
+.javascript-source .javascript-string {
+    font-style: normal;
+    color: #388;
+}
+