1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!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"
}
};
</script>
<script src="../kitchen-sink/require.js"></script>
<script>
require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "ace/lib/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("ace/lib/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>
|
