#### Basic Code Editor

It has the ability to convert HTML textarea fields or other HTML elements to editor instances.

// The start state contains the rules that are initially used start: [ // The regex matches the token, the token property contains the type {regex: /"(?:[^\\]|\\.)*?"/, token: "string"}, // You can match multiple tokens at once. Note that the captured // groups must span the whole string in this case {regex: /(function)(\s+)([a-z$][\w$]*)/, token: ["keyword", null, "variable-2"]}, // Rules are matched in the order in which they appear, so there is // no ambiguity between this one and the one above {regex: /(?:function|var|return|if|for|while|else|do|this)\b/, token: "keyword"}, {regex: /true|false|null|undefined/, token: "atom"}, {regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i, token: "number"}, {regex: /\/\/.*/, token: "comment"}, {regex: /\/(?:[^\\]|\\.)*?\//, token: "variable-3"}, // A next property will cause the mode to move to a different state {regex: /\/\*/, token: "comment", next: "comment"}, {regex: /[-+\/*=<>!]+/, token: "operator"}, // indent and dedent properties guide auto indentation {regex: /[\{\[\(]/, indent: true}, {regex: /[\}\]\)]/, dedent: true}, {regex: /[a-z$][\w$]*/, token: "variable"}, // You can embed other modes with the mode property. This rule // causes all code between << and >> to be highlighted with the XML // mode. {regex: /<</, token: "meta", mode: {spec: "xml", end: />>/}} ], // The multi-line comment state. comment: [ {regex: /.*?\*\//, token: "comment", next: "start"}, {regex: /.*/, token: "comment"} ], // The meta property contains global information about the mode. It // can contain properties like lineComment, which are supported by // all modes, and also directives like dontIndentStates, which are // specific to simple modes. meta: { dontIndentStates: ["comment"], lineComment: "//" } });

#### Themes

function findSequence(goal) { function find(start, history) { if (start == goal) return history; else if (start > goal) return null; else return find(start + 5, "(" + history + " + 5)") || find(start * 3, "(" + history + " * 3)"); } return find(1, "1"); }

Select a theme:

#### Lazy Mode Loading

It has the ability to convert HTML textarea fields or other HTML elements to editor instances.

Current mode: `text/plain`
This is the editor. // It starts out in plain text mode, # use the control below to load and apply a mode "you'll see the highlighting of" this text /*change*/.

Filename, mime, or mode name:

#### Sublime Text bindings

