Merge pull request #1648 from ajaxorg/highlighter

Improve static highlighter

Makefile.dryice.js

@@ -71,17 +71,33 @@ function main(args) {
         } else if (type == "full") {
             demo(ace());
             bookmarklet();
+        } else if (type == "highlighter") {
+            var project = buildAce({
+                coreOnly: true,
+                exportModule: "ace/ext/static_highlight",
+                requires: ["ace/ext/static_highlight", "ace/theme/textmate"],
+                readFilters: [copy.filter.moduleDefines, function(a) {
+                    console.log(a.substring(0, 2500))
+                    return a
+                }]
+            })
+            copy({
+                source: project.result,
+                filter: getWriteFilters(project.options, "main"),
+                dest:   BUILD_DIR + "/static_highlight.js"
+            });
         }
     }
 
     console.log("--- Ace Dryice Build Tool ---");
     console.log("");
     console.log("Options:");
-    console.log("  minimal     Places necessary Ace files out in build dir; uses configuration flags below [default]");
+    console.log("  minimal      Places necessary Ace files out in build dir; uses configuration flags below [default]");
-    console.log("  normal      Runs four Ace builds--minimal, minimal-noconflict, minimal-min, and minimal-noconflict-min");
+    console.log("  normal       Runs four Ace builds--minimal, minimal-noconflict, minimal-min, and minimal-noconflict-min");
-    console.log("  demo        Runs demo build of Ace");
+    console.log("  demo         Runs demo build of Ace");
-    console.log("  bm          Runs bookmarklet build of Ace");
+    console.log("  bm           Runs bookmarklet build of Ace");
-    console.log("  full        all of above");
+    console.log("  full         all of above");
+    console.log("  highlighter  ");
     console.log("args:");
     console.log("  --target ./path   path to build folder");
     console.log("flags:");
@@ -305,15 +321,14 @@ var buildAce = function(options) {
         themes: jsFileList("lib/ace/theme"),
         extensions: jsFileList("lib/ace/ext"),
         workers: workers("lib/ace/mode"),
-        keybindings: ["vim", "emacs"]
+        keybindings: ["vim", "emacs"],
+        readFilters: [copy.filter.moduleDefines]
     };
 
     for(var key in defaults)
         if (!options.hasOwnProperty(key))
             options[key] = defaults[key];
 
-    generateThemesModule(options.themes);
-
     addSuffix(options);
 
     if (!options.requires)
@@ -323,6 +338,7 @@ var buildAce = function(options) {
     var name = options.name;
 
     var project = copy.createCommonJsProject(aceProject);
+    project.options = options;
     var ace = copy.createDataObject();
     copy({
         source: [ACE_HOME + "/build_support/mini_require.js"],
@@ -333,13 +349,14 @@ var buildAce = function(options) {
             project: project,
             require: options.requires
         }],
-        filter: [ copy.filter.moduleDefines ],
+        filter: options.readFilters,
         dest: ace
     });
 
-    if (options.coreOnly)
+    if (options.coreOnly) {
+        project.result = ace;
         return project;
-
+    }
     copy({
         source: ace,
         filter: getWriteFilters(options, "main"),
@@ -394,6 +411,8 @@ var buildAce = function(options) {
             dest:   targetDir + "/theme-" + theme.replace("_theme", "") + ".js"
         });
     });
+    
+    // generateThemesModule(options.themes);
 
     console.log('# ace key bindings ---------');
 

doc/site/js/main.js

@@ -168,14 +168,6 @@ function highlight() {
         var m = el.className.match(/language-(\w+)|(javascript)/);
         if (!m) return
         var mode = "ace/mode/" + (m[1] || m[2]);
-        var theme = "ace/theme/xcode";
+        highlighter.highlight(el, {mode: mode, theme: "ace/theme/xcode"})
-        var data = dom.getInnerText(el).trim();
-        
-        highlighter.render(data, mode, theme, 1, true, function (highlighted) {    
-            dom.importCssString(highlighted.css, "ace_highlight");
-            el.innerHTML = highlighted.html;
-        });
     });
-
-    
 }

index.html

@@ -9,8 +9,8 @@
         <link href="./doc/site/style.css" rel="stylesheet" type="text/css" />
         <link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon" />
 
-        <script src="./build/src-min-noconflict/ace.js"></script>
+        <script src="./build/src-min/ace.js"></script>
-        <script src="./build/src-min-noconflict/ext-static_highlight.js"></script>
+        <script src="./build/src-min/ext-static_highlight.js"></script>
     </head>
     <body>
         <a href="http://github.com/ajaxorg/ace">

lib/ace/ext/static_highlight.js

@@ -35,6 +35,7 @@ var EditSession = require("../edit_session").EditSession;
 var TextLayer = require("../layer/text").Text;
 var baseStyles = require("../requirejs/text!./static.css");
 var config = require("../config");
+var dom = require("../lib/dom");
 /**
  * Transforms a given input code snippet into HTML using the given mode
  *
@@ -86,13 +87,13 @@ exports.render = function(input, mode, theme, lineStart, disableGutter, callback
     return waiting || done();
 };
 
-/* Transforms a given input code snippet into HTML using the given mode
+/* 
-*
+ * Transforms a given input code snippet into HTML using the given mode
-* @param {string} input Code snippet
+ * @param {string} input Code snippet
-* @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
+ * @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
-* @param {string} r Code snippet
+ * @param {string} r Code snippet
-* @returns {object} An object containing: html, css
+ * @returns {object} An object containing: html, css
-*/
+ */
 
 exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
     lineStart = parseInt(lineStart || 1, 10);
@@ -136,4 +137,43 @@ exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
     };
 };
 
+
+
+exports.highlight = function(el, opts) {
+    var m = el.className.match(/lang-(\w+)/);
+    var mode = opts.mode || m && ("ace/mode/" + m[1]);
+    if (!mode)
+        return false;
+    var theme = opts.theme || "ace/theme/textmate";
+    
+    var data = "";
+    var nodes = [];
+
+    if (el.firstElementChild) {
+        var textLen = 0;
+        for (var i = 0; i < el.childNodes.length; i++) {
+            var ch = el.childNodes[i];
+            if (ch.nodeType == 3) {
+                textLen += ch.data.length;
+                data += ch.data;
+            } else {
+                nodes.push(textLen, ch);
+            }
+        }
+    } else {
+        data = dom.getInnerText(el);
+    }
+    
+    exports.render(data, mode, theme, 1, true, function (highlighted) {
+        dom.importCssString(highlighted.css, "ace_highlight");
+        el.innerHTML = highlighted.html;
+        var container = el.firstChild.firstChild
+        for (var i = 0; i < nodes.length; i += 2) {
+            var pos = highlighted.session.doc.indexToPosition(nodes[i])
+            var node = nodes[i + 1];
+            var lineEl = container.children[pos.row];
+            lineEl && lineEl.appendChild(nodes[i+1]);
+        }
+    });
+};
 });