Merge remote-tracking branch 'remotes/origin/static_highlighter'

demo/static-highlighter/client-noconflict.html

@@ -0,0 +1,71 @@
+<!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="Matthew Kastor">
+    <style type="text/css">
+        .code {
+            width: 50%;
+            position: relative;
+            white-space: pre-wrap;
+        }
+    </style>
+</head>
+<body>
+
+<h2>Client Side Syntax Highlighting</h2>
+
+<p>Syntax highlighting using Ace language modes and themes.</p>
+
+<div class="code" ace-mode="ace/mode/css" ace-theme="ace/theme/chrome">
+.code {
+    width: 50%;
+    position: relative;
+    white-space: pre-wrap;
+}
+
+</div>
+
+<pre class="code" ace-mode="ace/mode/javascript" ace-theme="ace/theme/twilight">
+function wobble (flam) {
+    return flam.wobbled = true;
+}
+
+// the scrollbars are from overflow auto on .ace_editor.
+
+</pre>
+
+<script src="../../build/src-noconflict/ace.js"></script>
+<script src="../../build/src-noconflict/ext-static_highlight.js"></script>
+
+<script>
+var highlighter = ace.require("ace/ext/static_highlight")
+var dom = ace.require("ace/lib/dom")
+function qsa(sel) {
+    return [].slice.call(document.querySelectorAll(sel));
+}
+
+qsa(".code").forEach(function (codeEl) {
+    var cs = getComputedStyle(codeEl);
+    codeEl.style.cssText = codeEl.style.cssText +
+        'width: ' + cs.width + ';' +
+        'height: ' + cs.height + ';';
+    var mode = codeEl.getAttribute('ace-mode');
+    var theme = codeEl.getAttribute('ace-theme');
+    var data = codeEl.textContent.trim();
+    
+    highlighter.render(data, mode, theme, 1, false, function (highlighted) {    
+        dom.importCssString(highlighted.css, "ace_highlight");
+        dom.importCssString('.ace_editor { overflow: auto; ' +
+            'position:absolute; top:0; bottom:0; right:0; left:0; }' +
+            '.ace_gutter { position: relative; }',
+            'atropa_hial');
+        codeEl.innerHTML = highlighted.html;
+    });
+});
+</script>
+
+</body>
+</html>

lib/ace/ext/static_highlight.js

@@ -34,6 +34,55 @@ define(function(require, exports, module) {
 var EditSession = require("../edit_session").EditSession;
 var TextLayer = require("../layer/text").Text;
 var baseStyles = require("../requirejs/text!./static.css");
+var config = require("../config");
+/**
+ * Transforms a given input code snippet into HTML using the given mode
+ *
+ * @param {string} input Code snippet
+ * @param {string|mode} mode String specifying the mode to load such as 
+ *  `ace/mode/javascript` or, a mode loaded from `/ace/mode` 
+ *  (use 'ServerSideHiglighter.getMode').
+ * @param {string|theme} theme String specifying the theme to load such as
+ *  `ace/theme/twilight` or, a theme loaded from `/ace/theme`.
+ * @param {number} lineStart A number indicating the first line number. Defaults
+ *  to 1.
+ * @param {boolean} disableGutter Specifies whether or not to disable the gutter.
+ *  `true` disables the gutter, `false` enables the gutter. Defaults to `false`.
+ * @param {function} callback When specifying the mode or theme as a string,
+ *  this method has no return value and you must specify a callback function. The
+ *  callback will receive the rendered object containing the properties `html`
+ *  and `css`.
+ * @returns {object} An object containing the properties `html` and `css`.
+ */
+
+exports.render = function(input, mode, theme, lineStart, disableGutter, callback) {
+    var waiting = 0
+        
+    // if either the theme or the mode were specified as objects 
+    // then we need to lazily load them.
+    if (typeof theme == "string") {
+        waiting++;
+        config.loadModule(['theme', theme], function (m) {
+            theme = m;
+            --waiting || done();
+        });
+    }
+    
+    if (typeof mode == "string") {
+        waiting++;
+        config.loadModule(['mode', mode], function (m) {
+            mode = new m.Mode()
+            --waiting || done();
+        });
+    }
+    
+    // loads or passes the specified mode module then calls renderer
+    function done() {
+        var result = exports.renderSync(input, mode, theme, lineStart, disableGutter);
+        return callback ? callback(result) : result;
+    }
+    return waiting || done();
+};
 
 /* Transforms a given input code snippet into HTML using the given mode
 *
@@ -43,12 +92,12 @@ var baseStyles = require("../requirejs/text!./static.css");
 * @returns {object} An object containing: html, css
 */
 
-exports.render = function(input, mode, theme, lineStart, disableGutter) {
+exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
     lineStart = parseInt(lineStart || 1, 10);
     
     var session = new EditSession("");
-    session.setMode(mode);
     session.setUseWorker(false);
+    session.setMode(mode);
     
     var textLayer = new TextLayer(document.createElement("div"));
     textLayer.setSession(session);