diff --git a/demo/static-highlighter/server.js b/demo/static-highlighter/server.js index 0571c8f8..d1d6adbb 100644 --- a/demo/static-highlighter/server.js +++ b/demo/static-highlighter/server.js @@ -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('\n\ -\n\ -:html:\n\ -'.replace(":css:", highlighted.css).replace(":html:", highlighted.html)); + res.end( + '\n' + + '\n' + + highlighted.html + + '' + ); }); }).listen(port); diff --git a/lib/ace/ext/static.css b/lib/ace/ext/static.css index c080b575..bd479780 100644 --- a/lib/ace/ext/static.css +++ b/lib/ace/ext/static.css @@ -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; diff --git a/lib/ace/ext/static_highlight.js b/lib/ace/ext/static_highlight.js index 3585476c..92fa8e68 100644 --- a/lib/ace/ext/static_highlight.js +++ b/lib/ace/ext/static_highlight.js @@ -120,11 +120,11 @@ exports.renderSync = function(input, mode, theme, lineStart, disableGutter) { } // let's prepare the whole html - var html = "
\ -
\ - :code\ -
\ -
".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join("")); + var html = "
" + + "
" + + stringBuilder.join("") + + "
" + + "
"; textLayer.destroy(); diff --git a/lib/ace/ext/static_highlight_test.js b/lib/ace/ext/static_highlight_test.js index 2113d14f..bdbecbfc 100644 --- a/lib/ace/ext/static_highlight_test.js +++ b/lib/ace/ext/static_highlight_test.js @@ -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, "
1/**\xa0this\xa0is\xa0a\xa0function
2*
3*/
4function\xa0hello\xa0(a,\xa0b,\xa0c)\xa0{
5\xa0\xa0\xa0\xa0console.log(a\xa0*\xa0b\xa0+\xa0c\xa0+\xa0'sup?');
6}
"); + assert.equal(result.html, "
1/**\xa0this\xa0is\xa0a\xa0function
2*
3*/
4function\xa0hello\xa0(a,\xa0b,\xa0c)\xa0{
5\xa0\xa0\xa0\xa0console.log(a\xa0*\xa0b\xa0+\xa0c\xa0+\xa0'sup$');
6}
"); 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(/
/), 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(); } };