mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-20 00:34:50 +00:00
Code Issues Releases Wiki Activity

Improved rendering of JavaScript comments

Browse Source
This commit is contained in:
Jeremy Ruston 2012-03-02 14:21:02 +00:00
parent 865a0ad7cc
commit d3ca939863
2 changed files with 66 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
js/JavaScriptParser.js
View File

@ -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 // Parse a string of JavaScript code or JSON and return the parse tree as a wikitext parse tree
JavaScriptParser.prototype.parse = function(type,code) { JavaScriptParser.prototype.parse = function(type,code) {
var parseTree,
result = [],
t,endLastToken = 0;
// Try to parse the code // Try to parse the code
try { try {
parseTree = esprima.parse(code,{tokens: true,range: true}); var parseTree = esprima.parse(code,{comment: true,tokens: true,range: true});
} catch(ex) { } catch(ex) {
// Return a helpful error if the parse failed // Return a helpful error if the parse failed
return new WikiTextParseTree([ return new WikiTextParseTree([
@ -37,22 +34,61 @@ JavaScriptParser.prototype.parse = function(type,code) {
]) ])
],new Dependencies(),this.store); ],new Dependencies(),this.store);
} }
// Render the tokens with the appropriate class // Helpers to render the comments and tokens with the appropriate classes
for(t=0; t<parseTree.tokens.length; t++) { var self = this,
var token = parseTree.tokens[t]; result = [],
if(token.range[0] > endLastToken) { nextComment = 0,
result.push(Renderer.TextNode(code.substring(endLastToken,token.range[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([ return new WikiTextParseTree([
Renderer.ElementNode("pre",{"class": "javascript-source"},result) Renderer.ElementNode("pre",{"class": "javascript-source"},result)
],new Dependencies(),this.store); ],new Dependencies(),this.store);

23
tiddlywiki5/styles.css
View File

@ -273,42 +273,43 @@ a.tw-slider-label::after {
outline: 1px dotted #666; outline: 1px dotted #666;
} }
.javascript-source {
font-style: italic;
}
.javascript-source .javascript-boolean { .javascript-source .javascript-boolean {
font-style: normal;
} }
.javascript-source .javascript-identifier { .javascript-source .javascript-identifier {
font-style: normal;
color: #b00; color: #b00;
} }
.javascript-source .javascript-keyword { .javascript-source .javascript-keyword {
font-style: normal;
color: #393; color: #393;
font-weight: bold; font-weight: bold;
} }
.javascript-source .javascript-null { .javascript-source .javascript-null {
font-style: normal;
color: #833; color: #833;
} }
.javascript-source .javascript-numeric { .javascript-source .javascript-numeric {
font-style: normal;
color: #33a; color: #33a;
} }
.javascript-source .javascript-punctuator { .javascript-source .javascript-punctuator {
font-style: normal;
color: #444; color: #444;
} }
.javascript-source .javascript-string { .javascript-source .javascript-string {
font-style: normal;
color: #388; 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;
}