From a69fce21f479d2f00dd1ba760ab7e490a7b75be5 Mon Sep 17 00:00:00 2001 From: nightwing Date: Thu, 18 Jul 2013 19:35:14 +0400 Subject: [PATCH] use ace static highlighter in the main site --- doc/site/js/main.js | 29 ++- index.html | 312 +++++++++++++++++--------------- lib/ace/ext/static_highlight.js | 6 +- 3 files changed, 196 insertions(+), 151 deletions(-) diff --git a/doc/site/js/main.js b/doc/site/js/main.js index 35b870e5..f266b7d3 100644 --- a/doc/site/js/main.js +++ b/doc/site/js/main.js @@ -121,4 +121,31 @@ $(function() { } }); }).trigger("hashchange"); -}); \ No newline at end of file + + highlight(); +}); + + + +function highlight() { + 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[class]").forEach(function(el) { + var m = el.className.match(/language-(\w+)|(javascript)/); + if (!m) return + var mode = "ace/mode/" + (m[1] || m[2]); + var 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; + }); + }); + + +} \ No newline at end of file diff --git a/index.html b/index.html index 44ac3c5b..7c54a4e8 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,14 @@ Ace - The High Performance Code Editor for the Web - - - + + - + + @@ -240,7 +240,7 @@ editor.getValue(); // or session.getValue

Ace only resizes itself on window events. If you resize the editor div in another manner, and need Ace to resize, use the following:

editor.resize()

Searching

- 
editor.find('needle',{
+                            
editor.find('needle',{
     backwards: false,
     wrap: false,
     caseSensitive: false,
@@ -280,25 +280,25 @@ editor.findPrevious();

                                 
                             
                             
Here's how you can perform a replace:

-                            
editor.find('foo');
+                            
editor.find('foo');
 editor.replace('bar');

                             
And here's a replace all: 

-                            
editor.replaceAll('bar');

+                            
editor.replaceAll('bar');

                             
(editor.replaceAll uses the needle set earlier by editor.find('needle', ...)

                             
Listening to Events

                             
To listen for an onchange:

-                            
editor.getSession().on('change', function(e) {
+                            
editor.getSession().on('change', function(e) {
     // e.type, etc
 });

                             
To listen for an selection change:

-                            
editor.getSession().selection.on('changeSelection', function(e) {
+                            
editor.getSession().selection.on('changeSelection', function(e) {
 });

                             
To listen for a cursor change:

-                            
editor.getSession().selection.on('changeCursor', function(e) {
+                            
editor.getSession().selection.on('changeCursor', function(e) {
 });

                             
Adding New Commands and Keybindings

                             
To assign key bindings to a custom function:

-                            
editor.commands.addCommand({
+                            
editor.commands.addCommand({
     name: 'myCommand',
     bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
     exec: function(editor) {
@@ -315,33 +315,37 @@ editor.replace('bar');

                             
Defining a Mode

                             
Every language needs a mode. A mode contains the paths to a language's syntax highlighting rules, indentation rules, and code folding rules. Without defining a mode, Ace won't know anything about the finer aspects of your language.

                             
Here is the starter template we'll use to create a new mode:

-                            
define(function(require, exports, module) {
-"use strict";
+                            
define(function(require, exports, module) {
+"use strict";
 
-var oop = require("../lib/oop");
-// defines the parent mode
-var TextMode = require("./text").Mode;
-var Tokenizer = require("../tokenizer").Tokenizer;
-var MatchingBraceOutdent = require("./matching_brace_outdent").MatchingBraceOutdent;
+var oop = require("../lib/oop");
+// defines the parent mode
+var TextMode = require("./text").Mode;
+var Tokenizer = require("../tokenizer").Tokenizer;
+var MatchingBraceOutdent = require("./matching_brace_outdent").MatchingBraceOutdent;
 
-// defines the language specific highlighters and folding rules
-var MyNewHighlightRules = require("./mynew_highlight_rules").MyNewHighlightRules;
-var MyNewFoldMode = require("./folding/mynew").MyNewFoldMode;
+// defines the language specific highlighters and folding rules
+var MyNewHighlightRules = require("./mynew_highlight_rules").MyNewHighlightRules;
+var MyNewFoldMode = require("./folding/mynew").MyNewFoldMode;
 
-var Mode = function() {
-    // set everything up
-    var highlighter = new MyNewHighlightRules();
-    this.$outdent = new MatchingBraceOutdent();
-    this.foldingRules = new MyNewFoldMode();
+var Mode = function() {
+    // set everything up
+    var highlighter = new MyNewHighlightRules();
+    this.$outdent = new MatchingBraceOutdent();
+    this.foldingRules = new MyNewFoldMode();
 
-    this.$tokenizer = new Tokenizer(highlighter.getRules());
+    this.$tokenizer = new Tokenizer(highlighter.getRules());
 };
 oop.inherits(Mode, TextMode);
 
-(function() {
-    // Extra logic goes here--we won't be covering all of this
+(function() {
+    // configure comment start/end characters
+    this.lineCommentStart = "//";
+    this.blockComment = {start: "/*", end: "*/"};
+    
+    // Extra logic goes here--we won't be covering all of this
 
-    /* These are all optional pieces of code!
+    /* These are all optional pieces of code!
     this.getNextLineIndent = function(state, line, tab) {
         var indent = this.$getIndent(line);
         return indent;
@@ -361,7 +365,7 @@ oop.inherits(Mode, TextMode);
 
         return worker;
     };
-    */
+    */
 }).call(Mode.prototype);
 
 exports.Mode = Mode;
@@ -372,22 +376,22 @@ exports.Mode = Mode;
                             
Defining Syntax Highlighting Rules

                             
The Ace highlighter can be considered to be a state machine. Regular expressions define the tokens for the current state, as well as the transitions into another state. Let's define mynew_highlight_rules.js, which our mode above uses.

                             
All syntax highlighters start off looking something like this:

-                            
define(function(require, exports, module) {
-"use strict";
+                            
define(function(require, exports, module) {
+"use strict";
 
-var oop = require("../lib/oop");
-var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+var oop = require("../lib/oop");
+var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
 
-var MyNewHighlightRules = function() {
+var MyNewHighlightRules = function() {
 
-    // regexp must not have capturing parentheses. Use (?:) instead.
-    // regexps are ordered -> the first match is used
-   this.$rules = {
-        "start" : [
+    // regexp must not have capturing parentheses. Use (?:) instead.
+    // regexps are ordered -> the first match is used
+   this.$rules = {
+        "start" : [
             {
-                token: <token>, // String, Array, or Function: the CSS token to apply
-                regex: <regex>, // String or RegExp: the regexp to match
-                next:  <next>   // [Optional] String: next state to enter
+                token: <token>, // String, Array, or Function: the CSS token to apply
+                regex: <regex>, // String or RegExp: the regexp to match
+                next:  <next>   // [Optional] String: next state to enter
             }
         ]
     };
@@ -397,7 +401,7 @@ oop.inherits(MyNewHighlightRules, TextHighlightRules);
 
 exports.MyNewHighlightRules = MyNewHighlightRules;
 
-});

+});

                             
The token state machine operates on whatever is defined in this.$rules. The highlighter always begins at the start state, and progresses down the list, looking for a matching regex. When one is found, the resulting text is wrapped within a <span class="ace_<token>"> tag, where <token> is defined as the token property. Note that all tokens are preceded by the ace_ prefix when they're rendered on the page.

                             
Once again, we're inheriting from TextHighlightRules here. We could choose to make this any other language set we want, if our new language requires previously defined syntaxes. For more information on extending languages, see "extending Highlighters" below.

                             
Defining Tokens

@@ -408,81 +412,81 @@ exports.MyNewHighlightRules = MyNewHighlightRules;
                             
Regular expressions can either be a RegExp or String definition

                             
If you're using a regular expression, remember to start and end the line with the / character, like this:

                             
{
-    token : "constant.language.escape",
-    regex : /\$[\w\d]+/
+    token : "constant.language.escape",
+    regex : /\$[\w\d]+/
 }

                             
A caveat of using stringed regular expressions is that any \ character must be escaped. That means that even an innocuous regular expression like this:

-                            
regex: "function\s*\(\w+\)"

+                            
regex: "function\s*\(\w+\)"

                             
Must actually be written like this:

-                            
regex: "function\\s*\(\\w+\)"

+                            
regex: "function\\s*\(\\w+\)"

                             
Groupings

                             
You can also include flat regexps--(var)--or have matching groups--((a+)(b+)). There is a strict requirement whereby matching groups must cover the entire matched string; thus, (hel)lo is invalid. If you want to create a non-matching group, simply start the group with the ?: predicate; thus, (hel)(?:lo) is okay. You can, of course, create longer non-matching groups. For example:

                             
{
-    token : "constant.language.boolean",
-    regex : /(?:true|false)\b/
+    token : "constant.language.boolean",
+    regex : /(?:true|false)\b/
 },

                             
For flat regular expression matches, token can be a String, or a Function that takes a single argument (the match) and returns a string token. For example, using a function might look like this:

-                            
var colors = lang.arrayToMap(
-    ("aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|" +
-    "purple|red|silver|teal|white|yellow").split("|")
+                            
var colors = lang.arrayToMap(
+    ("aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|" +
+    "purple|red|silver|teal|white|yellow").split("|")
 );
 
-var fonts = lang.arrayToMap(
-    ("arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|" +
-    "symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|" +
-    "serif|monospace").split("|")
+var fonts = lang.arrayToMap(
+    ("arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|" +
+    "symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|" +
+    "serif|monospace").split("|")
 );
 
 ...
 
 {
-    token: function(value) {
-        if (colors.hasOwnProperty(value.toLowerCase())) {
-            return "support.constant.color";
+    token: function(value) {
+        if (colors.hasOwnProperty(value.toLowerCase())) {
+            return "support.constant.color";
         }
-        else if (fonts.hasOwnProperty(value.toLowerCase())) {
-            return "support.constant.fonts";
+        else if (fonts.hasOwnProperty(value.toLowerCase())) {
+            return "support.constant.fonts";
         }
-        else {
-            return "text";
+        else {
+            return "text";
         }
     },
-    regex: "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
+    regex: "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
 }

                             
If token is a function,it should take the same number of arguments as there are groups, and return an array of tokens.

                             
For grouped regular expressions, token can be a String, in which case all matched groups are given that same token, like this:

                             
{
-    token: "identifier",
-    regex: "(\\w+\\s*:)(\\w*)"
+    token: "identifier",
+    regex: "(\\w+\\s*:)(\\w*)"
 }

                             
More commonly, though, token is an Array (of the same length as the number of groups), whereby matches are given the token of the same alignment as in the match. For a complicated regular expression, like defining a function, that might look something like this:

                             
{
-    token : ["storage.type", "text", "entity.name.function"],
-    regex : "(function)(\\s+)([a-zA-Z_][a-zA-Z0-9_]*\\b)"
+    token : ["storage.type", "text", "entity.name.function"],
+    regex : "(function)(\\s+)([a-zA-Z_][a-zA-Z0-9_]*\\b)"
 }

                             
Defining States

                             
The syntax highlighting state machine stays in the start state, until you define a next state for it to advance to. At that point, the tokenizer stays in that new state, until it advances to another state. Afterwards, you should return to the original start state.

                             
Here's an example:

-                            
this.$rules = {
-    "start" : [ {
-        token : "text",
-        merge : true,
-        regex : "<\\!\\[CDATA\\[",
-        next : "cdata"
+                            
this.$rules = {
+    "start" : [ {
+        token : "text",
+        merge : true,
+        regex : "<\\!\\[CDATA\\[",
+        next : "cdata"
     },
 
-    "cdata" : [ {
-        token : "text",
-        regex : "\\]\\]>",
-        next : "start"
+    "cdata" : [ {
+        token : "text",
+        regex : "\\]\\]>",
+        next : "start"
     }, {
-        token : "text",
-        merge : true,
-        regex : "\\s+"
+        token : "text",
+        merge : true,
+        regex : "\\s+"
     }, {
-        token : "text",
-        merge : true,
-        regex : ".+"
+        token : "text",
+        merge : true,
+        regex : ".+"
     } ]
 };

                             
In this extremly short sample, we're defining some highlighting rules for when Ace detectes a <![CDATA tag. When one is encountered, the tokenizer moves from start into the cdata state. It remains there, applying the text token to any string it encounters. Finally, when it hits a closing ]> symbol, it returns to the start state and continues to tokenize anything else.

@@ -510,31 +514,31 @@ exports.MyNewHighlightRules = MyNewHighlightRules;
                             
Suppose you're working on a LuaPage, PHP embedded in HTML, or a Django template. You'll need to create a syntax highlighter that takes all the rules from the original language (Lua, PHP, or Python) and extends it with some additional identifiers (<?lua, <?php, {%, for example). Ace allows you to easily extend a highlighter using a few helper functions.

                             
Getting Existing Rules

                             
To get the existing syntax highlighting rules for a particular language, use the getRules() function. For example:

-                            
var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
+                            
var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
 
-this.$rules = new HtmlHighlightRules().getRules();
+this.$rules = new HtmlHighlightRules().getRules();
 
-/*
+/*
     this.$rules == Same this.$rules as HTML highlighting
-*/

+*/

                             
Extending a Highlighter

                             
The addRules method does one thing, and it does one thing well: it adds new rules to an existing rule set, and prefixes any state with a given tag. For example, let's say you've got two sets of rules, defined like this:

-                            
this.$rules = {
-    "start": [ /* ... */ ]
+                            
this.$rules = {
+    "start": [ /* ... */ ]
 };
 
-var newRules = {
-    "start": [ /* ... */ ]
+var newRules = {
+    "start": [ /* ... */ ]
 }

                             
If you want to incorporate newRules into this.$rules, you'd do something like this:

-                            
this.addRules(newRules, "new-");
+                            
this.addRules(newRules, "new-");
 
-/*
+/*
     this.$rules = {
         "start": [ ... ],
         "new-start": [ ... ]
     };
-*/

+*/

                             
Extending Two Highlighters

                             
The last function available to you combines both of these concepts, and it's called embedRules. It takes three parameters:

                             
    
@@ -544,90 +548,90 @@ exports.MyNewHighlightRules = MyNewHighlightRules;
                             

                             
Like addRules, embedRules adds on to the existing this.$rules object. 

                             
To explain this visually, let's take a look at the syntax highlighter for Lua pages, which combines all of these concepts:

-                            
var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
-var LuaHighlightRules = require("./lua_highlight_rules").LuaHighlightRules;
+                            
var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
+var LuaHighlightRules = require("./lua_highlight_rules").LuaHighlightRules;
 
-var LuaPageHighlightRules = function() {
-    this.$rules = new HtmlHighlightRules().getRules();
+var LuaPageHighlightRules = function() {
+    this.$rules = new HtmlHighlightRules().getRules();
 
-    for (var i in this.$rules) {
-        this.$rules[i].unshift({
-            token: "keyword",
-            regex: "<\\%\\=?",
-            next: "lua-start"
+    for (var i in this.$rules) {
+        this.$rules[i].unshift({
+            token: "keyword",
+            regex: "<\\%\\=?",
+            next: "lua-start"
         }, {
-            token: "keyword",
-            regex: "<\\?lua\\=?",
-            next: "lua-start"
+            token: "keyword",
+            regex: "<\\?lua\\=?",
+            next: "lua-start"
         });
     }
-    this.embedRules(LuaHighlightRules, "lua-", [
+    this.embedRules(LuaHighlightRules, "lua-", [
         {
-            token: "keyword",
-            regex: "\\%>",
-            next: "start"
+            token: "keyword",
+            regex: "\\%>",
+            next: "start"
         },
         {
-            token: "keyword",
-            regex: "\\?>",
-            next: "start"
+            token: "keyword",
+            regex: "\\?>",
+            next: "start"
         }
     ]);
 };

                             
Here, this.$rules starts off as a set of HTML highlighting rules. To this set, we add two new checks for <%= and <?lua=. We also delegate that if one of these rules are matched, we should move onto the lua-start state. Next, embedRules takes the already existing set of LuaHighlightRules and applies the lua- prefix to each state there. Finally, it adds two new checks for %> and ?>, allowing the state machine to return to start.

                             
Code Folding

                             
Adding new folding rules to your mode can be a little tricky. First, insert the following lines of code into your mode definition:

-                            
var MyFoldMode = require("./folding/newrules").FoldMode;
+                            
var MyFoldMode = require("./folding/newrules").FoldMode;
 
 ...
-var MyMode = function() {
+var MyMode = function() {
 
     ...
 
-    this.foldingRules = new MyFoldMode();
+    this.foldingRules = new MyFoldMode();
 };

                             
You'll be defining your code folding rules into the lib/ace/mode/folding folder. Here's a template that you can use to get started:

-                            
define(function(require, exports, module) {
-"use strict";
+                            
define(function(require, exports, module) {
+"use strict";
 
-var oop = require("../../lib/oop");
-var Range = require("../../range").Range;
-var BaseFoldMode = require("./fold_mode").FoldMode;
+var oop = require("../../lib/oop");
+var Range = require("../../range").Range;
+var BaseFoldMode = require("./fold_mode").FoldMode;
 
-var FoldMode = exports.FoldMode = function() {};
+var FoldMode = exports.FoldMode = function() {};
 oop.inherits(FoldMode, BaseFoldMode);
 
-(function() {
+(function() {
 
-    // regular expressions that identify starting and stopping points
-    this.foldingStartMarker; 
-    this.foldingStopMarker;
+    // regular expressions that identify starting and stopping points
+    this.foldingStartMarker; 
+    this.foldingStopMarker;
 
-    this.getFoldWidgetRange = function(session, foldStyle, row) {
-        var line = session.getLine(row);
+    this.getFoldWidgetRange = function(session, foldStyle, row) {
+        var line = session.getLine(row);
 
-        // test each line, and return a range of segments to collapse
+        // test each line, and return a range of segments to collapse
     };
 
 }).call(FoldMode.prototype);
 
 });

                             
Just like with TextMode for syntax highlighting, BaseFoldMode contains the starting point for code folding logic. foldingStartMarker defines your opening folding point, while foldingStopMarker defines the stopping point. For example, for a C-style folding system, these values might look like this:

-                            
this.foldingStartMarker = /(\{|\[)[^\}\]]*$|^\s*(\/\*)/;
-this.foldingStopMarker = /^[^\[\{]*(\}|\])|^[\s\*]*(\*\/)/;

+                            
this.foldingStartMarker = /(\{|\[)[^\}\]]*$|^\s*(\/\*)/;
+this.foldingStopMarker = /^[^\[\{]*(\}|\])|^[\s\*]*(\*\/)/;

                             
These regular expressions identify various symbols--{, [, //--to pay attention to. getFoldWidgetRange matches on these regular expressions, and when found, returns the range of relevant folding points. For more information on the Range object, see the Ace API documentation.

                             
Again, for a C-style folding mechanism, a range to return for the starting fold might look like this:

-                            
var line = session.getLine(row);
-var match = line.match(this.foldingStartMarker);
-if (match) {
-    var i = match.index;
+                            
var line = session.getLine(row);
+var match = line.match(this.foldingStartMarker);
+if (match) {
+    var i = match.index;
 
-    if (match[1])
-        return this.openingBracketBlock(session, match[1], row, i);
+    if (match[1])
+        return this.openingBracketBlock(session, match[1], row, i);
 
-    var range = session.getCommentFoldRange(row, i + match[0].length);
-    range.end.column -= 2;
-    return range;
+    var range = session.getCommentFoldRange(row, i + match[0].length);
+    range.end.column -= 2;
+    return range;
 }

                             
Let's say we stumble across the code block hello_world() {. Our range object here becomes:

                             
{
@@ -663,7 +667,7 @@ oop.inherits(FoldMode, BaseFoldMode);
                             

                             
 Run node highlight_rules_test.js -gen to preserve current output of your tokenizer in tokens_<modeName>.json
                             

-                            
After this running highlight_rules_test.js optionalLanguageName will compare output of your tokenizer with the correct output you've created.
+                            
After this running highlight_rules_test.js optionalLanguageName will compare output of your tokenizer with the correct output you've created.
                             

                             
Any files ending with the _test.js suffix are automatically run by Ace's Travis CI server.

                         
@@ -940,8 +944,11 @@ oop.inherits(FoldMode, BaseFoldMode);
                                     Debuggex
                                 
                                 
  • 
-                                    
+                                    
    S
    
                                     Slim Text
                                 
    • 
                                 
  • 
@@ -1039,6 +1046,16 @@ oop.inherits(FoldMode, BaseFoldMode);
                                     
                                     Andromeda
                                 
    • 
+                                
  • 
+                                    
+                                    Gisto
+                                
    • 
+                                
  • 
+                                    
+                                    JDoodle
+                                
    • 
                                 
  • 
                                     Sky Edit
                                 
    • 
@@ -1105,9 +1122,8 @@ oop.inherits(FoldMode, BaseFoldMode);
                 
             
         
-        
-        
-        
+        
+        
         
         
         
diff --git a/lib/ace/ext/static_highlight.js b/lib/ace/ext/static_highlight.js
index 92fa8e68..2729bf04 100644
--- a/lib/ace/ext/static_highlight.js
+++ b/lib/ace/ext/static_highlight.js
@@ -56,7 +56,8 @@ var config = require("../config");
  */
 
 exports.render = function(input, mode, theme, lineStart, disableGutter, callback) {
-    var waiting = 0
+    var waiting = 0;
+    var modeCache = EditSession.prototype.$modes;
 
     // if either the theme or the mode were specified as objects
     // then we need to lazily load them.
@@ -71,7 +72,8 @@ exports.render = function(input, mode, theme, lineStart, disableGutter, callback
     if (typeof mode == "string") {
         waiting++;
         config.loadModule(['mode', mode], function(m) {
-            mode = new m.Mode()
+            if (!modeCache[mode]) modeCache[mode] = new m.Mode();
+            mode = modeCache[mode];
             --waiting || done();
         });
     }