1<!doctype html> 2<html lang=en-US> 3<meta charset=utf8> 4<meta name="viewport" content="width=device-width, initial-scale=1"><meta property="og:title" content="CodeMirror"><meta property="og:type" content="website"><meta property="og:url" content="http://codemirror.net/"><meta property="og:image" content="http://codemirror.net/style/logo.svg"><meta property="og:description" content="In-browser code editor"><title>CodeMirror</title> 5<link rel=stylesheet href=./style/site.css> 6<link rel=icon href=./style/logo.svg> 7 8<header> 9 <nav> 10 <a class=logo href="./">CodeMirror</a> 11 <div class=navlinks> 12 <a href="./examples/" >Examples</a> 13 <a href="./docs/" >Documentation</a> 14 <a href="./try/" >Try</a> 15 <a href="https://discuss.codemirror.net/">Discuss</a> 16 <a href="https://code.haverbeke.berlin/codemirror/dev/">Code</a> 17 <a href="https://codemirror.net/5/">Version 5</a> 18 </div> 19 </nav> 20</header>
20<script defer src="codemirror.js"></script>
vendor: 1 bytes, line 20
20
21<script defer src="demo.js"></script>
21 22 23<article> 24 25<h1>Extensible Code Editor</h1> 26 27<p>CodeMirror is a code editor component for the web. It can be used 28in websites to implement a text input field with support for many 29editing features, and has a rich programming interface to allow 30further extension.</p> 31 32<div id=editor></div> 33 34<p>This is a CodeMirror field, configured for editing JavaScript code.</p> 35 36<h2 class=hr id=features>Features</h2> 37 38<ul class="grid-list-3"> 39 <li> 40 <h3>Accessibility</h3> 41 <p>Works well with screen readers and keyboard-only users.</p> 42 </li> 43 <li> 44 <h3>Mobile Support</h3> 45 <p>Use the platform's native selection and editing features on phones.</p> 46 </li> 47 <li><a href="docs/ref/#view.EditorView.bidiSpans" class=blocklink> 48 <h3>Bidirectional Text</h3> 49 <p>Support mixing of right-to-left and left-to-right text.</p> 50 </a></li> 51 <li><a href="examples/lang-package/" class=blocklink> 52 <h3>Syntax Highlighting</h3> 53 <p>Color code to reflect syntactic structure.</p> 54 </a></li> 55 <li><a href="docs/ref/#view.lineNumbers" class=blocklink> 56 <h3>Line Numbers</h3> 57 <p>Display gutters with line numbers or other information next to the code.</p> 58 </a></li> 59 <li><a href="examples/autocompletion/" class=blocklink> 60 <h3>Autocompletion</h3> 61 <p>Provide language-specific completion hints in the editor.</p> 62 </a></li> 63 <li><a href="docs/ref/#language.foldCode" class=blocklink> 64 <h3>Code Folding</h3> 65 <p>Temporarily hide parts of the document.</p> 66 </a></li> 67 <li><a href="docs/ref/#search" class=blocklink> 68 <h3>Search/Replace</h3> 69 <p>Editor-specific search, regexp search, and replace functionality.</p> 70 </a></li> 71 <li><a href="docs/ref/#language.syntaxTree" class=blocklink> 72 <h3>Full Parsing</h3> 73 <p>Detailed parse trees allow many types of language integration.</p> 74 </a></li> 75 <li><a href="docs/guide/#extension" class=blocklink> 76 <h3>Extension Interface</h3> 77 <p>Robustly implement demanding editor extensions.</p> 78 </a></li> 79 <li><a href="docs/guide/#modularity" class=blocklink> 80 <h3>Modularity</h3> 81 <p>Most features are implemented on top of a generic public API.</p> 82 </a></li> 83 <li><a href="examples/million/" class=blocklink> 84 <h3>Speed</h3> 85 <p>Remains responsive even on huge documents and long lines.</p> 86 </a></li> 87 <li><a href="docs/ref/#autocomplete.closeBrackets" class=blocklink> 88 <h3>Bracket Closing</h3> 89 <p>Automatically insert matching brackets during typing.</p> 90 </a></li> 91 <li><a href="docs/ref/#lint" class=blocklink> 92 <h3>Linting</h3> 93 <p>Show error and warning messages in the editor.</p> 94 </a></li> 95 <li><a href="examples/decoration/" class=blocklink> 96 <h3>Flexible Styling</h3> 97 <p>Mix font styles and sizes, add widgets in the content.</p> 98 </a></li> 99 <li><a href="examples/styling/#themes" class=blocklink> 100 <h3>Theming</h3> 101 <p>Import or create custom visual editor styles.</p> 102 </a></li> 103 <li><a href="examples/collab/" class=blocklink> 104 <h3>Collaborative Editing</h3> 105 <p>Allow multiple users to edit the same document.</p> 106 </a></li> 107 <li><a href="docs/ref/#commands.history" class=blocklink> 108 <h3>Undo History</h3> 109 <p>Undo and redo functionality with collab editing support.</p> 110 </a></li> 111 <li><a href="docs/ref/#state.EditorState^allowMultipleSelections" class=blocklink> 112 <h3>Multiple Selections</h3> 113 <p>Select and edit multiple ranges of the document at once.</p> 114 </a></li> 115 <li><a href="examples/translate/" class=blocklink> 116 <h3>Internationalization</h3> 117 <p>Provide custom text to display or announce to the user.</p> 118 </a></li> 119 <li><a href="docs/" class=blocklink> 120 <h3>...and more</h3> 121 <p>Find a full description of the library's features in the docs.</p> 122 </a></li> 123 124</ul> 125 126<h2 class=hr id=about>About</h2> 127 128<p>CodeMirror is open source under a permissive license 129(<a href="https://code.haverbeke.berlin/codemirror/dev/src/branch/main/LICENSE">MIT</a>). 130It is being developed 131on <a href="https://code.haverbeke.berlin/codemirror/dev">code.haverbeke.berlin</a>. 132Contributions are welcome.</p> 133 134<p style="margin-left: 15px"><strong>If you are using 135CodeMirror <u>commercially</u>, there is a <u>social</u> (but no 136legal) expectation that you help fund its maintenance. 137<a href="http://marijnhaverbeke.nl/fund/">Start here</a></strong>.</p> 138 139<p>The library supports browsers up from Internet Explorer 11 140(with <a href="examples/ie11/">some polyfills</a>).</p> 141 142<p>Discussing the project, or asking questions, is best done on 143the <a href="https://discuss.codemirror.net/">forum</a>. Bugs should 144be reported through 145the <a href="https://code.haverbeke.berlin/codemirror/dev/issues">issue 146tracker</a>. We aim to be an inclusive, welcoming community. To make 147that explicit, we have 148a <a href="http://contributor-covenant.org/version/1/1/0/">code of 149conduct</a> that applies to communication around the project.</p> 150 151<h2 class=hr id=languages>Language Support</h2> 152 153<p>A full parser package, often with language-specific integration and 154extension code, exists for the following languages:</p> 155 156<ul class="grid-list-5"> 157 <li><a href="https://code.haverbeke.berlin/codemirror/lang-angular" class=blocklink><strong>Angular</strong></a> 158 <li><a href="https://code.haverbeke.berlin/codemirror/lang-css" class=blocklink><strong>CSS</strong></a> 159 <li><a href="https://code.haverbeke.berlin/codemirror/lang-cpp" class=blocklink><strong>C++</strong></a> 160 <li><a href="https://code.haverbeke.berlin/codemirror/lang-go" class=blocklink><strong>Go</strong></a> 161 <li><a href="https://code.haverbeke.berlin/codemirror/lang-html" class=blocklink><strong>HTML</strong></a> 162 <li><a href="https://code.haverbeke.berlin/codemirror/lang-java" class=blocklink><strong>Java</strong></a> 163 <li><a href="https://code.haverbeke.berlin/codemirror/lang-javascript" class=blocklink><strong>JavaScript</strong></a> 164 <li><a href="https://code.haverbeke.berlin/codemirror/lang-jinja" class=blocklink><strong>Jinja</strong></a> 165 <li><a href="https://code.haverbeke.berlin/codemirror/lang-json" class=blocklink><strong>JSON</strong></a> 166 <li><a href="https://code.haverbeke.berlin/codemirror/lang-liquid" class=blocklink><strong>Liquid</strong></a> 167 <li><a href="https://code.haverbeke.berlin/codemirror/lang-markdown" class=blocklink><strong>Markdown</strong></a> 168 <li><a href="https://code.haverbeke.berlin/codemirror/lang-php" class=blocklink><strong>PHP</strong></a> 169 <li><a href="https://code.haverbeke.berlin/codemirror/lang-python" class=blocklink><strong>Python</strong></a> 170 <li><a href="https://code.haverbeke.berlin/codemirror/lang-rust" class=blocklink><strong>Rust</strong></a> 171 <li><a href="https://code.haverbeke.berlin/codemirror/lang-sass" class=blocklink><strong>Sass</strong></a> 172 <li><a href="https://code.haverbeke.berlin/codemirror/lang-sql" class=blocklink><strong>SQL</strong></a> 173 <li><a href="https://code.haverbeke.berlin/codemirror/lang-vue" class=blocklink><strong>Vue</strong></a> 174 <li><a href="https://code.haverbeke.berlin/codemirror/lang-wast" class=blocklink><strong>WAST</strong></a> 175 <li><a href="https://code.haverbeke.berlin/codemirror/lang-xml" class=blocklink><strong>XML</strong></a> 176 <li><a href="https://code.haverbeke.berlin/codemirror/lang-yaml" class=blocklink><strong>YAML</strong></a> 177</ul> 178 179<p>There is also a collection 180of <a href="https://code.haverbeke.berlin/codemirror/legacy-modes">CodeMirror 5 181modes</a> that can be used, and 182a list of <a href="docs/community#language">community-maintained 183language packages</a>. If your language is not listed above, you may still 184find a solution there.</p> 185 186<h2 class=hr id=sponsors>Sponsors</h2> 187 188<p>These wonderful companies and organizations help fund development and maintenance of CodeMirror.</p> 189 190<style> 191 192div.sponsors h3 {
193 color: #777; 194 font-size: 16px; 195 text-align: right; 196 font-family: inherit; 197 font-weight: inherit; 198 margin: 0; 199 min-width: 6em; 200 margin-bottom: 4px; 201} 202div.sponsors.diamond h3, div.sponsors.gold h3 { 203 margin-bottom: -5px; 204} 205 206div.sponsors img { vertical-align: middle } 207 208div.sponsorlist { 209 display: flex; 210} 211 212div.diamond div.sponsorlist, div.gold div.sponsorlist { 213 flex-direction: column; 214 gap: 10px; 215} 216 217div.silver div.sponsorlist, div.bronze div.sponsorlist { 218 justify-content: start; 219 flex-wrap: wrap; 220 row-gap: 16px; 221 column-gap: 16px; 222} 223div.sponsors a.textual, div.sponsors a.captioned { 224 color: black; 225} 226 227div.sponsors.diamond img, div.sponsors.gold img { 228 max-width: calc(100% - 2em); 229} 230div.sponsors.gold a { 231 display: block 232} 233div.sponsors.gold a img { 234 height: 70px; 235} 236div.sponsors.gold a.captioned { 237 font-size: 200%; 238} 239div.sponsors.gold a.captioned img { 240 vertical-align: middle; 241 width: auto; 242} 243 244div.sponsors.silver img { 245 height: 60px; 246} 247div.sponsors.bronze img { 248 height: 42px; 249} 250div.sponsors.bronze a.textual, div.sponsors.bronze a.captioned { 251 display: inline-block; 252 vertical-align: middle; 253 font-size: 18px; 254 line-height: 42px; 255 padding: 0 5px; 256} 257div.sponsors.bronze a.captioned { 258 line-height: 40px; 259} 260a.captioned img { 261 margin-right: 0.5em; 262} 263</style> 264 265<!--<div class="sponsors diamond"> 266 <h3>Diamond</h3> 267 <div class=sponsorlist></div> 268</div>--> 269<div class="sponsors gold"> 270 <h3>Gold</h3> 271 <div class=sponsorlist> 272 <a href="https://holmusk.com/" class=captioned><img src="style/logo/holmusk.svg" alt="" loading=lazy>Holmusk</a> 273 <a href="https://obsidian.md"><img src="style/logo/obsidian.svg" alt="Obsidian" loading=lazy></a> 274 <a href="https://repl.it/" style="margin-left: -7px"><img src="style/logo/replit.svg" alt="Repl.it" loading=lazy></a> 275 <a href="https://sourcegraph.com/"><img src="style/logo/sourcegraph.svg" alt="Sourcegraph" loading=lazy></a> 276 </div> 277</div> 278<div class="sponsors silver"> 279 <h3>Silver</h3> 280 <div class=sponsorlist> 281 <a href="https://cargo.site/"><img src="style/logo/cargo.svg" alt="Cargo" style="padding: 0 5px" loading=lazy></a> 282 <a href="https://codepen.io/"><img src="style/logo/codepen.svg" alt="CodePen" loading=lazy></a> 283 <a href="https://www.desmos.com/"><img src="style/logo/desmos.svg" alt="Desmos" loading=lazy></a> 284 <a href="https://www.labware.com/"><img src="style/logo/labware.png" alt="Labware" loading=lazy></a> 285 <a href="https://www.overleaf.com/"><img src="style/logo/overleaf.svg" alt="Overleaf" loading=lazy></a> 286 </div> 287</div> 288<div class="sponsors bronze"> 289 <h3>Bronze</h3> 290 <div class=sponsorlist> 291 <a href="https://www.amplenote.com/" class=textual>Amplenote</a> 292 <a href="https://anvil.works"><img src="style/logo/anvil.svg" alt="Anvil" loading=lazy></a> 293 <a href="https://www.executeprogram.com"><img src="style/logo/executeprogram.svg" alt="Execute Program" loading=lazy></a> 294 <a href="https://kogiqa.com"><img src="style/logo/kogi.svg" alt="kogiQA" loading=lazy></a> 295 <a href="https://resources.co"><img src="style/logo/resources.png" alt="Resources.co" load=lazy></a> 296 <a href="https://route4me.com/"><img src="style/logo/route4me.svg" alt="Route4Me" load=lazy></a> 297 <a href="https://www.sourcebot.dev/"><img src="style/logo/sourcebot.png" alt="Sourcebot" loading=lazy></a> 298 <a href="https://www.systeminit.com/"><img src="style/logo/system-init.svg" alt="System Initiative" loading=lazy></a> 299 <a href="https://val.town"><img src="style/logo/val.svg" alt="Val Town" loading=lazy></a> 300 </div> 301</div> 302 303</article><footer> 304 <nav> 305 <div class=navlinks> 306 <a href="http://contributor-covenant.org/version/1/1/0/">Code of Conduct</a> 307 <a href="https://code.haverbeke.berlin/codemirror/dev/issues">Report an Issue</a> 308 </div> 309 </nav> 310</footer> 311 312</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.