|
0
|
1 <!doctype html>
|
|
|
2
|
|
|
3 <title>CodeMirror 5</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 .banner { background: #ffc; padding: 6px; border-bottom: 2px solid silver; text-align: center }
|
|
|
22 </style>
|
|
|
23
|
|
|
24 <div class=banner>
|
|
|
25 Note that this is the website for CodeMirror 5. <a href="https://codemirror.net/">Version 6</a> is the current version.
|
|
|
26 </div>
|
|
|
27
|
|
|
28 <div id=nav>
|
|
|
29 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="doc/logo.png"></a>
|
|
|
30
|
|
|
31 <ul>
|
|
|
32 <li><a class=active data-default="true" href="#description">Home</a>
|
|
|
33 <li><a href="doc/manual.html">Manual</a>
|
|
|
34 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
|
|
|
35 <li><a href="https://codemirror.net/">Version 6</a>
|
|
|
36 </ul>
|
|
|
37 <ul>
|
|
|
38 <li><a href="#features">Features</a>
|
|
|
39 <li><a href="#community">Community</a>
|
|
|
40 <li><a href="#browsersupport">Browser support</a>
|
|
|
41 </ul>
|
|
|
42 </div>
|
|
|
43
|
|
|
44 <article>
|
|
|
45
|
|
|
46 <section id=description class=first>
|
|
|
47 <p><strong>CodeMirror</strong> is a versatile text editor
|
|
|
48 implemented in JavaScript for the browser. It is specialized for
|
|
|
49 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>
|
|
|
50 that implement more advanced editing functionality.</p>
|
|
|
51
|
|
|
52 <p>A rich <a href="doc/manual.html#api">programming API</a> and a
|
|
|
53 CSS <a href="doc/manual.html#styling">theming</a> system are
|
|
|
54 available for customizing CodeMirror to fit your application, and
|
|
|
55 extending it with new functionality.</p>
|
|
|
56 </section>
|
|
|
57
|
|
|
58 <section id=demo>
|
|
|
59 <h2>This is CodeMirror</h2>
|
|
|
60 <form style="position: relative; margin-top: .5em;"><textarea id=demotext>
|
|
|
61 <!-- Create a simple CodeMirror instance -->
|
|
|
62 <link rel="stylesheet" href="lib/codemirror.css">
|
|
|
63 <script src="lib/codemirror.js"></script>
|
|
|
64 <script>
|
|
|
65 var editor = CodeMirror.fromTextArea(myTextarea, {
|
|
|
66 lineNumbers: true
|
|
|
67 });
|
|
|
68 </script></textarea>
|
|
|
69 <select id="demolist" onchange="document.location = this.options[this.selectedIndex].value;">
|
|
|
70 <option value="#">Other demos...</option>
|
|
|
71 <option value="demo/complete.html">Autocompletion</option>
|
|
|
72 <option value="demo/folding.html">Code folding</option>
|
|
|
73 <option value="demo/theme.html">Themes</option>
|
|
|
74 <option value="mode/htmlmixed/index.html">Mixed language modes</option>
|
|
|
75 <option value="demo/bidi.html">Bi-directional text</option>
|
|
|
76 <option value="demo/variableheight.html">Variable font sizes</option>
|
|
|
77 <option value="demo/search.html">Search interface</option>
|
|
|
78 <option value="demo/vim.html">Vim bindings</option>
|
|
|
79 <option value="demo/emacs.html">Emacs bindings</option>
|
|
|
80 <option value="demo/sublime.html">Sublime Text bindings</option>
|
|
|
81 <option value="demo/tern.html">Tern integration</option>
|
|
|
82 <option value="demo/merge.html">Merge/diff interface</option>
|
|
|
83 <option value="demo/fullscreen.html">Full-screen editor</option>
|
|
|
84 <option value="demo/simplescrollbars.html">Custom scrollbars</option>
|
|
|
85 </select></form>
|
|
|
86 <script>
|
|
|
87 var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
|
|
|
88 lineNumbers: true,
|
|
|
89 mode: "text/html",
|
|
|
90 matchBrackets: true
|
|
|
91 });
|
|
|
92 </script>
|
|
|
93
|
|
|
94 <div class=actions>
|
|
|
95 Get the current version: <a href="https://codemirror.net/5/codemirror.zip">5.65.18</a>.<br>
|
|
|
96 You can see the <a href="https://github.com/codemirror/codemirror5" title="GitHub repository">code</a>,<br>
|
|
|
97 read the <a href="doc/releases.html">release notes</a>,<br>
|
|
|
98 or study the <a href="doc/manual.html">user manual</a>.
|
|
|
99 </div>
|
|
|
100
|
|
|
101 </section>
|
|
|
102
|
|
|
103 <section id=features>
|
|
|
104 <h2>Features</h2>
|
|
|
105 <ul>
|
|
|
106 <li>Support for <a href="mode/index.html">over 100 languages</a> out of the box
|
|
|
107 <li>A powerful, <a href="mode/htmlmixed/index.html">composable</a> language mode <a href="doc/manual.html#modeapi">system</a>
|
|
|
108 <li><a href="doc/manual.html#addon_show-hint">Autocompletion</a> (<a href="demo/xmlcomplete.html">XML</a>)
|
|
|
109 <li><a href="doc/manual.html#addon_foldcode">Code folding</a>
|
|
|
110 <li><a href="doc/manual.html#option_extraKeys">Configurable</a> keybindings
|
|
|
111 <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
|
|
|
112 <li><a href="doc/manual.html#addon_search">Search and replace</a> interface
|
|
|
113 <li><a href="doc/manual.html#addon_matchbrackets">Bracket</a> and <a href="doc/manual.html#addon_matchtags">tag</a> matching
|
|
|
114 <li>Support for <a href="demo/buffers.html">split views</a>
|
|
|
115 <li><a href="doc/manual.html#addon_lint">Linter integration</a>
|
|
|
116 <li><a href="demo/variableheight.html">Mixing font sizes and styles</a>
|
|
|
117 <li><a href="demo/theme.html">Various themes</a>
|
|
|
118 <li>Able to <a href="demo/resize.html">resize to fit content</a>
|
|
|
119 <li><a href="doc/manual.html#mark_replacedWith">Inline</a> and <a href="doc/manual.html#addLineWidget">block</a> widgets
|
|
|
120 <li>Programmable <a href="demo/marker.html">gutters</a>
|
|
|
121 <li>Making ranges of text <a href="doc/manual.html#markText">styled, read-only, or atomic</a>
|
|
|
122 <li><a href="demo/bidi.html">Bi-directional text</a> support
|
|
|
123 <li>Many other <a href="doc/manual.html#api">methods</a> and <a href="doc/manual.html#addons">addons</a>...
|
|
|
124 </ul>
|
|
|
125 </section>
|
|
|
126
|
|
|
127 <section id=community>
|
|
|
128 <h2>Community</h2>
|
|
|
129
|
|
|
130 <p>CodeMirror is an open-source project shared under
|
|
|
131 an <a href="LICENSE">MIT license</a>.</p>
|
|
|
132
|
|
|
133 <p>Development and bug tracking happens
|
|
|
134 on <a href="https://github.com/codemirror/CodeMirror/">github</a>
|
|
|
135 (<a href="http://marijnhaverbeke.nl/git/codemirror">alternate git
|
|
|
136 repository</a>).
|
|
|
137 Please <a href="https://codemirror.net/5/doc/reporting.html">read these
|
|
|
138 pointers</a> before submitting a bug. Use pull requests to submit
|
|
|
139 patches. All contributions must be released under the same MIT
|
|
|
140 license that CodeMirror uses.</p>
|
|
|
141
|
|
|
142 <p>Discussion around the project is done on
|
|
|
143 a <a href="https://discuss.codemirror.net">discussion forum</a>.
|
|
|
144 Announcements related to the project, such as new versions, are
|
|
|
145 posted in the
|
|
|
146 forum's <a href="https://discuss.codemirror.net/c/announce">"announce"</a>
|
|
|
147 category. If needed, you can
|
|
|
148 contact <a href="mailto:marijn@haverbeke.berlin">the maintainer</a>
|
|
|
149 directly. We aim to be an inclusive, welcoming community. To make
|
|
|
150 that explicit, we have
|
|
|
151 a <a href="http://contributor-covenant.org/version/1/1/0/">code of
|
|
|
152 conduct</a> that applies to communication around the project.</p>
|
|
|
153 </section>
|
|
|
154
|
|
|
155 <section id=browsersupport>
|
|
|
156 <h2>Browser support</h2>
|
|
|
157 <p>The <em>desktop</em> versions of the following browsers,
|
|
|
158 in <em>standards mode</em> (HTML5 <code><!doctype html></code>
|
|
|
159 recommended) are supported:</p>
|
|
|
160 <table style="margin-bottom: 1em">
|
|
|
161 <tr><th>Firefox</th><td>version 4 and up</td></tr>
|
|
|
162 <tr><th>Chrome</th><td>any version</td></tr>
|
|
|
163 <tr><th>Safari</th><td>version 5.2 and up</td></tr>
|
|
|
164 <tr><th style="padding-right: 1em;">Internet Explorer/Edge</th><td>version 8 and up</td></tr>
|
|
|
165 <tr><th>Opera</th><td>version 9 and up</td></tr>
|
|
|
166 </table>
|
|
|
167 <p>Support for modern mobile browsers is experimental. Recent
|
|
|
168 versions of the iOS browser and Chrome on Android should work
|
|
|
169 pretty well.</p>
|
|
|
170 </section>
|
|
|
171
|
|
|
172 </article>
|
