Code Editing in the
Browser

 

  • ACE (http://ace.ajax.org)
  • Orion (http://www.eclipse.org/orion/)
  • CodeMirror (http://codemirror.net/)

Why?

http://eloquentjavascript.net

  • Orion & CodeMirror v1:
                rely on contentEditable
  • ACE & CodeMirror v2:
                fake everything

The cursor is a lie

Small core, powerful API

What can you do with an API?

Language modes

 
function token(state, stream) → string
 

function startState() → state
function token(state, stream) → string
 

function startState() → state
function token(state, stream) → string
function indent(state, line) → column

Recognize local variables

Spot mismatched tags

Composing modes

C, C#, Clojure, CoffeeScript, CSS, diff, Groovy, Haskell, HTML, Java, JavaScript, Jinja2, Lua, Markdown, NTriples, Pascal, Perl, PHP, PL/SQL, Python, R, reStructuredText, Ruby, Rust, Scheme, Smalltalk, SPARQL, LaTeX, Velocity, XML, YAML

Doubly-indexed B-tree
Instant CS cred!

Index both by line number and by vertical offset

That's all

Questions?

(If there is time...)

@marijnjh   marijnh

 http://codemirror.net