add static highlighter demos
This commit is contained in:
Fabian Jakobs
parent
606963f424
commit
08de8b4aa1
6 changed files with 210 additions and 131 deletions
19
lib/ace/ext/static.css
Normal file
19
lib/ace/ext/static.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.ace_editor {
|
||||
font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ace_editor .ace_gutter {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
padding: 0 3px 0 0;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
*.ace_gutter-cell {
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
94
lib/ace/ext/static_highlight.js
Normal file
94
lib/ace/ext/static_highlight.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/* vim:ts=4:sts=4:sw=4:
|
||||
* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is Ajax.org Code Editor (ACE).
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* Ajax.org B.V.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2010
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
* Jan Jongboom <fabian AT ajax DOT org>
|
||||
* Fabian Jakobs <fabian AT ajax DOT org>
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
define(function(require, exports, module) {
|
||||
|
||||
var EditSession = require("ace/edit_session").EditSession;
|
||||
var TextLayer = require("ace/layer/text").Text;
|
||||
var baseStyles = require("ace/requirejs/text!ace/ext/static.css");
|
||||
|
||||
/** Transforms a given input code snippet into HTML using the given mode
|
||||
*
|
||||
* @param {string} input Code snippet
|
||||
* @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
|
||||
* @param {string} r Code snippet
|
||||
* @returns {object} An object containing: html, css
|
||||
*/
|
||||
|
||||
exports.render = function(input, mode, theme) {
|
||||
var session = new EditSession("");
|
||||
session.setMode(mode);
|
||||
session.setUseWorker(false);
|
||||
|
||||
var textLayer = new TextLayer(document.createElement("div"));
|
||||
textLayer.setSession(session);
|
||||
textLayer.config = {
|
||||
characterWidth: 10,
|
||||
lineHeight: 20
|
||||
};
|
||||
|
||||
session.setValue(input);
|
||||
|
||||
var stringBuilder = [];
|
||||
var length = session.getLength();
|
||||
var tokens = session.getTokens(0, length - 1);
|
||||
|
||||
for(var ix = 0; ix < length; ix++) {
|
||||
var lineTokens = tokens[ix].tokens;
|
||||
stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + (ix+1) + "</span>");
|
||||
textLayer.$renderLine(stringBuilder, 0, lineTokens, true);
|
||||
stringBuilder.push("<br>");
|
||||
}
|
||||
|
||||
// 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(""));
|
||||
|
||||
textLayer.destroy();
|
||||
|
||||
return {
|
||||
css: baseStyles + theme.cssText,
|
||||
html: html
|
||||
};
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -1,42 +1,16 @@
|
|||
require("../../support/paths");
|
||||
if (typeof process !== "undefined") {
|
||||
require("../../../support/paths");
|
||||
require("ace/test/mockdom");
|
||||
}
|
||||
|
||||
var assert = require("assert");
|
||||
var ServerSideHighlighter = require("./serversidehighlighter");
|
||||
var highlighter = require("./static_highlight");
|
||||
var JavaScriptMode = require("ace/mode/javascript").Mode;
|
||||
|
||||
// Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite
|
||||
module.exports = {
|
||||
timeout: 10000,
|
||||
|
||||
dispatcher: null,
|
||||
req: null,
|
||||
res: null,
|
||||
highlighter: null,
|
||||
|
||||
setUpSuite: function (next) {
|
||||
this.highlighter = new ServerSideHighlighter();
|
||||
next();
|
||||
},
|
||||
|
||||
setUp: function(next) {
|
||||
next();
|
||||
},
|
||||
|
||||
tearDown: function(next) {
|
||||
next();
|
||||
},
|
||||
|
||||
"test extension js": function(next) {
|
||||
var JavascriptMode = require("ace/mode/javascript").Mode
|
||||
assert.equal(this.highlighter.getMode("jan.js") instanceof JavascriptMode, true);
|
||||
next();
|
||||
},
|
||||
|
||||
"test extension unknown": function(next) {
|
||||
var TextMode = require("ace/mode/text").Mode
|
||||
assert.equal(this.highlighter.getMode("jan.unknown") instanceof TextMode, true);
|
||||
next();
|
||||
},
|
||||
|
||||
"test simple snippet": function(next) {
|
||||
var theme = require("ace/theme/tomorrow");
|
||||
var snippet = "/** this is a function\n\
|
||||
|
|
@ -45,11 +19,11 @@ module.exports = {
|
|||
function hello (a, b, c) {\n\
|
||||
console.log(a * b + c + 'sup?');\n\
|
||||
}";
|
||||
var mode = this.highlighter.getMode("some.js");
|
||||
var mode = new JavaScriptMode();
|
||||
|
||||
var isError = false, result;
|
||||
try {
|
||||
result = this.highlighter.render(snippet, mode, theme);
|
||||
result = highlighter.render(snippet, mode, theme);
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
|
|
@ -69,10 +43,10 @@ function hello (a, b, c) {\n\
|
|||
function hello (a, b, c) {\n\
|
||||
console.log(a * b + c + 'sup?');\n\
|
||||
}";
|
||||
var mode = this.highlighter.getMode("some.js");
|
||||
var mode = new JavaScriptMode();
|
||||
|
||||
var isError = false, result;
|
||||
result = this.highlighter.render(snippet, mode, theme);
|
||||
result = highlighter.render(snippet, mode, theme);
|
||||
|
||||
assert.equal(result.css, theme.cssText);
|
||||
|
||||
|
|
@ -87,15 +61,14 @@ function hello (a, b, c) {\n\
|
|||
function hello (a, b, c) {\n\
|
||||
console.log(a * b + c + 'sup?');\n\
|
||||
}";
|
||||
var mode = this.highlighter.getMode("some.js");
|
||||
var mode = new JavaScriptMode();
|
||||
|
||||
var isError = false, result;
|
||||
result = this.highlighter.render(snippet, mode, theme);
|
||||
|
||||
result = highlighter.render(snippet, mode, theme);
|
||||
assert.equal(!!result.html.match(/<div class='ace-tomorrow'>/), true);
|
||||
|
||||
next();
|
||||
}
|
||||
};
|
||||
|
||||
!module.parent && require("asyncjs").test.testcase(module.exports, "ServerSideHighlighter").exec();
|
||||
!module.parent && require("asyncjs").test.testcase(module.exports).exec();
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
if (typeof process !== "undefined") {
|
||||
require("../../support/paths");
|
||||
require("ace/test/mockdom");
|
||||
}
|
||||
|
||||
var theme = require("ace/theme/tomorrow");
|
||||
var EditSession = require("ace/edit_session").EditSession;
|
||||
var Editor = require("ace/editor").Editor;
|
||||
var MockRenderer = require("ace/test/mockrenderer").MockRenderer;
|
||||
var TextLayer = require("ace/layer/text").Text;
|
||||
|
||||
/** Ace highlighting but server side
|
||||
*/
|
||||
var ServerSideHighlighter = module.exports = function() {
|
||||
};
|
||||
|
||||
(function () {
|
||||
|
||||
/** Returns a mode from /ace/mode based on a filename
|
||||
*
|
||||
* @param {string} fileName name of the file without directory information
|
||||
* @returns {mode} A mode that can highlight the given file, or TextMode if nothing matched
|
||||
*/
|
||||
function getMode (fileName) {
|
||||
var extension = fileName.match(/\.(\w+)$/)[1];
|
||||
|
||||
switch (extension) {
|
||||
case "js":
|
||||
var JavascriptMode = require("ace/mode/javascript").Mode;
|
||||
return new JavascriptMode();
|
||||
default:
|
||||
var TextMode = require("ace/mode/text").Mode;
|
||||
return new TextMode();
|
||||
}
|
||||
}
|
||||
|
||||
/** Transforms a given input code snippet into HTML using the given mode
|
||||
*
|
||||
* @param {string} input Code snippet
|
||||
* @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
|
||||
* @param {string} r Code snippet
|
||||
* @returns {object} An object containing: html, css
|
||||
*/
|
||||
function render (input, mode, theme) {
|
||||
var session = new EditSession("");
|
||||
session.setMode(mode);// || new JavaScriptMode());
|
||||
|
||||
var editor = new Editor(new MockRenderer(), session);
|
||||
var textLayer = new TextLayer(document.createElement("div"));
|
||||
textLayer.setSession(session);
|
||||
textLayer.config = {
|
||||
characterWidth: 10,
|
||||
lineHeight: 20
|
||||
};
|
||||
|
||||
session.setValue(input);
|
||||
|
||||
var stringBuilder = [], length = session.getLength();
|
||||
var tokens = session.getTokens(0, length - 1);
|
||||
|
||||
for(var ix = 0; ix < length; ix++) {
|
||||
var lineTokens = tokens[ix].tokens;
|
||||
stringBuilder.push("<span class='ace_gutter ace_gutter-cell'>" + (ix+1) + "</span>");
|
||||
textLayer.$renderLine(stringBuilder, 0, lineTokens, true);
|
||||
stringBuilder.push("<br>");
|
||||
}
|
||||
|
||||
// let's prepare the whole html
|
||||
var html = "<div class=':cssClass'>\
|
||||
<div class='ace_editor'>\
|
||||
:code\
|
||||
</div>\
|
||||
</div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
|
||||
|
||||
return {
|
||||
css: theme.cssText,
|
||||
html: html
|
||||
};
|
||||
}
|
||||
|
||||
this.getMode = getMode;
|
||||
this.render = render;
|
||||
}).call(ServerSideHighlighter.prototype);
|
||||
|
||||
//"/**\n\
|
||||
// * juhu\n\
|
||||
// * kinner \n\
|
||||
// */\n\
|
||||
// function a(b) {\n\
|
||||
// return b;\n\
|
||||
// }"
|
||||
Loading…
Add table
Add a link
Reference in a new issue