Find file
Fetching contributors…
Cannot retrieve contributors at this time
246 lines (214 sloc) 11.3 KB
<html xmlns="">
<title>CodeMirror: In-browser code editing</title>
<link rel="stylesheet" type="text/css" href="css/docs.css"/>
<style type="text/css"> {text-align: center;} h1 {margin-bottom: 0;} h2 {margin-top: 0; margin-bottom: 1.5em;}
div.donate span {cursor: pointer; text-decoration: underline;}
div.donate {font-size: 70%; margin-top: 1em; width: 155px; padding: 10px; border: 1px solid #c44;}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<div class="top">
<h2 class="underline">In-browser code editing made almost bearable</h2>
<div style="float: right; padding-left: 10px;">
<img src="css/people.jpg" alt=""/><br/>
<div class="donate">
Make a donation:
<ul style="margin: 0 2em; padding: 0">
<li><span onclick="document.getElementById('paypal').submit();">Paypal</span></li>
<li><span onclick="document.getElementById('bankinfo').style.display = 'block';">Bank</span></li>
<div id="bankinfo" style="display: none; font-size: 80%;">
Bank: <i>Rabobank</i><br/>
Country: <i>Netherlands</i><br/>
SWIFT: <i>RABONL2U</i><br/>
Account: <i>147850770</i><br/>
Name: <i>Marijn Haverbeke</i><br/>
IBAN: <i>NL26 RABO 0147 8507 70</i>
<form action="" method="post" id="paypal">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
<p>CodeMirror is a JavaScript library that can be used to create a
relatively pleasant editor interface for code-like content &#x2015;
computer programs, HTML markup, and similar. If a parser has been
written for the language you are editing (see below for a list of
supported languages), the code will be coloured, and the editor will
help you with indentation.</p>
<p>To get a look at CodeMirror, see the test pages for the various
<li><a href="jstest.html">JavaScript</a></li>
<li><a href="htmltest.html">XML/HTML</a></li>
<li><a href="csstest.html">CSS</a></li>
<li><a href="sparqltest.html">SPARQL</a></li>
<li><a href="mixedtest.html">HTML mixed-mode</a></li>
<li><a href="contrib/php/index.html">HTML+PHP mixed-mode</a> (courtesy of <a href="contrib/php/LICENSE">Yahoo!</a>)</li>
<li><a href="contrib/python/index.html">Python</a> (by <a href="contrib/python/LICENSE">Timothy Farrell</a>)</li>
<li><a href="contrib/lua/index.html">Lua</a> (by <a href="">Franciszek Wawrzak</a>)</li>
<li><a href="">Ruby</a> (by Michal Hantl, unfinished)</li>
<li><a href="contrib/sql/index.html">SQL</a> (by John Benediktsson)</li>
<li><a href="contrib/plsql/index.html">PLSQL</a> (by <a href="">Peter Raganitsch</a>)</li>
<li><a href="">diff</a> (courtesy of <a href="">Liran Nuna</a>)</li>
<li><a href="contrib/groovy/index.html">Groovy</a> (by <a href="">eXo Platform</a>)</li>
<li><a href="contrib/csharp/index.html">C#</a> (by <a href="">Boris Gaber and Christopher Buchino</a>)</li>
<li><a href="contrib/ometa/index.html">OmetaJS</a> (by <a href="">Eric KEDJI</a>)</li>
<li><a href="contrib/scheme/index.html">Scheme</a> (by <a href="">Danny Yoo</a>)</li>
<p>Or take a look at some real-world uses of the system...</p>
<li><a href="">Google Earth KML sampler</a></li>
<li><a href="">Eloquent JavaScript's console</a></li>
<li><a href="">The qooxdoo playground</a></li>
<li><a href="">A cool tutorial about the &lt;canvas> element</a></li>
<li><a href="">An online IDE for the Orc programming language</a></li>
<li><a href="">Google's API playground</a></li>
<li><a href="">Raphaël Live</a></li>
<li><a href="">JS Bin</a></li>
<li><a href="">The RokPad plugin for Joomla</a></li>
<li><a href="">The scraperwiki editor</a></li>
<li><a href="">jsLinb UI Builder</a></li>
<p class="rel"><em>22-07-2010</em>: <a
<ul class="rel">
<li>Add a <code>cursorCoords</code> method to find the screen
coordinates of the cursor.</li>
<li>A number of fixes and support for more syntax in the PHP parser.</li>
<li>Fix indentation problem with JSON-mode JS parser in Webkit.</li>
<li>Add a <a href="compress.html">minification</a> UI.</li>
<li>Support a <code>height: dynamic</code> mode, where the editor's
height will adjust to the size of its content.</li>
<li>Better support for IME input mode.</li>
<li>Fix JavaScript parser getting confused when seeing a no-argument
function call.</li>
<li>Have CSS parser see the difference between selectors and other
<li>Fix scrolling bug when pasting in a horizontally-scrolled
<li>Support <code>toTextArea</code> method in instances created with
<li>Work around new Opera cursor bug that causes the cursor to jump
when pressing backspace at the end of a line.</li>
<p class="rel"><em>21-06-2010</em>: <a
<ul class="rel">
<li>Fixes issue where calling <code>.submit()</code> on a form with
a <code>fromTextArea</code> CodeMirror failed to submit the
edited content.</li>
<li>Add <a href="contrib/groovy/index.html">Groovy</a> parser (hosted externally).</li>
<li>Make line-numbering much, much faster.</li>
<li>Fix occasional buggy behaviour of the enter key in Opera.</li>
<li>Add a <a href="faq.html">FAQ</a> document.</li>
<li>Make search use do-what-I-mean Emacs-like behaviour to determine
case-sensitivitiy is not explicitly specified.</li>
<li>Add a C# parser contrib module.</li>
<li>A number of bugfixes and extensions to the PHP parser (lambdas,
abstract classes, configurable opening tags).</li>
<li>Fix multiline comments in the Lua parser.</li>
<p class="rel"><em>27-04-2010</em>: <a
0.67</a>: More consistent page-up/page-down behaviour across browsers.
Fix some issues with hidden editors looping forever when line-numbers
were enabled. Make PHP parser parse <code>"\\"</code> correctly. Have
<code>jumpToLine</code> work on line handles, and add
<code>cursorLine</code> function to fetch the line handle where the
cursor currently is. Add new <code>setStylesheet</code> function to
switch style-sheets in a running editor.</p>
<p class="rel"><em>01-03-2010</em>: <a
0.66</a>: Adds <code>removeLine</code> method to API. Introduces the
<a href="contrib/plsql/index.html">PLSQL parser</a>. Marks XML errors
by adding (rather than replacing) a CSS class, so that they can be
disabled by modifying their style. Fixes several selection bugs, and a
number of small glitches.</p>
<p class="rel"><em>12-11-2009</em>: <a
0.65</a>: Add support for having both line-wrapping and line-numbers
turned on, make paren-highlighting style customisable
(<code>markParen</code> and <code>unmarkParen</code> config options),
work around a selection bug that Opera <em>re</em>introduced in
version 10.</p>
<p class="rel"><em>23-10-2009</em>: <a
0.64</a>: Solves some issues introduced by the paste-handling changes
from the previous release. Adds <code>setSpellcheck</code>,
<code>setTextWrapping</code>, <code>setIndentUnit</code>,
<code>setUndoDepth</code>, <code>setTabMode</code>, and
<code>setLineNumbers</code> to customise a running editor. Introduces
an <a href="contrib/sql/index.html">SQL</a> parser. Fixes a few small
problems in the <a href="contrib/python/index.html">Python</a> parser.
And, as usual, add workarounds for various newly discovered browser
<p class="rel"><em>31-08-2009</em>: <a
0.63</a>: Overhaul of paste-handling (less fragile), fixes for several
serious IE8 issues (cursor jumping, end-of-document bugs) and a number
of small problems.</p>
<p class="rel"><em>30-05-2009</em>: <a
0.62</a>: Introduces <a href="contrib/python/index.html">Python</a>
and <a href="contrib/lua/index.html">Lua</a> parsers. Add
<code>setParser</code> (on-the-fly mode changing) and
<code>clearHistory</code> methods. Make parsing passes time-based
instead of lines-based (see the <code>passTime</code> option).</p>
<h2 id="supported">Supported browsers</h2>
<p>At this time, the following browsers are supported:</p>
<li>Firefox 1.5 or higher</li>
<li>Internet Explorer 6 or higher</li>
<li>Safari 3 or higher</li>
<li>Opera 9.52 or higher</li>
<p>Making it work on other browsers that have decent support for the
W3C DOM model should not be too hard, but I am not actively testing
against those.</p>
<h2>Getting the code</h2>
<p>All of CodeMirror is released under a <a
href="LICENSE">zlib-style</a> license. To get it, you can download the
<a href="">latest
release</a> or the current <a
snapshot</a> as zip files, try the <a href="compress.html">compression
API</a> to create a compressed version, or use <a
href="">git</a> to get the repository:</p>
<pre class="code">git clone</pre>
<p>This second method is recommended if you are planning to hack on
CodeMirror &#x2015; it makes it easy to record your patches and share
them with me. CodeMirror can also be found on GitHub: <a
<p>There is a <a
href="">Google group</a> (a
sort of mailing list/newsgroup thingy) for discussion and news related
to CodeMirror. Please check the <a href="faq.html">FAQ</a> before
asking a questoin. You can also e-mail me directly: <a
href="">Marijn Haverbeke</a>.</p>
<li>The <a href="manual.html">manual</a> is all most users will need
to read (or skim).</li>
<li>If you're interested in working on the code, <a
href="story.html">this document</a> about CodeMirror's architecture
will be useful.</li>
<li>The <a href="">source
code</a> is, for the most part, rather well commented, so if all
else fails, you can try reading it.</li>