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);