index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>CodeMirror</title>
  5. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
  6. <link rel="stylesheet" type="text/css" href="css/docs.css"/>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <link rel="alternate" href="http://twitter.com/statuses/user_timeline/242283288.rss" type="application/rss+xml"/>
  9. </head>
  10. <body>
  11. <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
  12. <pre class="grey">
  13. <img src="css/baboon.png" class="logo" alt="logo"/>/* In-browser code editing
  14. made bearable */
  15. </pre>
  16. <div class="clear"><div class="left blk">
  17. <p style="margin-top: 0">CodeMirror is a JavaScript library that can
  18. be used to create a relatively pleasant editor interface for
  19. code-like content &#x2015; computer programs, HTML markup, and
  20. similar. If a mode has been written for the language you are
  21. editing, the code will be coloured, and the editor will optionally
  22. help you with indentation.</p>
  23. <p>This is the project page for CodeMirror 2, the currently more
  24. actively developed, and recommended
  25. version. <a href="1/index.html">CodeMirror 1</a> is still available
  26. from here.</p>
  27. <div class="clear"><div class="left1 blk">
  28. <h2 style="margin-top: 0">Supported modes:</h2>
  29. <ul>
  30. <li><a href="mode/javascript/index.html">JavaScript</a></li>
  31. <li><a href="mode/xml/index.html">XML/HTML</a></li>
  32. <li><a href="mode/css/index.html">CSS</a></li>
  33. <li><a href="mode/htmlmixed/index.html">HTML mixed-mode</a></li>
  34. <li><a href="mode/python/index.html">Python</a></li>
  35. <li><a href="mode/php/index.html">PHP</a></li>
  36. <li><a href="mode/diff/index.html">diff</a></li>
  37. <li><a href="mode/clike/index.html">C, Java, C#, and similar</a></li>
  38. <li><a href="mode/stex/index.html">sTeX, LaTeX</a></li>
  39. <li><a href="mode/haskell/index.html">Haskell</a></li>
  40. <li><a href="mode/smalltalk/index.html">Smalltalk</a></li>
  41. <li><a href="mode/plsql/index.html">PL/SQL</a></li>
  42. <li><a href="mode/lua/index.html">Lua</a></li>
  43. <li><a href="mode/scheme/index.html">Scheme</a></li>
  44. <li><a href="mode/rst/index.html">reStructuredText</a></li>
  45. <li><a href="mode/yaml/index.html">YAML</a></li>
  46. <li><a href="mode/sparql/index.html">SPARQL</a></li>
  47. </ul>
  48. </div><div class="left2 blk">
  49. <h2 style="margin-top: 0">Usage demos:</h2>
  50. <ul>
  51. <li><a href="demo/complete.html">Autocompletion</a></li>
  52. <li><a href="demo/mustache.html">Mode overlays</a></li>
  53. <li><a href="demo/search.html">Search/replace</a></li>
  54. <li><a href="demo/preview.html">HTML editor with preview</a></li>
  55. <li><a href="demo/resize.html">Auto-resizing editor</a></li>
  56. <li><a href="demo/marker.html">Setting breakpoints</a></li>
  57. <li><a href="demo/activeline.html">Highlighting the current line</a></li>
  58. <li><a href="demo/theme.html">Theming</a></li>
  59. <li><a href="demo/runmode.html">Stand-alone highlighting</a></li>
  60. <li><a href="demo/fullscreen.html">Full-screen editing</a></li>
  61. <li><a href="demo/changemode.html">Mode auto-changing</a></li>
  62. </ul>
  63. </div></div>
  64. <h2 id="code">Getting the code</h2>
  65. <p>All of CodeMirror is released under a <a
  66. href="LICENSE">MIT-style</a> license. To get it, you can download
  67. the <a href="http://codemirror.net/codemirror.zip">latest
  68. release</a> or the current <a
  69. href="http://codemirror.net/codemirror2-latest.zip">development
  70. snapshot</a> as zip files. To create a custom minified script file,
  71. you can use the <a href="compress.html">compression API</a>.</p>
  72. <p>We use <a href="http://git-scm.com/">git</a> for version control.
  73. The main repository can be fetched in this way:</p>
  74. <pre class="code">git clone http://marijnhaverbeke.nl/git/codemirror2</pre>
  75. <p>CodeMirror can also be found on GitHub at <a
  76. href="http://github.com/marijnh/CodeMirror2">marijnh/CodeMirror2</a>.
  77. If you plan to hack on the code and contribute patches, the best way
  78. to do it is to create a GitHub fork, and send pull requests.</p>
  79. <h2 id="documention">Documentation</h2>
  80. <p>The <a href="manual.html">manual</a> is your first stop for
  81. learning how to use this library. It starts with a quick explanation
  82. of how to use the editor, and then describes all of the (many)
  83. options and methods that CodeMirror exposes.</p>
  84. <p>For those who want to learn more about the code, there is
  85. an <a href="internals.html">overview of the internals</a> available.
  86. The <a href="http://github.com/marijnh/CodeMirror2">source code</a>
  87. itself is, for the most part, also well commented.</p>
  88. <h2 id="support">Support and bug reports</h2>
  89. <p>There is
  90. a <a href="http://groups.google.com/group/codemirror">Google
  91. group</a> (a sort of mailing list/newsgroup thing) for discussion
  92. and news related to CodeMirror. Reporting bugs is best done
  93. on <a href="http://github.com/marijnh/CodeMirror2/issues">github</a>.
  94. You can also e-mail me
  95. directly: <a href="mailto:marijnh@gmail.com">Marijn
  96. Haverbeke</a>.</p>
  97. <h2 id="supported">Supported browsers</h2>
  98. <p>The following browsers are able to run CodeMirror:</p>
  99. <ul>
  100. <li>Firefox 2 or higher</li>
  101. <li>Chrome, any version</li>
  102. <li>Safari 3 or higher</li>
  103. <li>Internet Explorer 6 or higher</li>
  104. <li>Opera 9 or higher (with some key-handling problems on OS X)</li>
  105. </ul>
  106. <p>I am not actively testing against every new browser release, and
  107. vendors have a habit of introducing bugs all the time, so I am
  108. relying on the community to tell me when something breaks.
  109. See <a href="#support">here</a> for information on how to contact
  110. me.</p>
  111. </div>
  112. <div class="right blk">
  113. <a href="http://codemirror.net/codemirror.zip" class="download">Download the latest release</a>
  114. <h2>Make a donation</h2>
  115. <ul>
  116. <li><span onclick="document.getElementById('paypal').submit();" class="quasilink">Paypal</span></li>
  117. <li><span onclick="document.getElementById('bankinfo').style.display = 'block';" class="quasilink">Bank</span></li>
  118. </ul>
  119. <p id="bankinfo" style="display: none;">
  120. Bank: <i>Rabobank</i><br/>
  121. Country: <i>Netherlands</i><br/>
  122. SWIFT: <i>RABONL2U</i><br/>
  123. Account: <i>147850770</i><br/>
  124. Name: <i>Marijn Haverbeke</i><br/>
  125. IBAN: <i>NL26 RABO 0147 8507 70</i>
  126. </p>
  127. <h2>Releases:</h2>
  128. <p class="rel">25-07-2011: <a href="http://codemirror.net/codemirror-2.12.zip">Version 2.12</a>:</p>
  129. <ul class="rel-note">
  130. <li>Add a <a href="mode/sparql/index.html">SPARQL</a> mode.</li>
  131. <li>Fix bug with cursor jumping around in an unfocused editor in IE.</li>
  132. <li>Allow key and mouse events to bubble out of the editor. Ignore widget clicks.</li>
  133. <li>Solve cursor flakiness after undo/redo.</li>
  134. <li>Fix block-reindent ignoring the last few lines.</li>
  135. <li>Fix parsing of multi-line attrs in XML mode.</li>
  136. <li>Use <code>innerHTML</code> for HTML-escaping.</li>
  137. <li>Some fixes to indentation in C-like mode.</li>
  138. <li>Shrink horiz scrollbars when long lines removed.</li>
  139. <li>Fix width feedback loop bug that caused the width of an inner DIV to shrink.</li>
  140. </ul>
  141. <p class="rel">04-07-2011: <a href="http://codemirror.net/codemirror-2.11.zip">Version 2.11</a>:</p>
  142. <ul class="rel-note">
  143. <li>Add a <a href="mode/scheme/index.html">Scheme mode</a>.</li>
  144. <li>Add a <code>replace</code> method to search cursors, for cursor-preserving replacements.</li>
  145. <li>Make the <a href="mode/clike/index.html">C-like mode</a> mode more customizeable.</li>
  146. <li>Update XML mode to spot mismatched tags.</li>
  147. <li>Add <code>getStateAfter</code> API and <code>compareState</code> mode API methods for finer-grained mode magic.</li>
  148. <li>Add a <code>getScrollerElement</code> API method to manipulate the scrolling DIV.</li>
  149. <li>Fix drag-and-drop for Firefox.</li>
  150. <li>Add a C# configuration for the <a href="mode/clike/index.html">C-like mode</a>.</li>
  151. <li>Add <a href="demo/fullscreen.html">full-screen editing</a> and <a href="demo/changemode.html">mode-changing</a> demos.</li>
  152. </ul>
  153. <p class="rel">07-06-2011: <a href="http://codemirror.net/codemirror-2.1.zip">Version 2.1</a>:</p>
  154. <p class="rel-note">Add
  155. a <a href="manual.html#option_theme">theme</a> system
  156. (<a href="demo/theme.html">demo</a>). Note that this is not
  157. backwards-compatible—you'll have to update your styles and
  158. modes!</p>
  159. <p class="rel">07-06-2011: <a href="http://codemirror.net/codemirror-2.02.zip">Version 2.02</a>:</p>
  160. <ul class="rel-note">
  161. <li>Add a <a href="mode/lua/index.html">Lua mode</a>.</li>
  162. <li>Fix reverse-searching for a regexp.</li>
  163. <li>Empty lines can no longer break highlighting.</li>
  164. <li>Rework scrolling model (the outer wrapper no longer does the scrolling).</li>
  165. <li>Solve horizontal jittering on long lines.</li>
  166. <li>Add <a href="demo/runmode.html">runmode.js</a>.</li>
  167. <li>Immediately re-highlight text when typing.</li>
  168. <li>Fix problem with 'sticking' horizontal scrollbar.</li>
  169. </ul>
  170. <p class="rel">26-05-2011: <a href="http://codemirror.net/codemirror-2.01.zip">Version 2.01</a>:</p>
  171. <ul class="rel-note">
  172. <li>Add a <a href="mode/smalltalk/index.html">Smalltalk mode</a>.</li>
  173. <li>Add a <a href="mode/rst/index.html">reStructuredText mode</a>.</li>
  174. <li>Add a <a href="mode/python/index.html">Python mode</a>.</li>
  175. <li>Add a <a href="mode/plsql/index.html">PL/SQL mode</a>.</li>
  176. <li><code>coordsChar</code> now works</li>
  177. <li>Fix a problem where <code>onCursorActivity</code> interfered with <code>onChange</code>.</li>
  178. <li>Fix a number of scrolling and mouse-click-position glitches.</li>
  179. <li>Pass information about the changed lines to <code>onChange</code>.</li>
  180. <li>Support cmd-up/down on OS X.</li>
  181. <li>Add triple-click line selection.</li>
  182. <li>Don't handle shift when changing the selection through the API.</li>
  183. <li>Support <code>"nocursor"</code> mode for <code>readOnly</code> option.</li>
  184. <li>Add an <code>onHighlightComplete</code> option.</li>
  185. <li>Fix the context menu for Firefox.</li>
  186. </ul>
  187. <p><a href="oldrelease.html">Older releases...</a></p>
  188. </div></div>
  189. <div style="height: 2em">&nbsp;</div>
  190. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
  191. <input type="hidden" name="cmd" value="_s-xclick"/>
  192. <input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
  193. </form>
  194. </body>
  195. </html>