diff --git a/js/JavaScriptParser.js b/js/JavaScriptParser.js index babfc0b6f..53edc41eb 100644 --- a/js/JavaScriptParser.js +++ b/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 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 `
`
 	return new WikiTextParseTree([
 			Renderer.ElementNode("pre",{"class": "javascript-source"},result)
 		],new Dependencies(),this.store);
diff --git a/tiddlywiki5/styles.css b/tiddlywiki5/styles.css
index 39f5610c3..f1fe9d25d 100644
--- a/tiddlywiki5/styles.css
+++ b/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;
+}
+
+
+