50被浏览592分享邀请回答01 条评论分享收藏感谢收起21 条评论分享收藏感谢收起查看更多回答Rails与Node.js/PHP/Python等对比 - PHP,Ruby,Python,Rails,nodeJs - language - ITeye论坛
Rails与Node.js/PHP/Python等对比
锁定老帖子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
等级: 初级会员
来自: 武汉
发表时间：&&
相关知识库：
首先，这不是一个比较贴，语言和框架能比较吗？
其次，我也没有全部用过
本文唯一的目的在于提醒自己(还有正在浏览的你)真正所需要关注的究竟是什么
PHP
PHP是simple but dirty的语言，simple是指学习曲线低，主要是因为有大量的基于php的傻瓜式应用，比如wordpress，discuz之类的，如果你只有一般的博客或论坛需求的话，只要善用google，你不用写哪怕一行代码。但是，php本身simple吗？个人认为不是的，原因就不一一列举了。至于dirty，我更觉得说的是他的设计，语言设计比较糟糕，看着常常的下划线连接的函数名就略窥一二，除了有丰富经验的php程序员，很难有人能写出没有严重漏洞的代码。
php开发框架推荐：一等：Yii，Yaf，Symfony；二等：Zend，Cake，CI
Django
Django是基于Python的web开发框架，和Rails十分的相似，几年前，他比Rails好的地方在于Python比Ruby更“可靠”，所谓可靠，就是更多人用，文档更多，更能通过询问找到答案，但随着近几年Ruby的逐渐兴起(大部分靠Rails的带动)，越来越多的网站使用Rails。单论语言设计，Python不见得比Ruby简洁，一致性也略逊于Ruby，可以说Python唯一的优势就是有很多serious scientists都在使用它，在科学计算领域占据大半江山，而Ruby是日本人造的(Ruby借鉴了Python)。倘若Ruby是与Python同时代的的欧美国家诞生的语言，相信现在已经没Python什么事儿了。
Rails
Rails是个惊人的web框架，几乎现在所有的主流web框架都能看到Rails的影子，Rails把Ruby的特性用到了极限。Rails能应用于一切大中小型应用，超大规模应用不是单靠任意一个脚本语言就能胜任的。Rails经过多年的发展已经洗尽铅华，现在正处于“一枝独秀”的状态，可以说没有一款框架的综合能力(易用性，简介性，效率，学习曲线等)能超越Rails，NodeJS不行，Django不行，其他“小众”的语言更不行，相反，Rails正处于飞速发展状态，以后超大规模应用的成功案例也会逐一出现。
NodeJS
NodeJS是一款很有前途的Web框架，可惜就是晚生了几年，不然现在也是能和Rails一较高下，相比php，Django和Rails，NodeJS的开源项目相对较少，大型的成功案例也略少，但其设计和性能也是相当简洁和高效。相信不久的将来也会大放异彩。
ASP，JSP等
复杂，臃肿，企业级，靠人数堆积的公司，国企，银行，电商，创业公司用这些的话就是自杀，重要部门不用这些的话也是自杀(招的人不行，只能用售后啦)。
其他
其他语言就是各有各的用途，只不过业务恰好用到该语言罢了，严格的说不能算是专门搞网络开发的，比如Clojure，Io等。这里暂时不讨论了。
如果让我再次选择学习路线(只有语言，不包括server，db方面)的话，我会
了解一下php，不用深入
了解一下Yii，一款php的MVC框架，不必深入
基本学习Ruby
基本学习Rails
彻底学习Ruby
彻底学习Rails
了解Python，Django，Lisp，Clojure，NodeJS等
-------------------------分割线------------------------------
这篇文章对rails和nodejs的适用场景描述的非常到位。rails和nodejs是最值得关注的两种后台技术。
声明：这篇文章绝不是一篇讨论 NodeJS 和 Ruby on Rails 孰优孰略的檄文。它描述的只是我们做决策过程中的一些思考、决策背后的原因。两种框架都非常优秀，都出色的完成了它们的设计初衷，这也是为什么我们部分的模块仍然运行在NodeJS上的原因。
我是NodeJs的大粉丝，认为这是一项让人非常兴奋的技术，相信它会变的越来越流行。我对这项技术非常的欣赏——尽管我们最近把Targeter App从NodeJS迁移到了Ruby on Rails。
我们当时使用NodeJS开发它的原因很简单。我有一个程序包，能很快的将我们的应用弄上线(我们花了54小时做这个事情)，相比起Ruby，我更 常使用的是JavaScript。因为我们的技术架构牵涉到MongoDB，我的这些特长只有在NodeJS环境里才会有意义。然而，随着应用规模的增 长，我认识到，选择NodeJS来实现这个应用是个错误的选择。下面让我来概述一下其中的原因。
NodeJS很适合做那些有大量短生命期请求的应用。对于传统的CRUD应用，它也很好，但不是非常的理想。在 PHP，Ruby，Python语言里都有很成熟、优化的很好的框架来处理这种应用。NodeJS里的所有东西都异步执行的理念对于CRUD应用来说没有 任何效果。其它语言里的流行的框架能提供非常好的缓存技术，你所有的需求都能满足，包括异步执行。
NodeJS是一种非常年轻的技术框架，它的周边程序库都不是很成熟。我说这些并没有任何对那些代码捐赠者冒犯 的意思，他们很优秀，开发出来很多优秀的程序库。然而，大部分程序库需要改进，而NodeJS的这种快速成长的环境意味着每一版升级中都带有大量的变化； 当你使用一种前沿技术时，你十分有必要尽快的紧跟最新的版本。这给创业型的企业带来了很多的麻烦。
另外一个原因是关于测试。NodeJS里的测试框架还不错，但跟Django或RoR平台上的相比还是差一些。对于一个每天都有大量的代码提交、并且在一两天内就要发布的应用来说，程序不能出问题是至关重要的，否则你为此辛苦的努力变得得不偿失。没有人愿意花一天的时间改一些弱智的bug。
最后一点，我们需要的是一种能缓存一切的东西，并且要尽快的实现。尽管我们的应用在增长，每秒钟有上万次的hits，但绝不会出现很大量的访问请求；这不是一个聊天程序！主程序最多时也就达到1000RPS，这样的负载对于Ruby on Rails和Nginx来说算不了什么。
如果你现在还在读这篇文章，那你已经看到了我所有要说的了，你也许非常坚持的想知道我们的应用什么地方还在使用NodeJS。是这样的，我们的应用 由两部分组成。一是界面，用户看到的这部分，二是负责报表管理的部分，以及做日志的功能。后者是NodeJS的一个最佳使用场景，存在有大量的短周期的请 求。这部分的动作需要尽快的执行完成，甚至要在我们的数据推送还没有完成之前。这很重要，当请求执行还未结束，浏览器继续等待响应结束，这会影响用户使用 体验。NodeJS的异步特性救了我们。数据要么被存入数据库，要么被处理掉，当请求一旦执行完成，浏览器就可以开始做其它重要的事情了。
等级: 初级会员
来自: 北京
发表时间：&&
倘若Ruby是与Python同时代的的欧美国家诞生的语言，相信现在已经没Python什么事儿了。 这句话说的太大话了...我想说任何一种编程语言都会有他的领域。就个人想法简单来说说，我相信即使Python和Ruby处于同一时代，Python也会有他的应用场景，相信他还是会在serious scientists领域超越Ruby，这个是语言本身与生俱来的优势，在这一点Ruby还差的很远...同时我们必须看到Ruby是后来者语言，它在创立之初就吸取了Python以及其他语言的优势之处，因此他在一部分特性上是要优于Python的，这个无可厚非，如果后来者落后于前者，那创建这门语言的意义在哪里？虽然我个人非常讨厌语言中VB式的没完没了的End。另外我想说，Python的领域何止serious scientists？在云计算大行其道的今天，作者是否关注过Openstack？？？Openstack诞生的年代Ruby已经发展的很不错了吧？当然我绝对不否认RoR比起Django的优势，只是我更多的是看到每一种语言都有他们自己的优势，在他们优势的领域里其他的语言至多也就是在其他领域的王者。Maybe，再过二十年，或许这些又会在另一波浪潮里成了Go的祭品，也许../.
请登录后投票
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术JavaScript
PowerShell
Objective-C
LiveScript
Visual Basic
TypeScript
Common Lisp
ColdFusion
CoffeeScript
AutoHotkey
ActionScript
ACE是一个面向对象的工具开发包，它实现了通信软件的基本设计模式。ACE面向在UNIX和Win32平台上开发高性能通信服务的开发人员。它简化了面 向对象的网络应用程序和服务的开发，这些程序和服务用到了进程间通信，事件分离，直接动态链接和并发机制。ACE通过在运行时动态链接服务到应用程序和在 一个或多个进程或线程中执行这些服务自动完成系统配置和重新配置。
index.html
最近一次提交：4 天 前
Lennart Kats
Merge pull request #1952 from ajaxorg/misc
Garen Torikian
&!DOCTYPE html&
Garen Torikian
&html xmlns=&http://www.w3.org/1999/xhtml&&
&head profile=&http://www.w3.org/2005/10/profile&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8& /&
&title&Ace - The High Performance Code Editor for the Web&/title&
&link rel=&stylesheet& href=&/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css& /&
&link rel=&stylesheet& href=&/font-awesome/3.0/css/font-awesome.css& /&
Garen Torikian
&link href=&./api/resources/csses/ace_api.css& rel=&stylesheet& type=&text/css& /&
&link href=&./doc/site/style.css& rel=&stylesheet& type=&text/css& /&
&link href=&./doc/site/images/favicon.ico& rel=&icon& type=&image/x-icon& /&
Garen Torikian
&script src=&./build/src/ace.js&&&/script&
&script src=&./build/src/ext-static_highlight.js&&&/script&
&!--[if lt IE 9]&
&script src=&./build/src/ext-old_ie.js&&&/script&
&![endif]--&
Garen Torikian
&a href=&/ajaxorg/ace&&
Hyunjun Kim
&img style=&z-index: 50000; position: top: 0; right: 0; border: 0; width: 125 height: 125px& src=&/e6bef7a091f5fbc3eddf/f2f7a6f6ef6d2f2fe732f666f726b6d655ffe706e67& alt=&Fork me on GitHub& /&
Garen Torikian
&div id=&wrapper&&
&div class=&content&&
&div class=&column2&&
&div id=&top_container& class=&collapse&&
Garen Torikian
&h1&&img src=&https://d1n0x3qji82z53.cloudfront.net/textimage.png& alt=&The high performance code editor for the web.& /&&/h1&
&div id=&page_logo&&
&img src=&https://d1n0x3qji82z53.cloudfront.net/ace-logo.png& /&
Garen Torikian
&iframe style=&padding-top:5px& src=&/github-btn.html?user=ajaxorg&repo=ace&type=watch&count=true& allowtransparency=&true& frameborder=&0& scrolling=&0& width=&110px& height=&20px&&&/iframe&
&iframe src=&/github-btn.html?user=ajaxorg&repo=ace&type=fork&count=true& allowtransparency=&true& frameborder=&0& scrolling=&0& width=&95px& height=&20px&&&/iframe&
&div style=&clear: both&&&/div&
&ul id=&tabnav& class=&nav nav-pills&&
&a href=&/&&&img src=&./doc/site/images/ace-tab.png& /&&/a&
&a href=&#about& data-toggle=&tab&&About&/a&
&a href=&#embedding& data-toggle=&tab&&Embedding Guide&/a&
&a href=&#howto& data-toggle=&tab&&How-To Guide&/a&
Garen Torikian
&a href=&#higlighter& data-toggle=&tab&&Syntax Highlighters&/a&
&a href=&#api&&API Reference&/a&
Garen Torikian
&a href=&#production& data-toggle=&tab&&Real World Users&/a&
Garen Torikian
&li class=&last-tab&&
&a href=&#support& data-toggle=&tab&&Support&/a&
&div class=&tab-content&&
&div class=&tab-pane fade& id=&about&&
&h1&Built for Code&/h1&
Garen Torikian
&p id=&first&&Ace is an embeddable code editor written in JavaScript.
It matches the features and performance of native
editors such as Sublime, Vim and TextMate. It can be easily embedded
Garen Torikian
in any web page and JavaScript application. Ace is maintained as the
primary editor for &a href=&http://c9.io&&Cloud9 IDE&/a&
Garen Torikian
and is the successor of the Mozilla Skywriter (Bespin) project.
&pre id=&ace_editor_demo& style=&opacity:0&&/**
Garen Torikian
* In fact, you're looking at ACE right now. Go ahead and play with it!
Garen Torikian
Garen Torikian
* We are currently showing off the JavaScript mode. ACE has support for 45
Garen Torikian
* language modes and 24 color themes!
Garen Torikian
Garen Torikian
function add(x, y) {
Garen Torikian
var resultString = &Hello, ACE! The result of your math is: &;
Garen Torikian
var result = x +
return resultString +
Garen Torikian
Garen Torikian
var addResult = add(3, 2);
console.log(addResult);
&p id=&embed_link&&&a href=&#nav=embedding&&Learn how to embed this in your own site&/a&&/p&
&p class=&highlight_note&&Looking for a more full-featured demo? Check out the
Adrian L Lange
&a href=&build/kitchen-sink.html& target=&_blank&&kitchen sink&/a&.
Garen Torikian
&h2&Features&/h2&
&ul class=&content-list&&
&li&&a href=&/2010/11/syntax-highlighting-specification.html&&Syntax highlighting&/a& for over 110 languages (TextMate/Sublime Text&em&.tmlanguage&/em& files can be imported)&/li&
Garen Torikian
&li&Over 20 themes (TextMate/Sublime Text &em&.tmtheme&/em& files can be imported)&/li&
&li&Automatic indent and outdent&/li&
&li&An optional command line&/li&
Garen Torikian
&li&Handles huge documents (four million lines seems to be the limit!)&/li&
&li&Fully customizable key bindings including vim and Emacs modes&/li&
&li&Search and replace with regular expressions&/li&
&li&Highlight matching parentheses&/li&
&li&Toggle between soft tabs and real tabs&/li&
&li&Displays hidden characters&/li&
&li&Drag and drop text using the mouse&/li&
&li&Line wrapping&/li&
&li&Code folding&/li&
&li&Multiple cursors and selections&/li&
&li&Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)&/li&
&li&Cut, copy, and paste functionality&/li&
Garen Torikian
&h2&Get the Open-Source Code&/h2&
Garen Torikian
&p&Ace is a community project. We actively encourage and support
contributions! The Ace source code is &a href=&/ajaxorg/ace&&hosted on GitHub&/a&
and released under the BSD license &
very simple and friendly to all kinds of projects, whether open-source
or not. Take charge of your editor and add your favorite language
Garen Torikian
highlighting and keybindings!
&pre&git clone git:///ajaxorg/ace.git&/pre&
Garen Torikian
&h2&History&/h2&
Garen Torikian
&p&Skywriter/Bespin and Ace started
as two independent projects both aiming to build a no compromise
code editor component for the web. Bespin started as part of
Garen Torikian
Mozilla Labs and was based on the &canvas& tag, while Ace is
the editor component of &a href=&http://c9.io&&Cloud9 IDE&/a&
Garen Torikian
and uses the DOM for rendering. After the release of Ace at
&a href=&http://jsconf.eu/2010/speaker/kick_ass_code_editing_and_end.html&&JSConf.eu 2010&/a&
Garen Torikian
in Berlin the Skywriter team decided to merge Ace with a simplified
version of Skywriter's plugin system and some of Skywriter&s
Garen Torikian
extensibility points. All these changes have been merged back to Ace
now, which supersedes Skywriter. Both &a href=&http://c9.io&&Cloud9 IDE&/a&
and &a href=&http://mozilla.org&&Mozilla&/a& are actively developing and
Garen Torikian
maintaining Ace.
&h2&Related Projects&/h2&
Garen Torikian
&ul class=&content-list&&
&li&&a href=&/joewalker/gcli&&GCLI&/a&&/li&
&li&&a href=&/mozilla/dryice&&DryIce&/a&&/li&
Garen Torikian
&li&&a href=&/cadorn/ace-extjs&&Ace wrapper for ExtJS&/a&&/li&
&li&&a href=&/daveho/AceGWT&&Ace wrapper for GWT&/a&&/li&
Garen Torikian
&div class=&tab-pane fade active in& id=&embedding&&
Garen Torikian
&h1&Embedding Ace in Your Site&/h1&
&p&Ace can be easily embedded into a web page. Get prebuilt version of ace from
&a href=&/ajaxorg/ace-builds/&&ace-builds&/a& repository and use the code below:&/p&
&pre id=&embedded_ace_code& style=&opacity:0&&&!DOCTYPE html&
&html lang=&en&&
Garen Torikian
&title&ACE in Action&/title&
&style type=&text/css& media=&screen&&
bottom: 0;
&div id=&editor&&function foo(items) {
var x = &All this is syntax highlighted&;
&script src=&/ace-builds/src-noconflict/ace.js& type=&text/javascript& charset=&utf-8&&&/script&
var editor = ace.edit(&editor&);
editor.setTheme(&ace/theme/monokai&);
editor.getSession().setMode(&ace/mode/javascript&);
&/html&&/pre&
&p&Now check out the &a href=&#nav=howto&&How-To Guide&/a& for instructions on
common operations, such as setting a different language mode or
Garen Torikian
getting the contents from the editor.
&h2&Loading Ace from a Local URL&/h2&
&p&If you want to clone and host Ace locally you can
Garen Torikian
use one of the &a href=&/ajaxorg/ace-builds/&&pre-packaged versions&/a&. Just copy
one of &code&src*&/code& subdirectories somewhere into your project, or use RequireJS to load the
contents of &a href=&/ajaxorg/ace/tree/master/lib/ace&&lib/ace&/a& folder as &code&ace&/code&:
&p&The packaged version can also be loaded from CDN's such as &a href=&/#!ace&&jsDelivr&/a& or &a href=&/libraries/ace/&&cdnjs&/a&.
Garen Torikian
&div class=&tab-pane fade& id=&howto&&
Garen Torikian
&h1&Working with Ace&/h1&
&p&&em&In all of these examples Ace has been invoked
Garen Torikian
as shown in the &a href=&#nav=embedding&&embedding guide&/a&.&/em&
&h2&Setting Themes&/h2&
all you have to do is pass the string name:&/p&
&pre&&code class=&javascript&&editor.setTheme(&ace/theme/twilight&);&/code&&/pre&
Garen Torikian
&p&&span class=&expand_arrow&&&&/span& &a href=&/ajaxorg/ace/tree/master/lib/ace/theme& target=&_blank&&See all themes&/a&&/p&
&h2&Setting the Programming Language Mode&/h2&
&p&By default, the editor supports plain text mode. All other language modes are available as separate modules, loaded on demand like this:&/p&
Garen Torikian
&pre&&code class=&javascript&&editor.getSession().setMode(&ace/mode/javascript&);
&/code&&/pre&
&!--h2&One Editor, Multiple Sessions&/h2&
Garen Torikian
&p&Ace keeps everything about the state of the editor (selection, scroll position, etc.)
in &code class=&javascript&&editor.session&/code&. This means you can grab the
session, store it in a var, and set the editor to another session (e.g. a tabbed editor).&/p&
&p&You might accomplish this like so:&/p&
&pre&&code class=&javascript&&var EditSession = require(&ace/edit_session&).EditS
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);&/code&&/pre--&
&h2&Common Operations&/h2&
&p&Set and get content:&/p&
&pre&&code class=&javascript&&editor.setValue(&the new text here&); // or session.setValue
editor.getValue(); // or session.getValue&/code&&/pre&
&p&Get selected text:&/p&
&pre&&code class=&javascript&&editor.session.getTextRange(editor.getSelectionRange());&/code&&/pre&
&p&Insert at cursor:&/p&
&pre&&code class=&javascript&&editor.insert(&Something cool&);&/code&&/pre&
&p&Get the current cursor line and column:&/p&
&pre&&code class=&javascript&&editor.selection.getCursor();&/code&&/pre&
&p&Go to a line:&/p&
&pre&&code class=&javascript&&editor.gotoLine(lineNumber);&/code&&/pre&
&p&Get total number of lines:&/p&
&pre&&code class=&javascript&&editor.session.getLength();&/code&&/pre&
&p&Set the default tab size:&/p&
&pre&&code class=&javascript&&editor.getSession().setTabSize(4);&/code&&/pre&
&p&Use soft tabs:&/p&
&pre&&code class=&javascript&&editor.getSession().setUseSoftTabs(true);&/code&&/pre&
&p&Set the font size:&/p&
&pre&&code class=&javascript&&document.getElementById('editor').style.fontSize='12px';&/code&&/pre&
&p&Toggle word wrapping:&/p&
&pre&&code class=&javascript&&editor.getSession().setUseWrapMode(true);&/code&&/pre&
&p&Set line highlighting:&/p&
&pre&&code class=&javascript&&editor.setHighlightActiveLine(false);&/code&&/pre&
&p&Set the print margin visibility:&/p&
&pre&&code class=&javascript&&editor.setShowPrintMargin(false);&/code&&/pre&
&p&Set the editor to read-only:&/p&
&pre&&code class=&javascript&&editor.setReadOnly(true);
// false to make it editable&/code&&/pre&
&h3&Triggering Resizes&/h3&
Garen Torikian
&p&Ace only resizes itself on window events. If you resize the editor div in another manner, and need Ace to resize, use the following:&/p&
&pre&&code class=&javascript&&editor.resize()&/code&&/pre&
&h3&Searching&/h3&
&pre&&code class=&language-javascript&&editor.find('needle',{
backwards: false,
wrap: false,
caseSensitive: false,
wholeWord: false,
regExp: false
editor.findNext();
editor.findPrevious();&/code&&/pre&
&p&The following options are available to you for your search parameters:&/p&
Garen Torikian
&code&needle&/code&: The string or regular expression you're looking for
&code&backwards&/code&: Whether to search backwards from where cursor currently is. Defaults to &code&false&/code&.
&code&wrap&/code&: Whether to wrap the search back to the beginning when it hits the end. Defaults to &code&false&/code&.
&code&caseSensitive&/code&: Whether the search ought to be case-sensitive. Defaults to &code&false&/code&.
&code&wholeWord&/code&: Whether the search matches only on whole words. Defaults to &code&false&/code&.
&code&range&/code&: The &a class=&internal absent& href=&/ajaxorg/ace/wiki/Range&&Range&/a& to search within. Set this to &code&null&/code& for the whole document
&code&regExp&/code&: Whether the search is a regular expression or not. Defaults to &code&false&/code&.
&code&start&/code&: The starting &a class=&internal absent& href=&/ajaxorg/ace/wiki/Range&&Range&/a& or cursor position to begin the search
&code&skipCurrent&/code&: Whether or not to include the current line in the search. Default to &code&false&/code&.
&p&Here's how you can perform a replace:&/p&
&pre&&code class=&javascript&&editor.find('foo');
editor.replace('bar');&/code&&/pre&
&p&And here's a replace all: &/p&
&pre&&code class=&javascript&&editor.replaceAll('bar');&/code&&/pre&
&p&(&code&editor.replaceAll&/code& uses the needle set earlier by &code&editor.find('needle', ...&/code&)&/p&
&h3&Listening to Events&/h3&
&p&To listen for an &code&onchange&/code&:&/p&
&pre&&code class=&javascript&&editor.getSession().on('change', function(e) {
// e.type, etc
});&/code&&/pre&
&p&To listen for an &code&selection&/code& change:&/p&
&pre&&code class=&javascript&&editor.getSession().selection.on('changeSelection', function(e) {
});&/code&&/pre&
&p&To listen for a &code&cursor&/code& change:&/p&
&pre&&code class=&javascript&&editor.getSession().selection.on('changeCursor', function(e) {
});&/code&&/pre&
&h3&Adding New Commands and Keybindings&/h3&
&p&To assign key bindings to a custom function:&/p&
&pre&&code class=&javascript&&mands.addCommand({
name: 'myCommand',
bindKey: {win: 'Ctrl-M',
mac: 'Command-M'},
exec: function(editor) {
Adrian Longley
readOnly: true // false if this command should not apply in readOnly mode
});&/code&&/pre&
Garen Torikian
Garen Torikian
&div class=&tab-pane fade& id=&higlighter&&
&h1&Creating a Syntax Highlighter for Ace&/h1&
&p&Creating a new syntax highlighter for Ace is extremly simple. You'll need to define two pieces of code: a new mode, and a new set of highlighting rules.&/p&
&h2 id=&where-to-start&&&a class=&heading_anchor& href=&#where-to-start&&&i class=&headerLinkIcon&&&/i&&/a&Where to Start&/h2&
Adrian L Lange
&p&We recommend using the the &a href=&tool/mode_creator.html&&Ace Mode Creator&/a& when defining your highlighter. This allows you to inspect your code's tokens, as well as providing a live preview of the syntax highlighter in action.&/p&
Garen Torikian
&h2 id=&defining-a-mode&&&a class=&heading_anchor& href=&#defining-a-mode&&&i class=&headerLinkIcon&&&/i&&/a&Defining a Mode&/h2&
&p&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.&/p&
&p&Here is the starter template we'll use to create a new mode:&/p&
&pre&&code class=&language-javascript&&define(function(require, exports, module) {
&use strict&;
Garen Torikian
var oop = require(&../lib/oop&);
// defines the parent mode
var TextMode = require(&./text&).M
var Tokenizer = require(&../tokenizer&).T
var MatchingBraceOutdent = require(&./matching_brace_outdent&).MatchingBraceO
Garen Torikian
// defines the language specific highlighters and folding rules
var MyNewHighlightRules = require(&./mynew_highlight_rules&).MyNewHighlightR
var MyNewFoldMode = require(&./folding/mynew&).MyNewFoldM
Garen Torikian
var Mode = function() {
// set everything up
this.HighlightRules = MyNewHighlightR
this.$outdent = new MatchingBraceOutdent();
this.foldingRules = new MyNewFoldMode();
Garen Torikian
oop.inherits(Mode, TextMode);
(function() {
// configure comment start/end characters
this.lineCommentStart = &//&;
this.blockComment = {start: &/*&, end: &*/&};
// special logic for indent/outdent.
// By default ace keeps indentation of previous line
Garen Torikian
this.getNextLineIndent = function(state, line, tab) {
var indent = this.$getIndent(line);
this.checkOutdent = function(state, line, input) {
return this.$outdent.checkOutdent(line, input);
this.autoOutdent = function(state, doc, row) {
this.$outdent.autoOutdent(doc, row);
// create worker for live syntax checking
Garen Torikian
this.createWorker = function(session) {
var worker = new WorkerClient([&ace&], &ace/mode/mynew_worker&, &NewWorker&);
worker.attachToDocument(session.getDocument());
worker.on(&errors&, function(e) {
session.setAnnotations(e.data);
Garen Torikian
Garen Torikian
}).call(Mode.prototype);
exports.Mode = M
});&/code&&/pre&
Garen Torikian
&p&What's going on here? First, you're defining the path to &code&TextMode&/code& (more on this later). Then you're pointing the mode to your definitions for the highlighting rules, as well as your rules for code folding. Finally, you're setting everything up to find those rules, and exporting the Mode so that it can be consumed. That's it!&/p&
&p&Regarding &code&TextMode&/code&, you'll notice that it's only being used once: &code&oop.inherits(Mode, TextMode);&/code&. If your new language depends on the rules of another language, you can choose to inherit the same rules, while expanding on it with your language's own requirements. For example, PHP inherits from HTML, since it can be embedded directly inside &em&.html&/em& pages. You can either inherit from &code&TextMode&/code&, or any other existing mode, if it already relates to your language.&/p&
&p&All Ace modes can be found in the &em&lib/ace/mode&/em& folder.&/p&
&h2 id=&defining-syntax-highlighting-rules&&&a class=&heading_anchor& href=&#defining-syntax-highlighting-rules&&&i class=&headerLinkIcon&&&/i&&/a&Defining Syntax Highlighting Rules&/h2&
&p&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 &em&mynew_highlight_rules.js&/em&, which our mode above uses.&/p&
&p&All syntax highlighters start off looking something like this:&/p&
&pre&&code class=&language-javascript&&define(function(require, exports, module) {
&use strict&;
Garen Torikian
var oop = require(&../lib/oop&);
var TextHighlightRules = require(&./text_highlight_rules&).TextHighlightR
var MyNewHighlightRules = function() {
Garen Torikian
// regexp must not have capturing parentheses. Use (?:) instead.
// regexps are ordered -& the first match is used
this.$rules = {
&start& : [
Garen Torikian
token: &token&, // String, Array, or Function: the CSS token to apply
regex: &regex&, // String or RegExp: the regexp to match
// [Optional] String: next state to enter
Garen Torikian
oop.inherits(MyNewHighlightRules, TextHighlightRules);
exports.MyNewHighlightRules = MyNewHighlightR
});&/code&&/pre&
Garen Torikian
&p&The token state machine operates on whatever is defined in &code&this.$rules&/code&. The highlighter always begins at the &code&start&/code& state, and progresses down the list, looking for a matching &code&regex&/code&. When one is found, the resulting text is wrapped within a &code&&span class=&ace_&token&&&&/code& tag, where &code&&token&&/code& is defined as the &code&token&/code& property. Note that all tokens are preceded by the &code&ace_&/code& prefix when they're rendered on the page.&/p&
&p&Once again, we're inheriting from &code&TextHighlightRules&/code& 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 &&a href=&#extending-highlighters&&extending Highlighters&/a&& below.&/p&
&h3 id=&defining-tokens&&&a class=&heading_anchor& href=&#defining-tokens&&&i class=&headerLinkIcon&&&/i&&/a&Defining Tokens&/h3&
&p&The Ace highlighting system is heavily inspired by the &a href=&/en/language_grammars&&TextMate language grammar&/a&. Most tokens will follow the conventions of TextMate when naming grammars. A thorough (albeit incomplete) list of tokens can be found &a href=&/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode#wiki-commonTokens&&on the Ace Wiki&/a&.&/p&
&p&For the complete list of tokens, see &em&&a href=&/ajaxorg/ace/blob/master/tool/tmtheme.js&&tool/tmtheme.js&/a&&/em&. It is possible to add new token names, but the scope of that knowledge is outside of this document.&/p&
&p&Multiple tokens can be applied to the same text by adding dots in the token, &em&e.g.&/em& &code&token: support.function&/code& wraps the text in a &code&&span class=&ace_support ace_function&&&/code& tag.&/p&
&h3 id=&defining-regular-expressions&&&a class=&heading_anchor& href=&#defining-regular-expressions&&&i class=&headerLinkIcon&&&/i&&/a&Defining Regular Expressions&/h3&
&p&Regular expressions can either be a RegExp or String definition&/p&
&p&If you're using a regular expression, remember to start and end the line with the &code&/&/code& character, like this:&/p&
&pre&&code class=&language-javascript&&{
token : &constant.language.escape&,
regex : /\$[\w\d]+/
Garen Torikian
}&/code&&/pre&
Garen Torikian
&p&A caveat of using stringed regular expressions is that any &code&\&/code& character must be escaped. That means that even an innocuous regular expression like this:&/p&
&pre&&code class=&language-javascript&&regex: &function\s*\(\w+\)&&/code&&/pre&
Garen Torikian
&p&Must actually be written like this:&/p&
&pre&&code class=&language-javascript&&regex: &function\\s*\(\\w+\)&&/code&&/pre&
Garen Torikian
&h4 id=&groupings&&&a class=&heading_anchor& href=&#groupings&&&i class=&headerLinkIcon&&&/i&&/a&Groupings&/h4&
&p&You can also include flat regexps--&code&(var)&/code&--or have matching groups--&code&((a+)(b+))&/code&. There is a strict requirement whereby matching groups &strong&must&/strong& cover the e thus, &code&(hel)lo&/code& is invalid. If you want to create a non-matching group, simply start the group with the &code&?:&/code& thus, &code&(hel)(?:lo)&/code& is okay. You can, of course, create longer non-matching groups. For example:&/p&
&pre&&code class=&language-javascript&&{
token : &constant.language.boolean&,
regex : /(?:true|false)\b/
Garen Torikian
},&/code&&/pre&
Garen Torikian
&p&For flat regular expression matches, &code&token&/code& 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:&/p&
&pre&&code class=&language-javascript&&var colors = lang.arrayToMap(
(&aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|& +
&purple|red|silver|teal|white|yellow&).split(&|&)
Garen Torikian
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(&|&)
Garen Torikian
token: function(value) {
if (colors.hasOwnProperty(value.toLowerCase())) {
return &support.constant.color&;
Garen Torikian
else if (fonts.hasOwnProperty(value.toLowerCase())) {
return &support.constant.fonts&;
Garen Torikian
return &text&;
Garen Torikian
regex: &\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*&
Garen Torikian
}&/code&&/pre&
Garen Torikian
&p&If &code&token&/code& is a function,it should take the same number of arguments as there are groups, and return an array of tokens.&/p&
&p&For grouped regular expressions, &code&token&/code& can be a String, in which case all matched groups are given that same token, like this:&/p&
&pre&&code class=&language-javascript&&{
token: &identifier&,
regex: &(\\w+\\s*:)(\\w*)&
Garen Torikian
}&/code&&/pre&
Garen Torikian
&p&More commonly, though, &code&token&/code& 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:&/p&
&pre&&code class=&language-javascript&&{
token : [&storage.type&, &text&, &entity.name.function&],
regex : &(function)(\\s+)([a-zA-Z_][a-zA-Z0-9_]*\\b)&
Garen Torikian
}&/code&&/pre&
Garen Torikian
&h2 id=&defining-states&&&a class=&heading_anchor& href=&#defining-states&&&i class=&headerLinkIcon&&&/i&&/a&Defining States&/h2&
&p&The syntax highlighting state machine stays in the &code&start&/code& state, until you define a &code&next&/code& state for it to advance to. At that point, the tokenizer stays in that new &code&state&/code&, until it advances to another state. Afterwards, you should return to the original &code&start&/code& state.&/p&
&p&Here's an example:&/p&
&pre&&code class=&language-javascript&&this.$rules = {
&start& : [ {
token : &text&,
merge : true,
regex : &&\\!\\[CDATA\\[&,
next : &cdata&
Garen Torikian
&cdata& : [ {
token : &text&,
regex : &\\]\\]&&,
next : &start&
Garen Torikian
token : &text&,
merge : true,
regex : &\\s+&
Garen Torikian
token : &text&,
merge : true,
regex : &.+&
Garen Torikian
};&/code&&/pre&
Garen Torikian
&p&In this extremly short sample, we're defining some highlighting rules for when Ace detectes a &code&&![CDATA&/code& tag. When one is encountered, the tokenizer moves from &code&start&/code& into the &code&cdata&/code& state. It remains there, applying the &code&text&/code& token to any string it encounters. Finally, when it hits a closing &code&]&&/code& symbol, it returns to the &code&start&/code& state and continues to tokenize anything else.&/p&
&h2&Using the TMLanguage Tool&/h2&
&p&There is a tool that
will take an existing &em&tmlanguage&/em& file and do its best to convert it into Javascript for Ace to consume. Here's what you need to get started:
&li&In the Ace repository, navigate to the &em&&a href=&/ajaxorg/ace/tree/master/tool&&tools&/a&&/em& folder.&/li&
&li&Run &code&npm install&/code&
to install required dependencies.&/li&
&li&Run &code&node tmlanguage.js &path_to_tmlanguage_file&&/code&; for example, &code&node &path_to_tmlanguage_file& /Users/Elrond/elven.tmLanguage&/code&&/li&
&p&Two files are created and placed in &em&lib/ace/mode&/em&: one for the language mode, and one for the set of highlight rules. You will still need to add the code into &em&ace/ext/modelist.js&/em&, and add a sample file for testing.&/p&
Garen Torikian
&h3 id=&a-note-on-accuracy&&&a class=&heading_anchor& href=&#a-note-on-accuracy&&&i class=&headerLinkIcon&&&/i&&/a&A Note on Accuracy&/h3&
&p&Your &em&.tmlanguage&/em& file will then be converted to the best of the converter’s ability. It is an understatement to say that the tool is imperfect. Probably, language mode creation will never be able to be fully autogenerated. There's a list of non- for example:&/p&
&li&The use of regular expression lookbehinds&br /&This is a concept that JavaScript simply does not have and needs to be faked&/li&
&li&Deciding which state to transition to&br /&While the tool does create new states correctly, it labels them with generic terms like &code&state_2&/code&, &code&state_10&/code&, &em&e.t.c.&/em&&/li&
&li&Extending modes&br /&Many modes say something like &code&include source.c&/code&, to mean, “add all the rules in C highlighting.” That syntax does not make sense to Ace or this tool (though of course you can &a href=&/extension-development-resources/guides/extending_highlighters.html&&extending existing highlighters&/a&).&/li&
&li&Rule preference order&/li&
&li&Gathering keywords&br /&Most likely, you’ll need to take keywords from your language file and run them through &code&createKeywordMapper()&/code&&/li&
&p&However, the tool is an excellent way to get a quick start, if you already possess a &em&tmlanguage&/em& file for you language.&/p&
&h2&Extending Highlighters&/h2&
&p&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 (&code&&?lua&/code&, &code&&?php&/code&, &code&{%&/code&, for example). Ace allows you to easily extend a highlighter using a few helper functions.&/p&
&h3 id=&getting-existing-rules&&&a class=&heading_anchor& href=&#getting-existing-rules&&&i class=&headerLinkIcon&&&/i&&/a&Getting Existing Rules&/h3&
&p&To get the existing syntax highlighting rules for a particular language, use the &code&getRules()&/code& function. For example:&/p&
&pre&&code class=&language-javascript&&var HtmlHighlightRules = require(&./html_highlight_rules&).HtmlHighlightR
Garen Torikian
this.$rules = new HtmlHighlightRules().getRules();
Garen Torikian
this.$rules == Same this.$rules as HTML highlighting
*/&/code&&/pre&
Garen Torikian
&h3 id=&extending-a-highlighter&&&a class=&heading_anchor& href=&#extending-a-highlighter&&&i class=&headerLinkIcon&&&/i&&/a&Extending a Highlighter&/h3&
&p&The &code&addRules&/code& 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:&/p&
&pre&&code class=&language-javascript&&this.$rules = {
&start&: [ /* ... */ ]
Garen Torikian
var newRules = {
&start&: [ /* ... */ ]
Garen Torikian
}&/code&&/pre&
Garen Torikian
&p&If you want to incorporate &code&newRules&/code& into &code&this.$rules&/code&, you'd do something like this:&/p&
&pre&&code class=&language-javascript&&this.addRules(newRules, &new-&);
Garen Torikian
this.$rules = {
&start&: [ ... ],
&new-start&: [ ... ]
*/&/code&&/pre&
Garen Torikian
&h3 id=&extending-two-highlighters&&&a class=&heading_anchor& href=&#extending-two-highlighters&&&i class=&headerLinkIcon&&&/i&&/a&Extending Two Highlighters&/h3&
&p&The last function available to you combines both of these concepts, and it's called &code&embedRules&/code&. It takes three parameters:&/p&
&li&An existing rule set to embed with&/li&
&li&A prefix to apply for each state in the existing rule set&/li&
&li&A set of new states to add&/li&
&p&Like &code&addRules&/code&, &code&embedRules&/code& adds on to the existing &code&this.$rules&/code& object. &/p&
&p&To explain this visually, let's take a look at the syntax highlighter for Lua pages, which combines all of these concepts:&/p&
&pre&&code class=&language-javascript&&var HtmlHighlightRules = require(&./html_highlight_rules&).HtmlHighlightR
var LuaHighlightRules = require(&./lua_highlight_rules&).LuaHighlightR
Garen Torikian
var LuaPageHighlightRules = function() {
this.$rules = new HtmlHighlightRules().getRules();
Garen Torikian
for (var i in this.$rules) {
this.$rules[i].unshift({
token: &keyword&,
regex: &&\\%\\=?&,
next: &lua-start&
Garen Torikian
token: &keyword&,
regex: &&\\?lua\\=?&,
next: &lua-start&
Garen Torikian
this.embedRules(LuaHighlightRules, &lua-&, [
Garen Torikian
token: &keyword&,
regex: &\\%&&,
next: &start&
Garen Torikian
token: &keyword&,
regex: &\\?&&,
next: &start&
Garen Torikian
};&/code&&/pre&
Garen Torikian
&p&Here, &code&this.$rules&/code& starts off as a set of HTML highlighting rules. To this set, we add two new checks for &code&&%=&/code& and &code&&?lua=&/code&. We also delegate that if one of these rules are matched, we should move onto the &code&lua-start&/code& state. Next, &code&embedRules&/code& takes the already existing set of &code&LuaHighlightRules&/code& and applies the &code&lua-&/code& prefix to each state there. Finally, it adds two new checks for &code&%&&/code& and &code&?&&/code&, allowing the state machine to return to &code&start&/code&.&/p&
&h3&Code Folding&/h3&
&p&Adding new folding rules to your mode can be a little tricky. First, insert the following lines of code into your mode definition:&/p&
&pre&&code class=&language-javascript&&var MyFoldMode = require(&./folding/newrules&).FoldM
Garen Torikian
var MyMode = function() {
Garen Torikian
this.foldingRules = new MyFoldMode();
Garen Torikian
};&/code&&/pre&
Garen Torikian
&p&You'll be defining your code folding rules into the &em&lib/ace/mode/folding&/em& folder. Here's a template that you can use to get started:&/p&
&pre&&code class=&language-javascript&&define(function(require, exports, module) {
&use strict&;
Garen Torikian
var oop = require(&../../lib/oop&);
var Range = require(&../../range&).R
var BaseFoldMode = require(&./fold_mode&).FoldM
Garen Torikian
var FoldMode = exports.FoldMode = function() {};
Garen Torikian
oop.inherits(FoldMode, BaseFoldMode);
(function() {
Garen Torikian
// regular expressions that identify starting and stopping points
this.foldingStartM
this.foldingStopM
Garen Torikian
this.getFoldWidgetRange = function(session, foldStyle, row) {
var line = session.getLine(row);
Garen Torikian
// test each line, and return a range of segments to collapse
Garen Torikian
}).call(FoldMode.prototype);
});&/code&&/pre&
Garen Torikian
&p&Just like with &code&TextMode&/code& for syntax highlighting, &code&BaseFoldMode&/code& contains the starting point for code folding logic. &code&foldingStartMarker&/code& defines your opening folding point, while &code&foldingStopMarker&/code& defines the stopping point. For example, for a C-style folding system, these values might look like this:&/p&
&pre&&code class=&language-javascript&&this.foldingStartMarker = /(\{|\[)[^\}\]]*$|^\s*(\/\*)/;
this.foldingStopMarker = /^[^\[\{]*(\}|\])|^[\s\*]*(\*\/)/;&/code&&/pre&
Adrian L Lange
&p&These regular expressions identify various symbols--&code&{&/code&, &code&[&/code&, &code&//&/code&--to pay attention to. &code&getFoldWidgetRange&/code& matches on these regular expressions, and when found, returns the range of relevant folding points. For more information on the &code&Range&/code& object, see &a href=&#nav=api&api=range&&the Ace API documentation&/a&.&/p&
Garen Torikian
&p&Again, for a C-style folding mechanism, a range to return for the starting fold might look like this:&/p&
&pre&&code class=&language-javascript&&var line = session.getLine(row);
var match = line.match(this.foldingStartMarker);
if (match) {
var i = match.
Garen Torikian
if (match[1])
return this.openingBracketBlock(session, match[1], row, i);
Garen Torikian
var range = session.getCommentFoldRange(row, i + match[0].length);
range.end.column -= 2;
Garen Torikian
}&/code&&/pre&
Garen Torikian
&p&Let's say we stumble across the code block &code&hello_world() {&/code&. Our range object here becomes:&/p&
&pre&&code class=&language-json&&{
Garen Torikian
startRow: 0,
endRow: 0,
startColumn: 0,
endColumn: 13
}&/code&&/pre&
Garen Torikian
&h2&Testing Your Highlighter&/h2&
Adrian L Lange
&p&The best way to test your tokenizer is to see it live, right? To do that, you'll want to modify the &a href=&build/kitchen-sink.html&&live Ace demo&/a& to preview your changes. You can find this file in the root Ace directory with the name &em&kitchen-sink.html&/em&.&/p&
Garen Torikian
add an entry to &code&supportedModes&/code& in &a href=&/ajaxorg/ace/blob/master/lib/ace/ext/modelist.js#L53&&&code&ace/ext/modelist.js&/code&&/a&
Garen Torikian
&p&add a sample file to &code&demo/kitchen-sink/docs/&/code& with same name as the mode file
Garen Torikian
&p&Once you set this up, you should be able to witness a live demonstration of your new highlighter.&/p&
Garen Torikian
&h3 id=&adding-automated-tests&&&a class=&heading_anchor& href=&#adding-automated-tests&&&i class=&headerLinkIcon&&&/i&&/a&Adding Automated Tests&/h3&
&p&Adding automated tests for a highlighter is trivial so you are not required to do it, but it can help during development.&/p&
&p&In &code&lib/ace/mode/_test&/code& create a file named &code&&pre&text_&span style=&color:#AA0D91&&&modeName&&/span&.txt&/pre&&/code& with some example code. (You can skip this if the document you have added in &code&demo/docs&/code& both looks good and covers various edge cases in your language syntax).
&p& Run &code&&span style=&color:#AA0D91&&node&/span& &span style=&color:#008800&&highlight_rules_test.js&/span& &span style=&color:#000088&&-gen&/span&&/code& to preserve current output of your tokenizer in &code&tokens_&span style=&color:#AA0D91&&&modeName&&/span&.json&/code&
&p&After this running &code&&span style=&color:#008800&&highlight_rules_test.js&/span& &span style=&color:#000088&&optionalLanguageName&/span&&/code& will compare output of your tokenizer with the correct output you've created.
&p&Any files ending with the &em&_test.js&/em& suffix are automatically run by Ace's &a href=&http://travis-ci.org/#!/ajaxorg/ace&&Travis CI&/a& server.&/p&
Garen Torikian
&div class=&tab-pane fade& id=&api&&
&div class=&row centerpiece&&
&div id=&sidebarContainer& class=&span2&&
Garen Torikian
&div id=&sidebar&&
&div id=&well&&
Garen Torikian
Garen Torikian
&ul class=&menu&&
&div class=&menu-item&&&a href=&./api/ace.html& class=&menuLink namespace&&Ace&/a&&/div&
&div class=&menu-item&&&a href=&./api/anchor.html& class=&menuLink namespace&&Anchor&/a&&/div&
&div class=&menu-item&&&a href=&./api/background_tokenizer.html& class=&menuLink namespace&&BackgroundTokenizer
&/a&&/div&
&div class=&menu-item&&&a href=&./api/document.html& class=&menuLink namespace&&Document
&/a&&/div&
&div class=&menu-item&&&a href=&./api/edit_session.html& class=&menuLink namespace&&EditSession&/a&&/div&
&div class=&menu-item&&&a href=&./api/editor.html& class=&menuLink namespace&&Editor&/a&&/div&
&div class=&menu-item&&&a href=&./api/range.html& class=&menuLink namespace&&Range&/a&&/div&
&div class=&menu-item&&&a href=&./api/scrollbar.html& class=&menuLink namespace&&Scrollbar&/a&&/div&
&div class=&menu-item&&&a href=&./api/search.html& class=&menuLink namespace&&Search
&/a&&/div&
&div class=&menu-item&&&a href=&./api/selection.html& class=&menuLink namespace&&Selection
&/a&&/div&
&div class=&menu-item&&&a href=&./api/token_iterator.html& class=&menuLink namespace&&TokenIterator&/a&&/div&
&div class=&menu-item&&&a href=&./api/tokenizer.html& class=&menuLink namespace&&Tokenizer&/a&&/div&
&div class=&menu-item&&&a href=&./api/undomanager.html& class=&menuLink namespace&&UndoManager&/a&&/div&
&div class=&menu-item&&&a href=&./api/virtual_renderer.html& class=&menuLink namespace&&VirtualRenderer&/a&&/div&
Garen Torikian
&div id=&apiHolder&&
&div id=&documentation& class=&span7&&
Garen Torikian
&h1&Ace API Reference&/h1&
&p&Welcome to the Ace API Reference!&/p&
&p&On the left, you'll find a list of all of our currently documented classes.
These is not a complete set of classes, but rather, the &core& set. For more
information on how to work with Ace, check out the &a href=&#nav=embedding&&embedding guide&/a&.
&p&Below is an ERD diagram describing some fundamentals about how the internals of Ace works:&/p&
&img src=&doc/template/resources/images/Ace_ERD.png& style=&max-width:100%; max-height:100%& /&
Garen Torikian
Garen Torikian
&div class=&tab-pane fade& id=&production&&
Garen Torikian
&h1&Projects Using Ace&/h1&
&p&Ace is used all over the web in all kinds of production applications. Here is
Garen Torikian
just a small sampling:&/p&
&ul class=&menu-list&&
&img src=&doc/site/images/github-logo.png&
style=&left: -15 top: -9& /&
&a href=&/blog/905-edit-like-an-ace&&GitHub&/a&
&img src=&doc/site/images/khan-logo.png&
style=&left: -10 top: -27 width: 120px& /&
&a href=&http://ejohn.org/blog/introducing-khan-cs/&&Khan Academy&/a&
&img src=&doc/site/images/cloud9-logo.png&
style=&left: -11top:-12 width:122px& /&
&a href=&/ajaxorg/cloud9&&Cloud9 IDE&/a&
&img src=&doc/site/images/firefox-logo.png&
style=&left:10top:-5width:80px& /&
&a href=&https://builder.addons.mozilla.org/&&Firefox Add-on Builder&/a&
&img src=&doc/site/images/codecademy-logo.png&
style=&left: -5 top: 10& /&
&a href=&/&&Codecademy&/a&
&img src=&doc/site/images/rstudio_logo_64.png&
style=&left: 19 top: 2& /&
&a href=&http://rstudio.org/&&RStudio&/a&
&img src=&doc/site/images/ac-logo.png&
style=&left: 4 top: 25& /&
Garen Torikian
&a href=&/&&Application Craft&/a&
&img src=&http://benweet.github.io/stackedit/img/stackedit-128.png&
style=&width: 74 left: 13 top: 1&&
&a href=&http://benweet.github.io/stackedit/&&StackEdit&/a&
&img src=&http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png& style=&left: -5 top: -35 width: 110&&
&a href=&https://en.wikipedia.org/wiki/Special:Version& style=&font-family: 'Linux Libertine','Hoefler Text',Georgia,'Times New Roman',Times,&&W&span style=&font-variant: small-&&ikipedi&/span&A&/a&
&img src=&doc/site/images/codiad.png&
style=&left: 10 top: -4 width:80px& /&
&a href=&/&&Codiad&/a&
&img src=&doc/site/images/zorba-logo.png&
style=&left: -5 top: 16
padding: 6px 4px 6px 6 width: 100px& /&
&a href=&http://try.zorba.io/queries/xquery&&Zorba XQuery&/a&
&img src=&doc/site/images/plunker.png&
style=&left: 13 top: -4 width: 75px& /&
&a href=&http://plnkr.co/edit/&&Plunker&/a&
&img src=&http://zedapp./uploads/2014/02/zed-small.png& style=&left: -1top: -20width: 103&&
&a href=&http://zedapp.org&&Zed&/a&
Garen Torikian
&img src=&doc/site/images/sassmeister-logo.png&
style=&left: 10top: -5width: 80& /&
Garen Torikian
&a href=&/&&SassMeister&/a&
Garen Torikian
&img src=&doc/site/images/sx-logo.png&
style=&left: -11 top: -12&&
&a href=&&&Scroipe&/a&
&img src=&doc/site/images/ideone-logo.png&
style=&left: -5 top: 20&&
&a href=&&&&/a&
&img src=&doc/site/images/pixie-logo.png&
style=&left: 0 top: 10&&
&a href=&/projects/demo/ide&&Pixie&/a&
&img src=&doc/site/images/modx-logo-4.png&
style=&left: 18 top: 6&&
&a href=&/extras/package/ace&&MODX&/a&
&img src=&doc/site/images/shiftedit-logo.png&
style=&left: -10 top: -20 width: 120px& /&
&a href=&http://shiftedit.net/&&ShiftEdit&/a&
&div class=&rotating-logo& style=&background:url(doc/site/images/habitat-logo.svg) center no-
left: 19 top: 6width: 60height: 60background-size: 60position:&&&/div&
&a href=&&&Inkling Habitat&/a&
&li style=&width: 248&&
&img src=&/images/pages/base/logo.png& style=&left: 48 top: 10&&
&a href=&&&Code Combat&/a&
&!--seems to be down &li&
&img src=&doc/site/images/lws-logo.png&
style=&left: 0 top: 0 width: 100px& /&
&a href=&http://liveworkspace.org&&Live Workspace&/a&
&img src=&doc/site/images/repl.it-logo.png&
style=&left: 0 top: 17 width: 100px& /&
&a href=&http://repl.it/&&Repl.it&/a&
&img src=&doc/site/images/stypi-logo.png&
style=&left: 9 top: -5 width: 84px& /&
&a href=&/&&Stypi&/a&
&img src=&doc/site/images/weecod-logo.png&
style=&left: 0 top: 0 width: 100px& /&
&a href=&&&Weecod&/a&
&img src=&doc/site/images/processwire-logo.svg&
style=&left: 0 top: 25 width: 102px& /&
&a href=& /modules/inputfield-ace-editor/&&Process&i&Wire&/i&&/a&
&img src=&doc/site/images/crunchapp-logo.png&
style=&left: 9 top: -5 width: 84px& /&
&a href=&http://crunchapp.net/&&Crunch&/a&
&img src=&/host/0B3cR-oSmQsB5aUhWQ2N4RDNmYzA/h/img/icon-128.png&
style=&left: 9 top: -5 width: 84px&&
&a href=&/support&&Drive Notepad&/a&
&img src=&http://textor.houfeng.net/images/textor.png&
style=&position: left: 13 top: -3 width: 75px& /&
&a href=&http://textor.houfeng.net/&&Textor&/a&
&img src=&/images/logo-large.png&
style=&left: 3 top: -10 width: 95px&&
&a href=&/f8456&&PHP Assist&/a&
&div class=&text-logo&&Dillinger&/div&
&a href=&http://dillinger.io/&&Dillinger&/a&
&div class=&text-logo&&Evaluzio&/div&
&a href=&http://www.evaluzio.net/editor&&Evaluzio&/a&
&img style=&left: -10 width: 124 top: -8&
src=&/wp-content/uploads/2012/11/cc_shadow.png&&
&a href=&/&&CodeHelper&/a&
&div class=&text-logo&&Edicy&/div&
&a href=&/blog/new-code-editor-for-creating-unique-website-designs&&Edicy&/a&
&img src=&http://www.pixeljet.net/images/logo.png&
style=&width: 108 top: 20 left: -3&&
&a href=&http://www.pixeljet.net/index.html&&pixelJET&/a&
&div class=&text-logo&&Orbit&/div&
&a href=&http://orbit.bonsaijs.org/&&BonsaiJS playground&/a&
&img src=&/products/simplytext/logo-320x320.png&
style=&width: 106 left: -4 top: -22&&
&a href=&/products/simplytext&&Simply Text&/a&
&div class=&text-logo& style=&font-size: 18&&ShareLaTeX&/div&
&a href=&&&ShareLaTeX&/a&
&img src=&http://pagesofinterest.net/images/products/code-complete-140.png&
style=&left: -6 width: 113top: -37&&
&a href=&http://pagesofinterest.net/shop/code-complete&&Code Complete&/a&
&img src=&http://pagesofinterest.net/images/projects/aceview.png&
style=&left: 2 width: 96top: -8&&
&a href=&/faceleg/ACEView&&ACEView&/a&
&div class=&text-logo& style=&margin-left:-12&&BootTheme&/div&
&a href=&/&&BootTheme&/a&
&img src=&http://codebender.cc/images/codebender-transparent.png&
style=&left: -9 width: 117top: -22&&
&a href=&http://codebender.cc/&&Codebender&/a&
&div class=&text-logo& style=&margin-left:-5&&Debuggex&/div&
&a href=&&&Debuggex&/a&
&div style=&width:90 left:9 top:-6background:rgb(23,23,23);color:rgb(181,232,83);
font: 90px/90px Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', Terminal,
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(181, 232, 83, 0.1), 0 0 10px rgba(181, 232, 83, 0.1);
-webkit-font-smoothing: text-align: position:&&S&/div&
&a href=&http://slimtext.org/&&Slim Text&/a&
&img src=&https://www.decor-/_files/decor_logo_white_new.png&
style=&left: -5 width: 111top: 20&&
&a href=&https://www.decor-&&Decor&/a&
&img src='data:image/svg+base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTVweCIgaGVpZ2h0PSIxMTZweCIgdmlld0JveD0iLTAuMTc0IC0wLjMwNCA5NSAxMTYiPg0KPHBvbHlnb24gZmlsbD0iIzMzMzMzMyIgcG9pbnRzPSIzNy45MzMsMTE1LjM5MyAyMi42NTcsMTAwLjExNiA2My44OSw1OC44ODIgMjAuMjg5LDE1LjI3NiAzNS41NjcsMCA5NC40NDMsNTguODgyIj48L3BvbHlnb24+DQo8cG9seWdvbiBmaWxsPSIjM0ZBOUY1IiBwb2ludHM9IjI3LjQ1Nyw4NC42MzMgMCw1Ny4xNTQgMjYuMzk3LDMwLjc2IDM1LjY5Miw0MC4wNTggMTguNTksNTcuMTYgMzYuNzU3LDc1LjMzOSI+PC9wb2x5Z29uPg0KPC9zdmc+DQo='
style=&left: 12 width: 79top: -18&&
&a href=&/&&Divshot&/a&
ace.require(&ace/lib/dom&).importCssStylsheet(&/css?family=Henny+Penny&, document);
&div class=&text-logo& style=&margin-left:-17font-family:'Henny Penny',&&ChocolateJs&/div&
&a href=&https://chocolatejs.org&&Chocolatejs&/a&
&img src=&http://multiplay.io/images/logo.png&
style=&left: 4 width: 96top: -17&&
&a href=&http://multiPlay.io/&&MultiPlay.io&/a&
&div class=&text-logo& style=&font-size: 23&&Runnable&/div&
&a href=&&&Runnable&/a&
&div class=&text-logo& style=&font-size: 22margin-left: -5&&DocsCamp&/div&
&a href=&/&&DocsCamp&/a&
&img src=&http://joshnuss.github.io/mruby-web-irb/images/favicon.png&
style=&left: 4 width: 90top: -17&&
&a href=&http://joshnuss.github.io/mruby-web-irb/&&Mruby-web-irb&/a&
&div class=&text-logo& style=&margin-left:0&&Codiqa&/div&
&a href=&/&&Codiqa&/a&
&div class=&text-logo& style=&margin-left:0&&Jetstrap&/div&
&a href=&/&&Jetstrap&/a&
&li title=&Remote pair programming&&
&div class=&text-logo& style=&margin-left:0&&MadEye&/div&
&a href=&http://madeye.io/&&MadEye&/a&
&img src=&data:image/base64,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&
style=&left: 6 width: 86top: -6&&
&a href=&&&RealOJ&/a&
&li title=&WebRTC based video chat + code editor&&
&div class=&text-logo& style=&font-size: 18&&(codassium);&/div&
&a href=&/&&(codassium);&/a&
&img src=&data:image/base64,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}