index.html (9075B)
1 <!doctype html> 2 3 <title>CodeMirror</title> 4 <meta charset="utf-8"/> 5 6 <link rel=stylesheet href="lib/codemirror.css"> 7 <link rel=stylesheet href="doc/docs.css"> 8 <script src="lib/codemirror.js"></script> 9 <script src="mode/xml/xml.js"></script> 10 <script src="mode/javascript/javascript.js"></script> 11 <script src="mode/css/css.js"></script> 12 <script src="mode/htmlmixed/htmlmixed.js"></script> 13 <script src="addon/edit/matchbrackets.js"></script> 14 15 <script src="doc/activebookmark.js"></script> 16 17 <style> 18 .CodeMirror { height: auto; border: 1px solid #ddd; } 19 .CodeMirror-scroll { max-height: 200px; } 20 .CodeMirror pre { padding-left: 7px; line-height: 1.25; } 21 </style> 22 23 <div id=nav> 24 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="doc/logo.png"></a> 25 26 <ul> 27 <li><a class=active data-default="true" href="#description">Home</a> 28 <li><a href="doc/manual.html">Manual</a> 29 <li><a href="https://github.com/codemirror/codemirror">Code</a> 30 </ul> 31 <ul> 32 <li><a href="#features">Features</a> 33 <li><a href="#community">Community</a> 34 <li><a href="#browsersupport">Browser support</a> 35 </ul> 36 </div> 37 38 <article> 39 40 <section id=description class=first> 41 <p><strong>CodeMirror</strong> is a versatile text editor 42 implemented in JavaScript for the browser. It is specialized for 43 editing code, and comes with a number of <a href="mode/index.html">language modes</a> and <a href="doc/manual.html#addons">addons</a> 44 that implement more advanced editing functionality.</p> 45 46 <p>A rich <a href="doc/manual.html#api">programming API</a> and a 47 CSS <a href="doc/manual.html#styling">theming</a> system are 48 available for customizing CodeMirror to fit your application, and 49 extending it with new functionality.</p> 50 </section> 51 52 <section id=demo> 53 <h2>This is CodeMirror</h2> 54 <form style="position: relative; margin-top: .5em;"><textarea id=demotext> 55 <!-- Create a simple CodeMirror instance --> 56 <link rel="stylesheet" href="lib/codemirror.css"> 57 <script src="lib/codemirror.js"></script> 58 <script> 59 var editor = CodeMirror.fromTextArea(myTextarea, { 60 lineNumbers: true 61 }); 62 </script></textarea> 63 <select id="demolist" onchange="document.location = this.options[this.selectedIndex].value;"> 64 <option value="#">Other demos...</option> 65 <option value="demo/complete.html">Autocompletion</option> 66 <option value="demo/folding.html">Code folding</option> 67 <option value="demo/theme.html">Themes</option> 68 <option value="mode/htmlmixed/index.html">Mixed language modes</option> 69 <option value="demo/bidi.html">Bi-directional text</option> 70 <option value="demo/variableheight.html">Variable font sizes</option> 71 <option value="demo/search.html">Search interface</option> 72 <option value="demo/vim.html">Vim bindings</option> 73 <option value="demo/emacs.html">Emacs bindings</option> 74 <option value="demo/sublime.html">Sublime Text bindings</option> 75 <option value="demo/tern.html">Tern integration</option> 76 <option value="demo/merge.html">Merge/diff interface</option> 77 <option value="demo/fullscreen.html">Full-screen editor</option> 78 <option value="demo/simplescrollbars.html">Custom scrollbars</option> 79 </select></form> 80 <script> 81 var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), { 82 lineNumbers: true, 83 mode: "text/html", 84 matchBrackets: true 85 }); 86 </script> 87 88 <div class=actions> 89 <div class=actionspicture> 90 <img src="doc/yinyang.png" class=yinyang> 91 <div class="actionlink download"> 92 <a href="http://codemirror.net/codemirror.zip">DOWNLOAD</a> 93 </div> 94 <div class="actionlink fund"> 95 <a href="https://marijnhaverbeke.nl/fund/">FUND</a> 96 </div> 97 </div> 98 <div class=actionsleft> 99 Get the current version: <a href="http://codemirror.net/codemirror.zip">5.32.0</a>.<br> 100 You can see the <a href="https://github.com/codemirror/codemirror" title="Github repository">code</a>,<br> 101 read the <a href="doc/releases.html">release notes</a>,<br> 102 or study the <a href="doc/manual.html">user manual</a>. 103 </div> 104 <div class=actionsright> 105 Software needs maintenance,<br> 106 maintainers need to subsist.<br> 107 Current funding status = <img src="https://marijnhaverbeke.nl/fund/status_s.png" title="Current maintainer happiness" style="vertical-align: middle; height: 16px; width: 16px"><br> 108 You can help <a href="https://marijnhaverbeke.nl/fund/" title="Set up a monthly contribution">per month</a> or 109 <a title="Donate with PayPal" href="https://www.paypal.me/marijnhaverbeke">once</a>. 110 </div> 111 </div> 112 113 </section> 114 115 <section id=features> 116 <h2>Features</h2> 117 <ul> 118 <li>Support for <a href="mode/index.html">over 100 languages</a> out of the box 119 <li>A powerful, <a href="mode/htmlmixed/index.html">composable</a> language mode <a href="doc/manual.html#modeapi">system</a> 120 <li><a href="doc/manual.html#addon_show-hint">Autocompletion</a> (<a href="demo/xmlcomplete.html">XML</a>) 121 <li><a href="doc/manual.html#addon_foldcode">Code folding</a> 122 <li><a href="doc/manual.html#option_extraKeys">Configurable</a> keybindings 123 <li><a href="demo/vim.html">Vim</a>, <a href="demo/emacs.html">Emacs</a>, and <a href="demo/sublime.html">Sublime Text</a> bindings 124 <li><a href="doc/manual.html#addon_search">Search and replace</a> interface 125 <li><a href="doc/manual.html#addon_matchbrackets">Bracket</a> and <a href="doc/manual.html#addon_matchtags">tag</a> matching 126 <li>Support for <a href="demo/buffers.html">split views</a> 127 <li><a href="doc/manual.html#addon_lint">Linter integration</a> 128 <li><a href="demo/variableheight.html">Mixing font sizes and styles</a> 129 <li><a href="demo/theme.html">Various themes</a> 130 <li>Able to <a href="demo/resize.html">resize to fit content</a> 131 <li><a href="doc/manual.html#mark_replacedWith">Inline</a> and <a href="doc/manual.html#addLineWidget">block</a> widgets 132 <li>Programmable <a href="demo/marker.html">gutters</a> 133 <li>Making ranges of text <a href="doc/manual.html#markText">styled, read-only, or atomic</a> 134 <li><a href="demo/bidi.html">Bi-directional text</a> support 135 <li>Many other <a href="doc/manual.html#api">methods</a> and <a href="doc/manual.html#addons">addons</a>... 136 </ul> 137 </section> 138 139 <section id=community> 140 <h2>Community</h2> 141 142 <p>CodeMirror is an open-source project shared under 143 an <a href="LICENSE">MIT license</a>. It is the editor used in the 144 dev tools for 145 <a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox</a>, 146 <a href="https://developers.google.com/chrome-developer-tools/">Chrome</a>, 147 and <a href="https://developer.apple.com/safari/tools/">Safari</a>, in <a href="http://www.lighttable.com/">Light 148 Table</a>, <a href="http://brackets.io/">Adobe 149 Brackets</a>, <a href="http://blog.bitbucket.org/2013/05/14/edit-your-code-in-the-cloud-with-bitbucket/">Bitbucket</a>, 150 and <a href="doc/realworld.html">many other projects</a>.</p> 151 152 <p>Development and bug tracking happens 153 on <a href="https://github.com/codemirror/CodeMirror/">github</a> 154 (<a href="http://marijnhaverbeke.nl/git/codemirror">alternate git 155 repository</a>). 156 Please <a href="http://codemirror.net/doc/reporting.html">read these 157 pointers</a> before submitting a bug. Use pull requests to submit 158 patches. All contributions must be released under the same MIT 159 license that CodeMirror uses.</p> 160 161 <p>Discussion around the project is done on 162 a <a href="https://discuss.codemirror.net">discussion forum</a>. 163 Announcements related to the project, such as new versions, are 164 posted in the 165 forum's <a href="https://discuss.codemirror.net/c/announce">"announce"</a> 166 category. If needed, you can 167 contact <a href="mailto:marijnh@gmail.com">the maintainer</a> 168 directly. We aim to be an inclusive, welcoming community. To make 169 that explicit, we have 170 a <a href="http://contributor-covenant.org/version/1/1/0/">code of 171 conduct</a> that applies to communication around the project.</p> 172 173 <p>A list of CodeMirror-related software that is not part of the 174 main distribution is maintained 175 on <a href="https://github.com/codemirror/CodeMirror/wiki/CodeMirror-addons">our 176 wiki</a>. Feel free to add your project.</p> 177 </section> 178 179 <section id=browsersupport> 180 <h2>Browser support</h2> 181 <p>The <em>desktop</em> versions of the following browsers, 182 in <em>standards mode</em> (HTML5 <code><!doctype html></code> 183 recommended) are supported:</p> 184 <table style="margin-bottom: 1em"> 185 <tr><th>Firefox</th><td>version 4 and up</td></tr> 186 <tr><th>Chrome</th><td>any version</td></tr> 187 <tr><th>Safari</th><td>version 5.2 and up</td></tr> 188 <tr><th style="padding-right: 1em;">Internet Explorer/Edge</th><td>version 8 and up</td></tr> 189 <tr><th>Opera</th><td>version 9 and up</td></tr> 190 </table> 191 <p>Support for modern mobile browsers is experimental. Recent 192 versions of the iOS browser and Chrome on Android should work 193 pretty well.</p> 194 </section> 195 196 </article>