index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>CodeMirror: In-browser code editing</title>
  4. <link rel="stylesheet" type="text/css" href="css/docs.css"/>
  5. <style type="text/css">
  6. div.top {text-align: center;}
  7. div.top h1 {margin-bottom: 0;}
  8. div.top h2 {margin-top: 0; margin-bottom: 1.5em;}
  9. div.donate span {cursor: pointer; text-decoration: underline;}
  10. div.donate {font-size: 70%; margin-top: 1em; width: 155px; padding: 10px; border: 1px solid #c44;}
  11. </style>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  13. </head>
  14. <body>
  15. <div class="top">
  16. <h1>CodeMirror</h1>
  17. <h2 class="underline">In-browser code editing made almost bearable</h2>
  18. </div>
  19. <div style="float: right; padding-left: 10px;">
  20. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
  21. <input type="hidden" name="cmd" value="_s-xclick"/>
  22. <input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
  23. </form>
  24. <img src="css/people.jpg" alt=""/><br/>
  25. <div class="donate">
  26. Make a donation:
  27. <ul style="margin: 0 2em; padding: 0">
  28. <li><span onclick="document.getElementById('paypal').submit();">Paypal</span></li>
  29. <li><span onclick="document.getElementById('bankinfo').style.display = 'block';">Bank</span></li>
  30. </ul>
  31. <div id="bankinfo" style="display: none; font-size: 80%;">
  32. Bank: <i>Rabobank</i><br/>
  33. Country: <i>Netherlands</i><br/>
  34. SWIFT: <i>RABONL2U</i><br/>
  35. Account: <i>147850770</i><br/>
  36. Name: <i>Marijn Haverbeke</i><br/>
  37. IBAN: <i>NL26 RABO 0147 8507 70</i>
  38. </div>
  39. </div>
  40. </div>
  41. <p>CodeMirror is a JavaScript library that can be used to create a
  42. relatively pleasant editor interface for code-like content &#x2015;
  43. computer programs, HTML markup, and similar. If a parser has been
  44. written for the language you are editing (see below for a list of
  45. supported languages), the code will be coloured, and the editor will
  46. help you with indentation.</p>
  47. <p>To get a look at CodeMirror, see the test pages for the various
  48. parsers...</p>
  49. <ul>
  50. <li><a href="jstest.html">JavaScript</a></li>
  51. <li><a href="htmltest.html">XML/HTML</a></li>
  52. <li><a href="csstest.html">CSS</a></li>
  53. <li><a href="sparqltest.html">SPARQL</a></li>
  54. <li><a href="mixedtest.html">HTML mixed-mode</a></li>
  55. <li><a href="contrib/php/index.html">HTML+PHP mixed-mode</a> (courtesy of <a href="contrib/php/LICENSE">Yahoo!</a>)</li>
  56. <li><a href="contrib/python/index.html">Python</a> (courtesy of <a href="contrib/python/LICENSE">Timothy Farrell</a>)</li>
  57. <li><a href="contrib/lua/index.html">Lua</a> (courtesy of <a href="http://francio.pl/">Franciszek Wawrzak</a>)</li>
  58. <li><a href="http://github.com/hakunin/ruby-in-codemirror/tree/master">Ruby</a> (by Michal Hantl, unfinished)</li>
  59. <li><a href="contrib/sql/index.html">SQL</a> (courtesy of John Benediktsson)</li>
  60. <li><a href="contrib/plsql/index.html">PLSQL</a> (courtesy of <a href="http://www.oracle-and-apex.com/">Peter Raganitsch</a>)</li>
  61. <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>
  62. <li><a href="contrib/groovy/index.html">Groovy</a> (by <a href="http://exoplatform.org/">eXo Platform</a>)</li>
  63. <li><a href="contrib/csharp/index.html">C#</a> (by <a href="http://skilltesting.com/">Boris Gaber and Christopher Buchino</a>)</li>
  64. </ul>
  65. <p>Or take a look at some real-world uses of the system...</p>
  66. <ul>
  67. <li><a href="http://kml-samples.googlecode.com/svn/trunk/interactive/index.html">Google Earth KML sampler</a></li>
  68. <li><a href="http://eloquentjavascript.net/chapter1.html">Eloquent JavaScript's console</a></li>
  69. <li><a href="http://demo.qooxdoo.org/current/playground/#Hello_World">The qooxdoo playground</a></li>
  70. <li><a href="http://billmill.org/static/canvastutorial/index.html">A cool tutorial about the &lt;canvas> element</a></li>
  71. <li><a href="http://orc.csres.utexas.edu/tryorc.shtml">An online IDE for the Orc programming language</a></li>
  72. <li><a href="http://code.google.com/apis/ajax/playground">Google's API playground</a></li>
  73. <li><a href="http://craic.com/tutorials/javascript/raphael_live/raphael_live.html">Raphaël Live</a></li>
  74. <li><a href="http://dev.freebaseapps.com/">Freebase's Acre IDE</a></li>
  75. <li><a href="http://jsbin.com/">JS Bin</a></li>
  76. <li><a href="http://www.rockettheme.com/extensions-joomla/rokpad">The RokPad plugin for Joomla</a></li>
  77. <li><a href="http://scraperwiki.com/editor/">The scraperwiki editor</a></li>
  78. </ul>
  79. <h2>Releases</h2>
  80. <p class="rel"><em>22-07-2010</em>: <a
  81. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.8.zip">Version
  82. 0.8</a>:</p>
  83. <ul class="rel">
  84. <li>Add a <code>cursorCoords</code> method to find the screen
  85. coordinates of the cursor.</li>
  86. <li>A number of fixes and support for more syntax in the PHP parser.</li>
  87. <li>Fix indentation problem with JSON-mode JS parser in Webkit.</li>
  88. <li>Add a <a href="compress.html">minification</a> UI.</li>
  89. <li>Support a <code>height: dynamic</code> mode, where the editor's
  90. height will adjust to the size of its content.</li>
  91. <li>Better support for IME input mode.</li>
  92. <li>Fix JavaScript parser getting confused when seeing a no-argument
  93. function call.</li>
  94. <li>Have CSS parser see the difference between selectors and other
  95. identifiers.</li>
  96. <li>Fix scrolling bug when pasting in a horizontally-scrolled
  97. editor.</li>
  98. <li>Support <code>toTextArea</code> method in instances created with
  99. <code>fromTextArea</code>.</li>
  100. <li>Work around new Opera cursor bug that causes the cursor to jump
  101. when pressing backspace at the end of a line.</li>
  102. </ul>
  103. <p class="rel"><em>21-06-2010</em>: <a
  104. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.7.zip">Version
  105. 0.7</a>:</p>
  106. <ul class="rel">
  107. <li>Fixes issue where calling <code>.submit()</code> on a form with
  108. a <code>fromTextArea</code> CodeMirror failed to submit the
  109. edited content.</li>
  110. <li>Add <a href="contrib/groovy/index.html">Groovy</a> parser (hosted externally).</li>
  111. <li>Make line-numbering much, much faster.</li>
  112. <li>Fix occasional buggy behaviour of the enter key in Opera.</li>
  113. <li>Add a <a href="faq.html">FAQ</a> document.</li>
  114. <li>Make search use do-what-I-mean Emacs-like behaviour to determine
  115. case-sensitivitiy is not explicitly specified.</li>
  116. <li>Add a C# parser contrib module.</li>
  117. <li>A number of bugfixes and extensions to the PHP parser (lambdas,
  118. abstract classes, configurable opening tags).</li>
  119. <li>Fix multiline comments in the Lua parser.</li>
  120. </ul>
  121. <p class="rel"><em>27-04-2010</em>: <a
  122. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.67.zip">Version
  123. 0.67</a>: More consistent page-up/page-down behaviour across browsers.
  124. Fix some issues with hidden editors looping forever when line-numbers
  125. were enabled. Make PHP parser parse <code>"\\"</code> correctly. Have
  126. <code>jumpToLine</code> work on line handles, and add
  127. <code>cursorLine</code> function to fetch the line handle where the
  128. cursor currently is. Add new <code>setStylesheet</code> function to
  129. switch style-sheets in a running editor.</p>
  130. <p class="rel"><em>01-03-2010</em>: <a
  131. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.66.zip">Version
  132. 0.66</a>: Adds <code>removeLine</code> method to API. Introduces the
  133. <a href="contrib/plsql/index.html">PLSQL parser</a>. Marks XML errors
  134. by adding (rather than replacing) a CSS class, so that they can be
  135. disabled by modifying their style. Fixes several selection bugs, and a
  136. number of small glitches.</p>
  137. <p class="rel"><em>12-11-2009</em>: <a
  138. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.65.zip">Version
  139. 0.65</a>: Add support for having both line-wrapping and line-numbers
  140. turned on, make paren-highlighting style customisable
  141. (<code>markParen</code> and <code>unmarkParen</code> config options),
  142. work around a selection bug that Opera <em>re</em>introduced in
  143. version 10.</p>
  144. <p class="rel"><em>23-10-2009</em>: <a
  145. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.64.zip">Version
  146. 0.64</a>: Solves some issues introduced by the paste-handling changes
  147. from the previous release. Adds <code>setSpellcheck</code>,
  148. <code>setTextWrapping</code>, <code>setIndentUnit</code>,
  149. <code>setUndoDepth</code>, <code>setTabMode</code>, and
  150. <code>setLineNumbers</code> to customise a running editor. Introduces
  151. an <a href="contrib/sql/index.html">SQL</a> parser. Fixes a few small
  152. problems in the <a href="contrib/python/index.html">Python</a> parser.
  153. And, as usual, add workarounds for various newly discovered browser
  154. incompatibilities.</p>
  155. <p class="rel"><em>31-08-2009</em>: <a
  156. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.63.zip">Version
  157. 0.63</a>: Overhaul of paste-handling (less fragile), fixes for several
  158. serious IE8 issues (cursor jumping, end-of-document bugs) and a number
  159. of small problems.</p>
  160. <p class="rel"><em>30-05-2009</em>: <a
  161. href="http://marijn.haverbeke.nl/codemirror/codemirror-0.62.zip">Version
  162. 0.62</a>: Introduces <a href="contrib/python/index.html">Python</a>
  163. and <a href="contrib/lua/index.html">Lua</a> parsers. Add
  164. <code>setParser</code> (on-the-fly mode changing) and
  165. <code>clearHistory</code> methods. Make parsing passes time-based
  166. instead of lines-based (see the <code>passTime</code> option).</p>
  167. <h2 id="supported">Supported browsers</h2>
  168. <p>At this time, the following browsers are supported:</p>
  169. <ul>
  170. <li>Firefox 1.5 or higher</li>
  171. <li>Internet Explorer 6 or higher</li>
  172. <li>Safari 3 or higher</li>
  173. <li>Opera 9.52 or higher</li>
  174. <li>Chrome</li>
  175. </ul>
  176. <p>Making it work on other browsers that have decent support for the
  177. W3C DOM model should not be too hard, but I am not actively testing
  178. against those.</p>
  179. <h2>Getting the code</h2>
  180. <p>All of CodeMirror is released under a <a
  181. href="LICENSE">zlib-style</a> license. To get it, you can download the
  182. <a href="http://marijn.haverbeke.nl/codemirror/codemirror.zip">latest
  183. release</a> or the current <a
  184. href="http://marijn.haverbeke.nl/codemirror/codemirror-latest.zip">development
  185. snapshot</a> as zip files, try the <a href="compress.html">compression
  186. API</a> to create a compressed version, or use <a
  187. href="http://git-scm.com/">git</a> to get the repository:</p>
  188. <pre class="code">git clone http://marijn.haverbeke.nl/codemirror/.git</pre>
  189. <p>This second method is recommended if you are planning to hack on
  190. CodeMirror &#x2015; it makes it easy to record your patches and share
  191. them with me. CodeMirror can also be found on GitHub: <a
  192. href="http://github.com/marijnh/CodeMirror">http://github.com/marijnh/CodeMirror</a>.</p>
  193. <h2>Support</h2>
  194. <p>There is a <a
  195. href="http://groups.google.com/group/codemirror">Google group</a> (a
  196. sort of mailing list/newsgroup thingy) for discussion and news related
  197. to CodeMirror. Please check the <a href="faq.html">FAQ</a> before
  198. asking a questoin. You can also e-mail me directly: <a
  199. href="mailto:marijnh@gmail.com">Marijn Haverbeke</a>.</p>
  200. <h2>Documentation</h2>
  201. <ul>
  202. <li>The <a href="manual.html">manual</a> is all most users will need
  203. to read (or skim).</li>
  204. <li>If you're interested in working on the code, <a
  205. href="story.html">this document</a> about CodeMirror's architecture
  206. will be useful.</li>
  207. <li>The <a href="http://github.com/marijnh/CodeMirror">source
  208. code</a> is, for the most part, rather well commented, so if all
  209. else fails, you can try reading it.</li>
  210. </ul>
  211. </body>
  212. </html>