ace-code-editor
Version:
Ajax.org Code Editor is a full featured source code highlighting editor that powers the Cloud9 IDE
48 lines (36 loc) • 1.27 kB
HTML
<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>