Improved rendering of JavaScript comments

js/JavaScriptParser.js

@@ -21,12 +21,9 @@ var JavaScriptParser = function(options) {
 
 // Parse a string of JavaScript code or JSON and return the parse tree as a wikitext parse tree
 JavaScriptParser.prototype.parse = function(type,code) {
-	var parseTree,
-		result = [],
-		t,endLastToken = 0;
 	// Try to parse the code
 	try {
-		parseTree = esprima.parse(code,{tokens: true,range: true});
+		var parseTree = esprima.parse(code,{comment: true,tokens: true,range: true});
 	} catch(ex) {
 		// Return a helpful error if the parse failed
 		return new WikiTextParseTree([
@@ -37,22 +34,61 @@ JavaScriptParser.prototype.parse = function(type,code) {
 			])
 		],new Dependencies(),this.store);
 	}
-	// Render the tokens with the appropriate class
-	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])));
+	// Helpers to render the comments and tokens with the appropriate classes
+	var self = this,
+		result = [],
+		nextComment = 0,
+		nextToken = 0,
+		currPos = 0;
+	var renderWhitespace = function(nextPos) {
+			if(currPos < nextPos) {
+				result.push(Renderer.TextNode(code.substring(currPos,nextPos)));
+			}
+		},
+		renderComment = function(comment) {
+			var text = comment.value,
+				element,
+				classes = [];
+			renderWhitespace(comment.range[0]);
+			if(comment.type === "Block") {
+				element = "div";
+				classes.push("javascript-block-comment");
+			} else {
+				element = "span";
+				classes.push("javascript-line-comment");
+			}
+			result.push(Renderer.ElementNode(element,{"class": classes},
+					self.store.parseText("text/x-tiddlywiki",text).tree));
+			if(comment.type === "Line") {
+				result.push(Renderer.TextNode("\n"));
+			}
+			currPos = comment.range[1] + 1;
+		},
+		renderToken = function(token) {
+			renderWhitespace(token.range[0]);
+			result.push(Renderer.ElementNode("span",{
+				"class": "javascript-" + token.type.toLowerCase()
+			},[
+				Renderer.TextNode(token.value)
+			]));
+			currPos = token.range[1] + 1;
+		};
+	// Process the tokens interleaved with the comments
+	while(nextComment < parseTree.comments.length || nextToken < parseTree.tokens.length) {
+		if(nextComment < parseTree.comments.length && nextToken < parseTree.tokens.length) {
+			if(parseTree.comments[nextComment].range[0] < parseTree.tokens[nextToken].range[0]) {
+				renderComment(parseTree.comments[nextComment++]);
+			} else {
+				renderToken(parseTree.tokens[nextToken++]);
+			}
+		} else if(nextComment < parseTree.comments.length) {
+			renderComment(parseTree.comments[nextComment++]);
+		} else {
+			renderToken(parseTree.tokens[nextToken++]);
 		}
-		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)));
 	}
+	renderWhitespace(code.length);
+	// Wrap the whole lot in a `<PRE>`
 	return new WikiTextParseTree([
 			Renderer.ElementNode("pre",{"class": "javascript-source"},result)
 		],new Dependencies(),this.store);

tiddlywiki5/styles.css

@@ -273,42 +273,43 @@ a.tw-slider-label::after {
   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;
 }
 
+.javascript-source .javascript-block-comment {
+    font-family: Helvetica, Arial, sans-serif;
+    background: #fff;
+}
+
+.javascript-source .javascript-line-comment {
+    font-family: Helvetica, Arial, sans-serif;
+    background: #ff0;
+}
+
+
+