1
<html xmlns="http://www.w3.org/1999/xhtml">
3
<title>CodeMirror: In-browser code editing</title>
5
<link rel="stylesheet" type="text/css" href="css/docs.css"/>
6
<style type="text/css">
7
div.top {text-align: center;}
8
div.top h1 {margin-bottom: 0;}
9
div.top h2 {margin-top: 0; margin-bottom: 1.5em;}
10
div.donate span {cursor: pointer; text-decoration: underline;}
11
div.donate {font-size: 70%; margin-top: 1em; width: 155px; padding: 10px; border: 1px solid #c44;}
13
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
19
<h2 class="underline">In-browser code editing made almost bearable</h2>
21
<div style="float: right; padding-left: 10px;">
22
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
23
<input type="hidden" name="cmd" value="_s-xclick"/>
24
<input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
26
<img src="css/people.jpg" alt=""/><br/>
29
<ul style="margin: 0 2em; padding: 0">
30
<li><span onclick="document.getElementById('paypal').submit();">Paypal</span></li>
31
<li><span onclick="document.getElementById('bankinfo').style.display = 'block';">Bank</span></li>
33
<div id="bankinfo" style="display: none; font-size: 80%;">
34
Bank: <i>Rabobank</i><br/>
35
Country: <i>Netherlands</i><br/>
36
SWIFT: <i>RABONL2U</i><br/>
37
Account: <i>147850770</i><br/>
38
Name: <i>Marijn Haverbeke</i><br/>
39
IBAN: <i>NL26 RABO 0147 8507 70</i>
44
<p>CodeMirror is a JavaScript library that can be used to create a
45
relatively pleasant editor interface for code-like content ―
46
computer programs, HTML markup, and similar. If a parser has been
47
written for the language you are editing (see below for a list of
48
supported languages), the code will be coloured, and the editor will
49
help you with indentation.</p>
51
<p>To get a look at CodeMirror, see the test pages for the various
55
<li><a href="jstest.html">JavaScript</a></li>
56
<li><a href="htmltest.html">XML/HTML</a></li>
57
<li><a href="csstest.html">CSS</a></li>
58
<li><a href="sparqltest.html">SPARQL</a></li>
59
<li><a href="mixedtest.html">HTML mixed-mode</a></li>
60
<li><a href="contrib/php/index.html">HTML+PHP mixed-mode</a> (courtesy of <a href="contrib/php/LICENSE">Yahoo!</a>)</li>
61
<li><a href="contrib/python/index.html">Python</a> (courtesy of <a href="contrib/python/LICENSE">Timothy Farrell</a>)</li>
62
<li><a href="contrib/lua/index.html">Lua</a> (courtesy of <a href="http://francio.pl/">Franciszek Wawrzak</a>)</li>
63
<li><a href="http://github.com/hakunin/ruby-in-codemirror/tree/master">Ruby</a> (by Michal Hantl, unfinished)</li>
64
<li><a href="contrib/sql/index.html">SQL</a> (courtesy of John Benediktsson)</li>
65
<li><a href="contrib/plsql/index.html">PLSQL</a> (courtesy of <a href="http://www.oracle-and-apex.com/">Peter Raganitsch</a>)</li>
66
<li><a href="http://www.liranuna.com/diff-parser-for-codemirror/">diff</a> (courtesy of <a href="http://www.liranuna.com">Liran Nuna</a>)</li>
69
<p>Or take a look at some real-world uses of the system...</p>
72
<li><a href="http://kml-samples.googlecode.com/svn/trunk/interactive/index.html">Google Earth KML sampler</a></li>
73
<li><a href="http://eloquentjavascript.net/chapter1.html">Eloquent JavaScript's console</a></li>
74
<li><a href="http://demo.qooxdoo.org/current/playground/#Hello_World">The qooxdoo playground</a></li>
75
<li><a href="http://billmill.org/static/canvastutorial/index.html">A cool tutorial about the <canvas> element</a></li>
76
<li><a href="http://orc.csres.utexas.edu/tryorc.shtml">An online IDE for the Orc programming language</a></li>
77
<li><a href="http://code.google.com/apis/ajax/playground">Google's API playground</a></li>
78
<li><a href="http://sandbox.livesitehost.com/livesite/index.php?u=admin&p=admin&send_to=/livesite/add_style.php">The liveSite CMS style editor</a></li>
79
<li><a href="http://craic.com/tutorials/javascript/raphael_live/raphael_live.html">Raphaël Live</a></li>
80
<li><a href="http://dev.freebaseapps.com/">Freebase's Acre IDE</a></li>
81
<li><a href="http://jsbin.com/">JS Bin</a></li>
82
<li><a href="http://www.rockettheme.com/extensions-joomla/rokpad">The RokPad plugin for Joomla</a></li>
87
<p class="rel"><em>27-04-2010</em>: <a
88
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.67.zip">Version
89
0.67</a>: More consistent page-up/page-down behaviour across browsers.
90
Fix some issues with hidden editors looping forever when line-numbers
91
were enabled. Make PHP parser parse <code>"\\"</code> correctly. Have
92
<code>jumpToLine</code> work on line handles, and add
93
<code>cursorLine</code> function to fetch the line handle where the
94
cursor currently is. Add new <code>setStylesheet</code> function to
95
switch style-sheets in a running editor.</p>
97
<p class="rel"><em>01-03-2010</em>: <a
98
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.66.zip">Version
99
0.66</a>: Adds <code>removeLine</code> method to API. Introduces the
100
<a href="contrib/plsql/index.html">PLSQL parser</a>. Marks XML errors
101
by adding (rather than replacing) a CSS class, so that they can be
102
disabled by modifying their style. Fixes several selection bugs, and a
103
number of small glitches.</p>
105
<p class="rel"><em>12-11-2009</em>: <a
106
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.65.zip">Version
107
0.65</a>: Add support for having both line-wrapping and line-numbers
108
turned on, make paren-highlighting style customisable
109
(<code>markParen</code> and <code>unmarkParen</code> config options),
110
work around a selection bug that Opera <em>re</em>introduced in
113
<p class="rel"><em>23-10-2009</em>: <a
114
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.64.zip">Version
115
0.64</a>: Solves some issues introduced by the paste-handling changes
116
from the previous release. Adds <code>setSpellcheck</code>,
117
<code>setTextWrapping</code>, <code>setIndentUnit</code>,
118
<code>setUndoDepth</code>, <code>setTabMode</code>, and
119
<code>setLineNumbers</code> to customise a running editor. Introduces
120
an <a href="contrib/sql/index.html">SQL</a> parser. Fixes a few small
121
problems in the <a href="contrib/python/index.html">Python</a> parser.
122
And, as usual, add workarounds for various newly discovered browser
123
incompatibilities.</p>
125
<p class="rel"><em>31-08-2009</em>: <a
126
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.63.zip">Version
127
0.63</a>: Overhaul of paste-handling (less fragile), fixes for several
128
serious IE8 issues (cursor jumping, end-of-document bugs) and a number
129
of small problems.</p>
131
<p class="rel"><em>30-05-2009</em>: <a
132
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.62.zip">Version
133
0.62</a>: Introduces <a href="contrib/python/index.html">Python</a>
134
and <a href="contrib/lua/index.html">Lua</a> parsers. Add
135
<code>setParser</code> (on-the-fly mode changing) and
136
<code>clearHistory</code> methods. Make parsing passes time-based
137
instead of lines-based (see the <code>passTime</code> option).</p>
139
<p class="rel"><em>04-03-2009</em>: <a
140
href="http://marijn.haverbeke.nl/codemirror/codemirror-0.61.zip">Version
141
0.61</a>: Add line numbers support (see <code>lineNumbers</code>
142
option in <a href="manual.html">manual</a>). Support a mode where tab
143
'shifts' indentation instead of resetting it (see
144
<code>tabMode="shift"</code>). Add <code>indentUnit</code> option to
145
configure indentation depths. Make it possible to grab the editor's
146
keyboard input, which is useful when popping up dialogs (see
147
<code>grabKeys</code>/<code>ungrabKeys</code>). Fix a lot of small
148
bugs, among which the various issues related to pasting in Internet
151
<h2 id="supported">Supported browsers</h2>
153
<p>At this time, the following browsers are supported:</p>
156
<li>Firefox 1.5 or higher</li>
157
<li>Internet Explorer 6 or higher</li>
158
<li>Safari 3 or higher</li>
159
<li>Opera 9.52 or higher</li>
163
<p>Making it work on other browsers that have decent support for the
164
W3C DOM model should not be too hard, but I am not actively testing
167
<h2>Getting the code</h2>
169
<p>All of CodeMirror is released under a <a
170
href="LICENSE">zlib-style</a> license. To get it, you can download the
171
<a href="http://marijn.haverbeke.nl/codemirror/codemirror.zip">latest
172
release</a> or the current <a
173
href="http://marijn.haverbeke.nl/codemirror/codemirror-latest.zip">development
174
snapshot</a> as zip files, or use <a
175
href="http://git-scm.com/">git</a> to get the repository:</p>
177
<pre class="code">git clone http://marijn.haverbeke.nl/codemirror/.git</pre>
179
<p>This second method is recommended if you are planning to hack on
180
CodeMirror ― it makes it easy to record your patches and share
181
them with me. CodeMirror can also be found on GitHub: <a
182
href="http://github.com/marijnh/CodeMirror">http://github.com/marijnh/CodeMirror</a>.</p>
187
href="http://groups.google.com/group/codemirror">Google group</a> (a
188
sort of mailing list/newsgroup thingy) for discussion and news related
189
to CodeMirror. You can also e-mail me directly: <a
190
href="mailto:marijnh@gmail.com">Marijn Haverbeke</a>.</p>
192
<h2>Documentation</h2>
195
<li>The <a href="manual.html">manual</a> is all most users will need
196
to read (or skim).</li>
197
<li>If you're interested in working on the code, <a
198
href="story.html">this document</a> about CodeMirror's architecture
200
<li>The <a href="http://github.com/marijnh/CodeMirror">source
201
code</a> is, for the most part, rather well commented, so if all
202
else fails, you can try reading it.</li>
added
removed
ivle/webapp/filesystem/browser/media/codemirror/index.html
