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

add static highlighter demos

Browse source
This commit is contained in:
Fabian Jakobs 2011-10-13 12:38:34 +02:00
commit 08de8b4aa1
6 changed files with 210 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

48
demo/static-highlighter/client.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Static Code highlighter using Ace</title>
<meta name="author" content="Fabian Jakobs">
</head>
<body>
<h2>Client Side Syntax Highlighting</h2>
<p>Syntax highlighting using Ace language modes and themes.</p>
<div id="code"></div>
<script type="text/javascript">
var require = {
paths: {
demo: "..",
ace: "../../lib/ace",
pilot: "../../support/pilot/lib/pilot"
}
};
</script>
<script src="../kitchen-sink/require.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "pilot/dom"], function() {
var highlighter = require("ace/ext/static_highlight");
var JavaScriptMode = require("ace/mode/javascript").Mode;
var theme = require("ace/theme/twilight");
var dom = require("pilot/dom");
var codeEl = document.getElementById("code");
var data = document.body.innerHTML;
var highlighted = highlighter.render(data, new JavaScriptMode(), theme);
dom.importCssString(highlighted.css, "ace_highlight");
codeEl.innerHTML = highlighted.html;
});
</script>
</body>
</html>

36
demo/static-highlighter/server.js Normal file
View file

@ -0,0 +1,36 @@
/**
* 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("../../support/paths");
// load jsdom, which is required by Ace
require("ace/test/mockdom");
var http = require("http");
var fs = require("fs");
// load the highlighter and the desired mode and theme
var highlighter = require("ace/ext/static_highlight");
var JavaScriptMode = require("ace/mode/javascript").Mode;
var theme = require("ace/theme/twilight");
var port = process.env.PORT || 2222;
http.createServer(function(req, res) {
res.writeHead(200, {"Content-Type": "text/html"});
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));
});
}).listen(port);
console.log("Listening on port " + port);

19
lib/ace/ext/static.css Normal file
View 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
View 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
};
};
});

53
lib/ace/serversidehighlighter_test.js → lib/ace/ext/static_highlight_test.js
View file

@ -1,42 +1,16 @@
require("../../support/paths"); if (typeof process !== "undefined") {
require("../../../support/paths");
require("ace/test/mockdom");
}
var assert = require("assert"); 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 // Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite
module.exports = { module.exports = {
timeout: 10000, 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) { "test simple snippet": function(next) {
var theme = require("ace/theme/tomorrow"); var theme = require("ace/theme/tomorrow");
var snippet = "/** this is a function\n\ var snippet = "/** this is a function\n\
@ -45,11 +19,11 @@ module.exports = {
function hello (a, b, c) {\n\ function hello (a, b, c) {\n\
console.log(a * b + c + 'sup?');\n\ console.log(a * b + c + 'sup?');\n\
}"; }";
var mode = this.highlighter.getMode("some.js"); var mode = new JavaScriptMode();
var isError = false, result; var isError = false, result;
try { try {
result = this.highlighter.render(snippet, mode, theme); result = highlighter.render(snippet, mode, theme);
} }
catch (e) { catch (e) {
console.log(e); console.log(e);
@ -69,10 +43,10 @@ function hello (a, b, c) {\n\
function hello (a, b, c) {\n\ function hello (a, b, c) {\n\
console.log(a * b + c + 'sup?');\n\ console.log(a * b + c + 'sup?');\n\
}"; }";
var mode = this.highlighter.getMode("some.js"); var mode = new JavaScriptMode();
var isError = false, result; var isError = false, result;
result = this.highlighter.render(snippet, mode, theme); result = highlighter.render(snippet, mode, theme);
assert.equal(result.css, theme.cssText); assert.equal(result.css, theme.cssText);
@ -87,15 +61,14 @@ function hello (a, b, c) {\n\
function hello (a, b, c) {\n\ function hello (a, b, c) {\n\
console.log(a * b + c + 'sup?');\n\ console.log(a * b + c + 'sup?');\n\
}"; }";
var mode = this.highlighter.getMode("some.js"); var mode = new JavaScriptMode();
var isError = false, result; 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); assert.equal(!!result.html.match(/<div class='ace-tomorrow'>/), true);
next(); next();
} }
}; };
!module.parent && require("asyncjs").test.testcase(module.exports, "ServerSideHighlighter").exec(); !module.parent && require("asyncjs").test.testcase(module.exports).exec();

91
lib/ace/serversidehighlighter.js
View file

@ -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\
// }"