CodeMirror/index.html at master · Microalg/CodeMirror · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!doctype html>

<title>CodeMirror</title>
<metacharset="utf-8"/>

<linkrel=stylesheethref="lib/codemirror.css">
<linkrel=stylesheethref="doc/docs.css">
<scriptsrc="lib/codemirror.js"></script>
<scriptsrc="mode/xml/xml.js"></script>
<scriptsrc="mode/javascript/javascript.js"></script>
<scriptsrc="mode/css/css.js"></script>
<scriptsrc="mode/htmlmixed/htmlmixed.js"></script>
<scriptsrc="addon/edit/matchbrackets.js"></script>

<scriptsrc="doc/activebookmark.js"></script>

<style>
 .CodeMirror { height: auto; border:1px solid #ddd; }
 .CodeMirror-scroll { max-height:200px; }
 .CodeMirrorpre { padding-left:7px; line-height:1.25; }
</style>

<divid=nav>
<ahref="http://codemirror.net"><h1>CodeMirror</h1><imgid=logosrc="doc/logo.png"></a>

<ul>
<li><aclass=activedata-default="true" href="#description">Home</a>
<li><ahref="doc/manual.html">Manual</a>
<li><ahref="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><ahref="#features">Features</a>
<li><ahref="#community">Community</a>
<li><ahref="#browsersupport">Browser support</a>
</ul>
</div>

<article>

<sectionid=descriptionclass=first>
<p><strong>CodeMirror</strong> is a versatile text editor
 implemented in JavaScript for the browser. It is specialized for
 editing code, and comes with a number of <ahref="mode/index.html">language modes</a> and <ahref="doc/manual.html#addons">addons</a>
 that implement more advanced editing functionality.</p>

<p>A rich <ahref="doc/manual.html#api">programming API</a> and a
 CSS <ahref="doc/manual.html#styling">theming</a> system are
 available for customizing CodeMirror to fit your application, and
 extending it with new functionality.</p>
</section>

<sectionid=demo>
<h2>This is CodeMirror</h2>
<formstyle="position: relative; margin-top: .5em;"><textareaid=demotext>
<!-- Create a simple CodeMirror instance -->
<linkrel="stylesheet" href="lib/codemirror.css">
<scriptsrc="lib/codemirror.js"></script>
<script>
vareditor=CodeMirror.fromTextArea(myTextarea,{
lineNumbers: true
});
</script></textarea>
<selectid="demolist" onchange="document.location = this.options[this.selectedIndex].value;">
<optionvalue="#">Other demos...</option>
<optionvalue="demo/complete.html">Autocompletion</option>
<optionvalue="demo/folding.html">Code folding</option>
<optionvalue="demo/theme.html">Themes</option>
<optionvalue="mode/htmlmixed/index.html">Mixed language modes</option>
<optionvalue="demo/bidi.html">Bi-directional text</option>
<optionvalue="demo/variableheight.html">Variable font sizes</option>
<optionvalue="demo/search.html">Search interface</option>
<optionvalue="demo/vim.html">Vim bindings</option>
<optionvalue="demo/emacs.html">Emacs bindings</option>
<optionvalue="demo/sublime.html">Sublime Text bindings</option>
<optionvalue="demo/tern.html">Tern integration</option>
<optionvalue="demo/merge.html">Merge/diff interface</option>
<optionvalue="demo/fullscreen.html">Full-screen editor</option>
<optionvalue="demo/simplescrollbars.html">Custom scrollbars</option>
</select></form>
<script>
vareditor=CodeMirror.fromTextArea(document.getElementById("demotext"),{
lineNumbers: true,
mode: "text/html",
matchBrackets: true
});
</script>

<divclass=actions>
<divclass=actionspicture>
<imgsrc="doc/yinyang.png" class=yinyang>
<divclass="actionlink download">
<ahref="http://codemirror.net/codemirror.zip">DOWNLOAD</a>
</div>
<divclass="actionlink fund">
<ahref="https://marijnhaverbeke.nl/fund/">FUND</a>
</div>
</div>
<divclass=actionsleft>
 Get the current version: <ahref="http://codemirror.net/codemirror.zip">5.25.0</a>.<br>
 You can see the <ahref="https://github.com/codemirror/codemirror" title="Github repository">code</a>,<br>
 read the <ahref="doc/releases.html">release notes</a>,<br>
 or study the <ahref="doc/manual.html">user manual</a>.
</div>
<divclass=actionsright>
 Software needs maintenance,<br>
 maintainers need to subsist.<br>
 Current funding status = <imgsrc="https://marijnhaverbeke.nl/fund/status_s.png" title="Current maintainer happiness" style="vertical-align: middle; height: 16px; width: 16px"><br>
 You can help <ahref="https://marijnhaverbeke.nl/fund/" title="Set up a monthly contribution">per month</a> or
<atitle="Donate with PayPal" href="javascript:document.getElementById('paypal').submit();">once</a>.
<formaction="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
<inputtype="hidden" name="cmd" value="_s-xclick"/>
<inputtype="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
</form>
</div>
</div>

</section>

<sectionid=features>
<h2>Features</h2>
<ul>
<li>Support for <ahref="mode/index.html">over 100 languages</a> out of the box
<li>A powerful, <ahref="mode/htmlmixed/index.html">composable</a> language mode <ahref="doc/manual.html#modeapi">system</a>
<li><ahref="doc/manual.html#addon_show-hint">Autocompletion</a> (<ahref="demo/xmlcomplete.html">XML</a>)
<li><ahref="doc/manual.html#addon_foldcode">Code folding</a>
<li><ahref="doc/manual.html#option_extraKeys">Configurable</a> keybindings
<li><ahref="demo/vim.html">Vim</a>, <ahref="demo/emacs.html">Emacs</a>, and <ahref="demo/sublime.html">Sublime Text</a> bindings
<li><ahref="doc/manual.html#addon_search">Search and replace</a> interface
<li><ahref="doc/manual.html#addon_matchbrackets">Bracket</a> and <ahref="doc/manual.html#addon_matchtags">tag</a> matching
<li>Support for <ahref="demo/buffers.html">split views</a>
<li><ahref="doc/manual.html#addon_lint">Linter integration</a>
<li><ahref="demo/variableheight.html">Mixing font sizes and styles</a>
<li><ahref="demo/theme.html">Various themes</a>
<li>Able to <ahref="demo/resize.html">resize to fit content</a>
<li><ahref="doc/manual.html#mark_replacedWith">Inline</a> and <ahref="doc/manual.html#addLineWidget">block</a> widgets
<li>Programmable <ahref="demo/marker.html">gutters</a>
<li>Making ranges of text <ahref="doc/manual.html#markText">styled, read-only, or atomic</a>
<li><ahref="demo/bidi.html">Bi-directional text</a> support
<li>Many other <ahref="doc/manual.html#api">methods</a> and <ahref="doc/manual.html#addons">addons</a>...
</ul>
</section>

<sectionid=community>
<h2>Community</h2>

<p>CodeMirror is an open-source project shared under
 an <ahref="LICENSE">MIT license</a>. It is the editor used in the
 dev tools for
 both <ahref="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox</a>
 and <ahref="https://developers.google.com/chrome-developer-tools/">Chrome</a>, <ahref="http://www.lighttable.com/">Light
 Table</a>, <ahref="http://brackets.io/">Adobe
 Brackets</a>, <ahref="http://blog.bitbucket.org/2013/05/14/edit-your-code-in-the-cloud-with-bitbucket/">Bitbucket</a>,
 and <ahref="doc/realworld.html">many other projects</a>.</p>

<p>Development and bug tracking happens
 on <ahref="https://github.com/codemirror/CodeMirror/">github</a>
 (<ahref="http://marijnhaverbeke.nl/git/codemirror">alternate git
 repository</a>).
 Please <ahref="http://codemirror.net/doc/reporting.html">read these
 pointers</a> before submitting a bug. Use pull requests to submit
 patches. All contributions must be released under the same MIT
 license that CodeMirror uses.</p>

<p>Discussion around the project is done on
 a <ahref="https://discuss.codemirror.net">discussion forum</a>.
 Announcements related to the project, such as new versions, are
 posted in the
 forum's <ahref="https://discuss.codemirror.net/c/announce">"announce"</a>
 category. If needed, you can
 contact <ahref="mailto:marijnh@gmail.com">the maintainer</a>
 directly. We aim to be an inclusive, welcoming community. To make
 that explicit, we have
 a <ahref="http://contributor-covenant.org/version/1/1/0/">code of
 conduct</a> that applies to communication around the project.</p>

<p>A list of CodeMirror-related software that is not part of the
 main distribution is maintained
 on <ahref="https://github.com/codemirror/CodeMirror/wiki/CodeMirror-addons">our
 wiki</a>. Feel free to add your project.</p>
</section>

<sectionid=browsersupport>
<h2>Browser support</h2>
<p>The <em>desktop</em> versions of the following browsers,
 in <em>standards mode</em> (HTML5 <code>&lt;!doctype html></code>
 recommended) are supported:</p>
<tablestyle="margin-bottom: 1em">
<tr><th>Firefox</th><td>version 4 and up</td></tr>
<tr><th>Chrome</th><td>any version</td></tr>
<tr><th>Safari</th><td>version 5.2 and up</td></tr>
<tr><thstyle="padding-right: 1em;">Internet Explorer</th><td>version 8 and up</td></tr>
<tr><th>Opera</th><td>version 9 and up</td></tr>
</table>
<p>Support for modern mobile browsers is experimental. Recent
 versions of the iOS browser and Chrome on Android should work
 pretty well.</p>
</section>

</article>