// The bindings defined specifically in the Sublime Text mode var bindings = { "Alt-Left": "goSubwordLeft", "Alt-Right": "goSubwordRight", "Ctrl-Up": "scrollLineUp", "Ctrl-Down": "scrollLineDown", "Shift-Ctrl-L": "splitSelectionByLine", "Shift-Tab": "indentLess", "Esc": "singleSelectionTop", "Ctrl-L": "selectLine", "Shift-Ctrl-K": "deleteLine", "Ctrl-Enter": "insertLineAfter", "Shift-Ctrl-Enter": "insertLineBefore", "Ctrl-D": "selectNextOccurrence", "Shift-Ctrl-Space": "selectScope", "Shift-Ctrl-M": "selectBetweenBrackets", "Ctrl-M": "goToBracket", "Shift-Ctrl-Up": "swapLineUp", "Shift-Ctrl-Down": "swapLineDown", "Ctrl-/": "toggleCommentIndented", "Ctrl-J": "joinLines", "Shift-Ctrl-D": "duplicateLine", "Ctrl-T": "transposeChars", "F9": "sortLines", "Ctrl-F9": "sortLinesInsensitive", "F2": "nextBookmark", "Shift-F2": "prevBookmark", "Ctrl-F2": "toggleBookmark", "Shift-Ctrl-F2": "clearBookmarks", "Alt-F2": "selectBookmarks", "Alt-Q": "wrapLines", "Ctrl-K Ctrl-Backspace": "delLineLeft", "Backspace": "smartBackspace", "Ctrl-K Ctrl-K": "delLineRight", "Ctrl-K Ctrl-U": "upcaseAtCursor", "Ctrl-K Ctrl-L": "downcaseAtCursor", "Ctrl-K Ctrl-Space": "setSublimeMark", "Ctrl-K Ctrl-A": "selectToSublimeMark", "Ctrl-K Ctrl-W": "deleteToSublimeMark", "Ctrl-K Ctrl-X": "swapWithSublimeMark", "Ctrl-K Ctrl-Y": "sublimeYank", "Ctrl-K Ctrl-G": "clearBookmarks", "Ctrl-K Ctrl-C": "showInCenter", "Shift-Alt-Up": "selectLinesUpward", "Shift-Alt-Down": "selectLinesDownward", "Ctrl-F3": "findUnder", "Shift-Ctrl-F3": "findUnderPrevious", "Shift-Ctrl-[": "fold", "Shift-Ctrl-]": "unfold", "Ctrl-K Ctrl-j": "unfoldAll", "Ctrl-K Ctrl-0": "unfoldAll", "Ctrl-H": "replace", } // The implementation of joinLines function joinLines(cm) { var ranges = cm.listSelections(), joined = []; for (var i = 0; i < ranges.length; i++) { var range = ranges[i], from = range.from(); var start = from.line, end = range.to().line; while (i < ranges.length - 1 && ranges[i + 1].from().line == end) end = ranges[++i].to().line; joined.push({start: start, end: end, anchor: !range.empty() && from}); } cm.operation(function() { var offset = 0, ranges = []; for (var i = 0; i < joined.length; i++) { var obj = joined[i]; var anchor = obj.anchor && Pos(obj.anchor.line - offset, obj.anchor.ch), head; for (var line = obj.start; line <= obj.end; line++) { var actual = line - offset; if (line == obj.end) head = Pos(actual, cm.getLine(actual).length + 1); if (actual < cm.lastLine()) { cm.replaceRange(" ", Pos(actual), Pos(actual + 1, /^\s*/.exec(cm.getLine(actual + 1))[0].length)); ++offset; } } ranges.push({anchor: anchor || head, head: head}); } cm.setSelections(ranges, 0); }); }

#### Code Folding Demo

JavaScript: window.onload = function() { var te = document.getElementById("code"); var sc = document.getElementById("script"); te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); sc.innerHTML = ""; var te_html = document.getElementById("code-html"); te_html.value = document.documentElement.innerHTML; var te_markdown = document.getElementById("code-markdown"); te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n" window.editor = CodeMirror.fromTextArea(te, { mode: "javascript", lineNumbers: true, lineWrapping: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); editor.foldCode(CodeMirror.Pos(13, 0)); window.editor_html = CodeMirror.fromTextArea(te_html, { mode: "text/html", lineNumbers: true, lineWrapping: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); editor_html.foldCode(CodeMirror.Pos(0, 0)); editor_html.foldCode(CodeMirror.Pos(21, 0)); window.editor_markdown = CodeMirror.fromTextArea(te_markdown, { mode: "markdown", lineNumbers: true, lineWrapping: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); };
HTML: <head> <style type="text/css"> .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} </style> </head> <body> <div id="nav"> <a href="http://codemirror.net"><h1>CodeMirror</h1><img id="logo" src="../doc/logo.png"></a> <ul> <li><a href="../index.html">Home</a> </li><li><a href="../doc/manual.html">Manual</a> </li><li><a href="https://github.com/codemirror/codemirror">Code</a> </li></ul> <ul> <li><a class="active" href="#">Code Folding</a> </li></ul> </div> <article> <h2>Code Folding Demo</h2> <form> <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br> <textarea id="code"></textarea> </div> </form> </article> </body>
Markdown: # Foo ## Bar blah blah ## Baz blah blah # Quux blah blah

#### Selection Marking & Highlighter

Select something from here. You'll see that the selection's foreground color changes to white! Since, by default, CodeMirror only puts an independent "marker" layer behind the text, you'll need something like this to change its color. Also notice that turning this addon on (with the default style) allows you to safely give text a background color without screwing up the visibility of the selection.

#### HTML5 preview

<!doctype html> <html> <head> <meta charset=utf-8> <title>HTML5 canvas demo</title> <style>p {font-family: monospace;}</style> </head> <body> <p>Canvas pane goes here:</p> <canvas id="pane" width="300" height="200"></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body> </html>

#### Ruler & Visible tabs

<body> <p>Canvas pane goes here:</p> <canvas id="pane" width="300" height="200"></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body>