jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1495 from ajaxorg/static_highlighter

Browse source 
fix #1492 $' breaks static-highligher
This commit is contained in:
Harutyun Amirjanyan 2013-06-30 07:44:33 -07:00
commit b860c2293c
4 changed files with 59 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

16
demo/static-highlighter/server.js
View file

@ -2,7 +2,7 @@
* Simple node.js server, which generates the synax highlighted version of itself * 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. * using the Ace modes and themes on the server and serving a static web page.
*/ */
// $'
// include ace search path and modules // include ace search path and modules
require("amd-loader"); require("amd-loader");
@ -23,12 +23,14 @@ http.createServer(function(req, res) {
res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"}); res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
fs.readFile(__filename, "utf8", function(err, data) { fs.readFile(__filename, "utf8", function(err, data) {
var highlighted = highlighter.render(data, new JavaScriptMode(), theme); var highlighted = highlighter.render(data, new JavaScriptMode(), theme);
res.end('<html><body>\n\ res.end(
<style type="text/css" media="screen">\n\ '<html><body>\n' +
:css:\n\ '<style type="text/css" media="screen">\n' +
</style>\n\ highlighted.css +
:html:\n\ '</style>\n' +
</body></html>'.replace(":css:", highlighted.css).replace(":html:", highlighted.html)); highlighted.html +
'</body></html>'
);
}); });
}).listen(port); }).listen(port);

11
lib/ace/ext/static.css
View file

@ -1,20 +1,21 @@
.ace_editor { .ace_static_highlight {
font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Droid Sans Mono', monospace;
font-size: 12px; font-size: 12px;
} }
.ace_editor .ace_gutter { .ace_static_highlight .ace_gutter {
width: 25px !important; width: 25px !important;
display: block; display: block;
float: left; float: left;
text-align: right; text-align: right;
padding: 0 3px 0 0; padding: 0 3px 0 0;
margin-right: 3px; 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; -moz-user-select: -moz-none;
-khtml-user-select: none; -khtml-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;

10
lib/ace/ext/static_highlight.js
View file

@ -120,11 +120,11 @@ exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
} }
// let's prepare the whole html // let's prepare the whole html
var html = "<div class=':cssClass'>\ var html = "<div class='" + theme.cssClass + "'>" +
<div class='ace_editor ace_scroller ace_text-layer'>\ "<div class='ace_static_highlight'>" +
:code\ stringBuilder.join("") +
</div>\ "</div>" +
</div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join("")); "</div>";
textLayer.destroy(); textLayer.destroy();

65
lib/ace/ext/static_highlight_test.js
View file

@ -9,6 +9,7 @@ define(function(require, exports, module) {
var assert = require("assert"); var assert = require("assert");
var highlighter = require("./static_highlight"); var highlighter = require("./static_highlight");
var JavaScriptMode = require("../mode/javascript").Mode; var JavaScriptMode = require("../mode/javascript").Mode;
var TextMode = require("../mode/text").Mode;
// Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite // Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite
module.exports = { module.exports = {
@ -16,34 +17,35 @@ module.exports = {
"test simple snippet": function(next) { "test simple snippet": function(next) {
var theme = require("../theme/tomorrow"); var theme = require("../theme/tomorrow");
var snippet = "\ var snippet = [
/** this is a function\n\ "/** this is a function",
*\n\ "*",
*/\n\ "*/",
function hello (a, b, c) {\n\ "function hello (a, b, c) {",
console.log(a * b + c + 'sup?');\n\ " console.log(a * b + c + 'sup$');",
}"; "}"
].join("\n");
var mode = new JavaScriptMode(); var mode = new JavaScriptMode();
var result = highlighter.render(snippet, mode, theme); 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); assert.ok(!!result.css);
next(); next();
}, },
"test css from theme is used": function(next) { "test css from theme is used": function(next) {
var theme = require("../theme/tomorrow"); var theme = require("../theme/tomorrow");
var snippet = "\ var snippet = [
/** this is a function\n\ "/** this is a function",
*\n\ "*",
*/\n\ "*/",
function hello (a, b, c) {\n\ "function hello (a, b, c) {",
console.log(a * b + c + 'sup?');\n\ " console.log(a * b + c + 'sup?');",
}"; "}"
].join("\n");
var mode = new JavaScriptMode(); var mode = new JavaScriptMode();
var isError = false, result; var result = highlighter.render(snippet, mode, theme);
result = highlighter.render(snippet, mode, theme);
assert.ok(result.css.indexOf(theme.cssText) !== -1); 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) { "test theme classname should be in output html": function(next) {
var theme = require("../theme/tomorrow"); var theme = require("../theme/tomorrow");
var snippet = "\ var snippet = [
/** this is a function\n\ "/** this is a function",
*\n\ "*",
*/\n\ "*/",
function hello (a, b, c) {\n\ "function hello (a, b, c) {",
console.log(a * b + c + 'sup?');\n\ " console.log(a * b + c + 'sup?');",
}"; "}"
].join("\n");
var mode = new JavaScriptMode(); var mode = new JavaScriptMode();
var isError = false, result; var result = highlighter.render(snippet, mode, theme);
result = highlighter.render(snippet, mode, theme);
assert.equal(!!result.html.match(/<div class='ace-tomorrow'>/), true); 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(); next();
} }
}; };