Merge pull request #1495 from ajaxorg/static_highlighter
fix #1492 $' breaks static-highligher
This commit is contained in:
Harutyun Amirjanyan
commit
b860c2293c
4 changed files with 59 additions and 43 deletions
|
|
@ -2,7 +2,7 @@
|
|||
* Simple node.js server, which generates the synax highlighted version of itself
|
||||
* using the Ace modes and themes on the server and serving a static web page.
|
||||
*/
|
||||
|
||||
// $'
|
||||
// include ace search path and modules
|
||||
require("amd-loader");
|
||||
|
||||
|
|
@ -23,12 +23,14 @@ http.createServer(function(req, res) {
|
|||
res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
|
||||
fs.readFile(__filename, "utf8", function(err, data) {
|
||||
var highlighted = highlighter.render(data, new JavaScriptMode(), theme);
|
||||
res.end('<html><body>\n\
|
||||
<style type="text/css" media="screen">\n\
|
||||
:css:\n\
|
||||
</style>\n\
|
||||
:html:\n\
|
||||
</body></html>'.replace(":css:", highlighted.css).replace(":html:", highlighted.html));
|
||||
res.end(
|
||||
'<html><body>\n' +
|
||||
'<style type="text/css" media="screen">\n' +
|
||||
highlighted.css +
|
||||
'</style>\n' +
|
||||
highlighted.html +
|
||||
'</body></html>'
|
||||
);
|
||||
});
|
||||
}).listen(port);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
.ace_editor {
|
||||
font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace;
|
||||
.ace_static_highlight {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Droid Sans Mono', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ace_editor .ace_gutter {
|
||||
.ace_static_highlight .ace_gutter {
|
||||
width: 25px !important;
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: right;
|
||||
padding: 0 3px 0 0;
|
||||
margin-right: 3px;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.ace_line { clear: both; }
|
||||
.ace_static_highlight .ace_line { clear: both; }
|
||||
|
||||
*.ace_gutter-cell {
|
||||
.ace_static_highlight .ace_gutter-cell {
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
|
|||
|
|
@ -120,11 +120,11 @@ exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
|
|||
}
|
||||
|
||||
// let's prepare the whole html
|
||||
var html = "<div class=':cssClass'>\
|
||||
<div class='ace_editor ace_scroller ace_text-layer'>\
|
||||
:code\
|
||||
</div>\
|
||||
</div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
|
||||
var html = "<div class='" + theme.cssClass + "'>" +
|
||||
"<div class='ace_static_highlight'>" +
|
||||
stringBuilder.join("") +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
|
||||
textLayer.destroy();
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ define(function(require, exports, module) {
|
|||
var assert = require("assert");
|
||||
var highlighter = require("./static_highlight");
|
||||
var JavaScriptMode = require("../mode/javascript").Mode;
|
||||
var TextMode = require("../mode/text").Mode;
|
||||
|
||||
// Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite
|
||||
module.exports = {
|
||||
|
|
@ -16,34 +17,35 @@ module.exports = {
|
|||
|
||||
"test simple snippet": function(next) {
|
||||
var theme = require("../theme/tomorrow");
|
||||
var snippet = "\
|
||||
/** this is a function\n\
|
||||
*\n\
|
||||
*/\n\
|
||||
function hello (a, b, c) {\n\
|
||||
console.log(a * b + c + 'sup?');\n\
|
||||
}";
|
||||
var snippet = [
|
||||
"/** this is a function",
|
||||
"*",
|
||||
"*/",
|
||||
"function hello (a, b, c) {",
|
||||
" console.log(a * b + c + 'sup$');",
|
||||
"}"
|
||||
].join("\n");
|
||||
var mode = new JavaScriptMode();
|
||||
|
||||
var result = highlighter.render(snippet, mode, theme);
|
||||
assert.equal(result.html, "<div class='ace-tomorrow'> <div class='ace_editor ace_scroller ace_text-layer'> <div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>1</span><span class='ace_comment ace_doc'>/**\xa0this\xa0is\xa0a\xa0function</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>2</span><span class='ace_comment ace_doc'>*</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>3</span><span class='ace_comment ace_doc'>*/</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>4</span><span class='ace_storage ace_type'>function</span>\xa0<span class='ace_entity ace_name ace_function'>hello</span>\xa0<span class='ace_paren ace_lparen'>(</span><span class='ace_variable ace_parameter'>a</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>b</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>c</span><span class='ace_paren ace_rparen'>)</span>\xa0<span class='ace_paren ace_lparen'>{</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>5</span>\xa0\xa0\xa0\xa0<span class='ace_storage ace_type'>console</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_support ace_function ace_firebug'>log</span><span class='ace_paren ace_lparen'>(</span><span class='ace_identifier'>a</span>\xa0<span class='ace_keyword ace_operator'>*</span>\xa0<span class='ace_identifier'>b</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_identifier'>c</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_string'>'sup?'</span><span class='ace_paren ace_rparen'>)</span><span class='ace_punctuation ace_operator'>;</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>6</span><span class='ace_paren ace_rparen'>}</span></div> </div> </div>");
|
||||
assert.equal(result.html, "<div class='ace-tomorrow'><div class='ace_static_highlight'><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>1</span><span class='ace_comment ace_doc'>/**\xa0this\xa0is\xa0a\xa0function</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>2</span><span class='ace_comment ace_doc'>*</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>3</span><span class='ace_comment ace_doc'>*/</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>4</span><span class='ace_storage ace_type'>function</span>\xa0<span class='ace_entity ace_name ace_function'>hello</span>\xa0<span class='ace_paren ace_lparen'>(</span><span class='ace_variable ace_parameter'>a</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>b</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>c</span><span class='ace_paren ace_rparen'>)</span>\xa0<span class='ace_paren ace_lparen'>{</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>5</span>\xa0\xa0\xa0\xa0<span class='ace_storage ace_type'>console</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_support ace_function ace_firebug'>log</span><span class='ace_paren ace_lparen'>(</span><span class='ace_identifier'>a</span>\xa0<span class='ace_keyword ace_operator'>*</span>\xa0<span class='ace_identifier'>b</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_identifier'>c</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_string'>'sup$'</span><span class='ace_paren ace_rparen'>)</span><span class='ace_punctuation ace_operator'>;</span></div><div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>6</span><span class='ace_paren ace_rparen'>}</span></div></div></div>");
|
||||
assert.ok(!!result.css);
|
||||
next();
|
||||
},
|
||||
|
||||
"test css from theme is used": function(next) {
|
||||
var theme = require("../theme/tomorrow");
|
||||
var snippet = "\
|
||||
/** this is a function\n\
|
||||
*\n\
|
||||
*/\n\
|
||||
function hello (a, b, c) {\n\
|
||||
console.log(a * b + c + 'sup?');\n\
|
||||
}";
|
||||
var snippet = [
|
||||
"/** this is a function",
|
||||
"*",
|
||||
"*/",
|
||||
"function hello (a, b, c) {",
|
||||
" console.log(a * b + c + 'sup?');",
|
||||
"}"
|
||||
].join("\n");
|
||||
var mode = new JavaScriptMode();
|
||||
|
||||
var isError = false, result;
|
||||
result = highlighter.render(snippet, mode, theme);
|
||||
var result = highlighter.render(snippet, mode, theme);
|
||||
|
||||
assert.ok(result.css.indexOf(theme.cssText) !== -1);
|
||||
|
||||
|
|
@ -52,19 +54,30 @@ function hello (a, b, c) {\n\
|
|||
|
||||
"test theme classname should be in output html": function(next) {
|
||||
var theme = require("../theme/tomorrow");
|
||||
var snippet = "\
|
||||
/** this is a function\n\
|
||||
*\n\
|
||||
*/\n\
|
||||
function hello (a, b, c) {\n\
|
||||
console.log(a * b + c + 'sup?');\n\
|
||||
}";
|
||||
var snippet = [
|
||||
"/** this is a function",
|
||||
"*",
|
||||
"*/",
|
||||
"function hello (a, b, c) {",
|
||||
" console.log(a * b + c + 'sup?');",
|
||||
"}"
|
||||
].join("\n");
|
||||
var mode = new JavaScriptMode();
|
||||
|
||||
var isError = false, result;
|
||||
result = highlighter.render(snippet, mode, theme);
|
||||
var result = highlighter.render(snippet, mode, theme);
|
||||
assert.equal(!!result.html.match(/<div class='ace-tomorrow'>/), true);
|
||||
|
||||
next();
|
||||
},
|
||||
|
||||
"test js string replace specials": function(next) {
|
||||
var theme = require("../theme/tomorrow");
|
||||
var snippet = "$'$1$2$$$&";
|
||||
var mode = new TextMode();
|
||||
|
||||
var result = highlighter.render(snippet, mode, theme);
|
||||
assert.ok(result.html.indexOf(snippet) != -1);
|
||||
|
||||
next();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue