From d1641bc6397edd24f468aea813f781eaad888b70 Mon Sep 17 00:00:00 2001 From: C9 Date: Tue, 11 Sep 2012 20:54:54 -0400 Subject: [PATCH] Update --- doc/site/js/main.js | 2 + doc/site/style.css | 42 +++++---- index.html | 221 +++++++++++++++++++++++++++++++++++++++----- 3 files changed, 224 insertions(+), 41 deletions(-) diff --git a/doc/site/js/main.js b/doc/site/js/main.js index 79973c8e..744b6fe4 100644 --- a/doc/site/js/main.js +++ b/doc/site/js/main.js @@ -1,4 +1,6 @@ $(function() { + hljs.initHighlighting(); + var tabs = $("#tabnav"), tab_a_selector = "a"; diff --git a/doc/site/style.css b/doc/site/style.css index 04bed0ac..9f9643c5 100644 --- a/doc/site/style.css +++ b/doc/site/style.css @@ -13,7 +13,8 @@ h1, h2, h3, h4, h5, h6 { } h2, h3, h4, h5, h6 { - padding-top: 10px; + padding-top: 30px; + border-bottom: 1px solid #bedaea; } H2 { @@ -46,12 +47,6 @@ UL{ line-height : 22px; } -PRE{ - background : #333; - color : white; - padding : 10px; -} - #header { height: 93px; position: relative; @@ -177,7 +172,7 @@ PRE{ } .divider { - height:3px; + height: 1px; background-color:#bedaea; margin-bottom:3px; } @@ -191,22 +186,27 @@ UL.content-list { margin:0; } -UL.menu-list { - padding:0; - margin:0 0 20px 0; - list-style-type:none; - line-height : 16px; +ul.menu-list { + padding: 0; + margin: 15px 0 20px 0; + list-style-type: none; + line-height: 16px; + overflow: auto; } UL.menu-list LI { color:#2557b4; - font-family:Trebuchet MS; + font-family: Helvetica, Trebuchet MS; font-size:12px; - padding:1px 0; -} - -UL.menu-list LI:last-child { - border-bottom:0; + padding: 5px; + display: block; + float: left; + margin-right: 15px; + margin-bottom: 15px; + width: 100px; + height: 80px; + border: 1px solid #bbb; + border-radius: 5px; } A { @@ -310,4 +310,8 @@ UL.menu-footer LI A:hover { border: 1px solid #DDD; border-radius: 5px; -moz-border-radius: 5px; +} + +pre .xml .javascript { + opacity: 1; } \ No newline at end of file diff --git a/index.html b/index.html index 4f004e96..a8a96389 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@ + + @@ -15,7 +17,7 @@ - Fork me on GitHub + Fork me on GitHub
@@ -59,7 +61,6 @@ primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

Features

-
  • Syntax highlighting
  • Auto indentation and outdent
    • @@ -73,8 +74,17 @@
  • Displays hidden characters
  • Highlight selected word
+

Take Ace for a spin!

+

Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.

+

Getting the code

+

Ace is a community project. We actively encourage and support + contributions. The Ace source code is hosted on GitHub. + Ace is a community project released under the BSD license ‐ + very simple andis friendly to all kinds of projects, whether OSS + or not. We actively encourage and support contributions. + Take charge of your editor and add your favorite language highlighting and keybindings!

+ 
git clone git://github.com/ajaxorg/ace.git

History

-

Previously known as “Bespin” or lately “Skywriter” it’s now known as Ace (Ajax.org Cloud9 Editor)! Bespin and Ace started as two independent projects both aiming to build a no compromise @@ -90,14 +100,14 @@ and Mozilla are actively developing and maintaining Ace.

Related Projects

-

Embedding ACE in Your Site

-

Take Ace for a spin!

-
-

Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.

-

Getting the code

-
-

Ace is a community project. We actively encourage and support - contributions. The Ace source code is hosted on GitHub. - Ace is a community project released under the BSD license ‐ - very simple andis friendly to all kinds of projects, whether OSS - or not. We actively encourage and support contributions. - Take charge of your editor and add your favorite language highlighting and keybindings! - 

git clone git://github.com/ajaxorg/ace.git

-
-
-

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

+

ACE can be easily embedded into any existing web page. You can either use one of + the pre-packaged versions of ace + (just copy one of src* subdirectories somewhere into your project), or + use requireJS to load the contents of + lib/ace as ace.

+

Also, take a look at the one of the included demos for how to use Ace:

+ + + +

The easiest way to embed ACE is like so:

+ 
<div id="editor" style="position: absolute; height: 500px; width: 500px">some code</div>
+ 
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+    var editor = ace.edit("editor");
+</script>
+
-

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

+

How-To Guide

+

This is a collection of common operations developers typically perform + on their ACE instance. In all of these cases ACE has been invoked on an + element with the id set to "editor" like so: +

+ 
<div id="editor" style="position: absolute; height: 500px; width: 500px">some code</div>
+

...and the editor has been initialized by ACE like so:

+ 
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
+    var editor = ace.edit("editor");
+</script>
+
+

Setting Theme and Language Modes

+

To change the theme, configure the editor to use the theme using its module name. The theme file will be loaded on demand:

+ + 
editor.setTheme("ace/theme/twilight");
+ +

By default, the editor only supports plain text mode. However, all other language modes are available as separate modules. Modes are also loaded on demand, and can be included like this:

+ +

Retrieving Editor States

+ +

Ace keeps all the editor states (selection, scroll position, etc.) in editor.session, which is very useful for making a tabbed editor:

+ + 
var EditSession = require("ace/edit_session").EditSession;
+var js = new EditSession("some js code");
+var css = new EditSession(["some", "css", "code here"]);
+// and then to load document into editor, just call
+editor.setSession(js);
+ +

Quickstart

+

To set and get content:`

+ + 
editor.setValue("the new text here"); // or session.setValue
+editor.getValue(); // or session.getValue
+ +

To get selected text:

+ + 
editor.session.getTextRange(editor.getSelectionRange());
+ +

To insert at cursor:

+ + 
editor.insert("Something cool");
+ +

To get the current cursor line and column:

+ + 
editor.selection.getCursor();
+ +

To go to a line:

+ + 
editor.gotoLine(lineNumber);
+ +

To get total number of lines:

+ + 
editor.session.getLength();
+ +

To set the default tab size:

+ + 
editor.getSession().setTabSize(4);
+ +

To use soft tabs:

+ + 
editor.getSession().setUseSoftTabs(true);
+ +

To set the font size:

+ + 
document.getElementById('editor').style.fontSize='12px';
+ +

To toggle word wrapping:

+ + 
editor.getSession().setUseWrapMode(true);
+ +

To set line highlighting:

+ + 
editor.setHighlightActiveLine(false);
+ +

To set the print margin visibility:

+ + 
editor.setShowPrintMargin(false);
+ +

To set the editor to read-only:

+ + 
editor.setReadOnly(true);  // false to make it editable
+ +

Triggering Resizes

+ +

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 in Code

+ +

The main ACE search functionality is defined in search.js. The following options are available to you for your search parameters:

+ +
    +
  • + needle: The string or regular expression you're looking for
    • +
  • + backwards: Whether to search backwards from where cursor currently is. Defaults to false.
    • +
  • + wrap: Whether to wrap the search back to the beginning when it hits the end. Defaults to false.
    • +
  • + caseSensitive: Whether the search ought to be case-sensitive. Defaults to false.
    • +
  • + wholeWord: Whether the search matches only on whole words. Defaults to false.
    • +
  • + range: The Range to search within. Set this to null for the whole document
    • +
  • + regExp: Whether the search is a regular expression or not. Defaults to false.
    • +
  • + start: The starting Range or cursor position to begin the search
    • +
  • + skipCurrent: Whether or not to include the current line in the search. Default to false.
    • +

Here's an example of how you can set up search on the editor object:

+ + 
editor.find('needle',{
+    backwards: false,
+    wrap: false,
+    caseSensitive: false,
+    wholeWord: false,
+    regExp: false
+});
+editor.findNext();
+editor.findPrevious();
+ +

Here's how you can perform a replace:

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

And here's a replace all:

+ + 
editor.replaceAll('bar');
+ +

(editor.replaceAll uses the needle set by searchoptions.needle.)

+ +

Listening to Events

+ +

To listen for an onchange:

+ + 
editor.getSession().on('change', callback);
+ +

To listen for an selection change:

+ + 
editor.getSession().selection.on('changeSelection', callback);
+ +

To listen for a cursor change:

+ + 
editor.getSession().selection.on('changeCursor', callback);
+ +

Adding New Commands and Keybindings

+ +

To assign key bindings to a custom function:

+ + 
editor.commands.addCommand({
+    name: 'myCommand',
+    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
+    exec: function(editor) {
+        //...
+    }
+});

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

-

Projects Using Ace

+

Projects Using Ace