CodeMirror

  1. Home
  2. Editors
  3. CodeMirror

$5,668

Sales

Basic Code Editor

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

AخA
 
1
    // The start state contains the rules that are initially used
2
    start: [
3
    // The regex matches the token, the token property contains the type
4
    {regex: /"(?:[^\\]|\\.)*?"/, token: "string"},
5
    // You can match multiple tokens at once. Note that the captured
6
    // groups must span the whole string in this case
7
    {regex: /(function)(\s+)([a-z$][\w$]*)/,
8
     token: ["keyword", null, "variable-2"]},
9
    // Rules are matched in the order in which they appear, so there is
10
    // no ambiguity between this one and the one above
11
    {regex: /(?:function|var|return|if|for|while|else|do|this)\b/,
12
     token: "keyword"},
13
    {regex: /true|false|null|undefined/, token: "atom"},
14
    {regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
15
     token: "number"},
16
    {regex: /\/\/.*/, token: "comment"},
17
    {regex: /\/(?:[^\\]|\\.)*?\//, token: "variable-3"},
18
    // A next property will cause the mode to move to a different state
19
    {regex: /\/\*/, token: "comment", next: "comment"},
20
    {regex: /[-+\/*=<>!]+/, token: "operator"},
21
    // indent and dedent properties guide auto indentation
22
    {regex: /[\{\[\(]/, indent: true},
23
    {regex: /[\}\]\)]/, dedent: true},
24
    {regex: /[a-z$][\w$]*/, token: "variable"},
25
    // You can embed other modes with the mode property. This rule
26
    // causes all code between << and >> to be highlighted with the XML
27
    // mode.
28
    {regex: /<</, token: "meta", mode: {spec: "xml", end: />>/}}
29
    ],
30
    // The multi-line comment state.
31
    comment: [
32
    {regex: /.*?\*\//, token: "comment", next: "start"},
33
    {regex: /.*/, token: "comment"}
34
    ],
35
    // The meta property contains global information about the mode. It
36
    // can contain properties like lineComment, which are supported by
37
    // all modes, and also directives like dontIndentStates, which are
38
    // specific to simple modes.
39
    meta: {
40
    dontIndentStates: ["comment"],
41
    lineComment: "//"
42
    }
43
    });

Themes

13
 
1
    function findSequence(goal) {
2
    function find(start, history) {
3
    if (start == goal)
4
      return history;
5
    else if (start > goal)
6
      return null;
7
    else
8
      return find(start + 5, "(" + history + " + 5)") ||
9
             find(start * 3, "(" + history + " * 3)");
10
    }
11
    return find(1, "1");
12
    }
13

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
4
 
1
    This is the editor.
2
    // It starts out in plain text mode,
3
    #   use the control below to load and apply a mode
4
    "you'll see the highlighting of" this text /*change*/.

Filename, mime, or mode name:

Sublime Text bindings

​x
 
1
  // The bindings defined specifically in the Sublime Text mode
2
  var bindings = {
3
  "Alt-Left": "goSubwordLeft",
4
  "Alt-Right": "goSubwordRight",
5
  "Ctrl-Up": "scrollLineUp",
6
  "Ctrl-Down": "scrollLineDown",
7
  "Shift-Ctrl-L": "splitSelectionByLine",
8
  "Shift-Tab": "indentLess",
9
  "Esc": "singleSelectionTop",
10
  "Ctrl-L": "selectLine",
11
  "Shift-Ctrl-K": "deleteLine",
12
  "Ctrl-Enter": "insertLineAfter",
13
  "Shift-Ctrl-Enter": "insertLineBefore",
14
  "Ctrl-D": "selectNextOccurrence",
15
  "Shift-Ctrl-Space": "selectScope",
16
  "Shift-Ctrl-M": "selectBetweenBrackets",
17
  "Ctrl-M": "goToBracket",
18
  "Shift-Ctrl-Up": "swapLineUp",
19
  "Shift-Ctrl-Down": "swapLineDown",
20
  "Ctrl-/": "toggleCommentIndented",
21
  "Ctrl-J": "joinLines",
22
  "Shift-Ctrl-D": "duplicateLine",
23
  "Ctrl-T": "transposeChars",
24
  "F9": "sortLines",
25
  "Ctrl-F9": "sortLinesInsensitive",
26
  "F2": "nextBookmark",
27
  "Shift-F2": "prevBookmark",
28
  "Ctrl-F2": "toggleBookmark",
29
  "Shift-Ctrl-F2": "clearBookmarks",
30
  "Alt-F2": "selectBookmarks",
31
  "Alt-Q": "wrapLines",
32
  "Ctrl-K Ctrl-Backspace": "delLineLeft",
33
  "Backspace": "smartBackspace",
34
  "Ctrl-K Ctrl-K": "delLineRight",
35
  "Ctrl-K Ctrl-U": "upcaseAtCursor",
36
  "Ctrl-K Ctrl-L": "downcaseAtCursor",
37
  "Ctrl-K Ctrl-Space": "setSublimeMark",
38
  "Ctrl-K Ctrl-A": "selectToSublimeMark",
39
  "Ctrl-K Ctrl-W": "deleteToSublimeMark",
40
  "Ctrl-K Ctrl-X": "swapWithSublimeMark",
41
  "Ctrl-K Ctrl-Y": "sublimeYank",
42
  "Ctrl-K Ctrl-G": "clearBookmarks",
43
  "Ctrl-K Ctrl-C": "showInCenter",
44
  "Shift-Alt-Up": "selectLinesUpward",
45
  "Shift-Alt-Down": "selectLinesDownward",
46
  "Ctrl-F3": "findUnder",
47
  "Shift-Ctrl-F3": "findUnderPrevious",
48
  "Shift-Ctrl-[": "fold",
49
  "Shift-Ctrl-]": "unfold",
50
  "Ctrl-K Ctrl-j": "unfoldAll",
51
  "Ctrl-K Ctrl-0": "unfoldAll",
52
  "Ctrl-H": "replace",
53
  }
54
​
55
  // The implementation of joinLines
56
  function joinLines(cm) {
57
  var ranges = cm.listSelections(), joined = [];
58
  for (var i = 0; i < ranges.length; i++) {
59
  var range = ranges[i], from = range.from();
60
  var start = from.line, end = range.to().line;
61
  while (i < ranges.length - 1 && ranges[i + 1].from().line == end)
62
    end = ranges[++i].to().line;
63
  joined.push({start: start, end: end, anchor: !range.empty() && from});
64
  }
65
  cm.operation(function() {
66
  var offset = 0, ranges = [];
67
  for (var i = 0; i < joined.length; i++) {
68
    var obj = joined[i];
69
    var anchor = obj.anchor && Pos(obj.anchor.line - offset, obj.anchor.ch), head;
70
    for (var line = obj.start; line <= obj.end; line++) {
71
    var actual = line - offset;
72
    if (line == obj.end) head = Pos(actual, cm.getLine(actual).length + 1);
73
    if (actual < cm.lastLine()) {
74
      cm.replaceRange(" ", Pos(actual), Pos(actual + 1, /^\s*/.exec(cm.getLine(actual + 1))[0].length));
75
      ++offset;
76
    }
77
    }
78
    ranges.push({anchor: anchor || head, head: head});
79
  }
80
  cm.setSelections(ranges, 0);
81
  });
82
  }

Code Folding Demo

xxxxxxxxxx
40
 
1
    window.onload = function() {
2
    var te = document.getElementById("code");
3
    var sc = document.getElementById("script");
4
    te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
5
    sc.innerHTML = "";
6
    var te_html = document.getElementById("code-html");
7
    te_html.value = document.documentElement.innerHTML;
8
    var te_markdown = document.getElementById("code-markdown");
9
    te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
10
​
11
    window.editor = CodeMirror.fromTextArea(te, {
12
    mode: "javascript",
13
    lineNumbers: true,
14
    lineWrapping: true,
15
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
16
    foldGutter: true,
17
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
18
    });
19
    editor.foldCode(CodeMirror.Pos(13, 0));
20
​
21
    window.editor_html = CodeMirror.fromTextArea(te_html, {
22
    mode: "text/html",
23
    lineNumbers: true,
24
    lineWrapping: true,
25
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
26
    foldGutter: true,
27
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
28
    });
29
    editor_html.foldCode(CodeMirror.Pos(0, 0));
30
    editor_html.foldCode(CodeMirror.Pos(21, 0));
31
​
32
    window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
33
    mode: "markdown",
34
    lineNumbers: true,
35
    lineWrapping: true,
36
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
37
    foldGutter: true,
38
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
39
    });
40
    };
xxxxxxxxxx
30
 
1
    <head>↔</head>
6
​
7
    <body>
8
    <div id="nav">
9
    <a href="http://codemirror.net"><h1>CodeMirror</h1><img id="logo" src="../doc/logo.png"></a>
10
​
11
    <ul>
12
    <li><a href="../index.html">Home</a>
13
    </li><li><a href="../doc/manual.html">Manual</a>
14
    </li><li><a href="https://github.com/codemirror/codemirror">Code</a>
15
    </li></ul>
16
    <ul>
17
    <li><a class="active" href="#">Code Folding</a>
18
    </li></ul>
19
    </div>
20
​
21
    <article>
22
    <h2>↔</h2>
23
    <form>
24
    <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>
25
        <textarea id="code"></textarea>
26
    </div>
27
    </form>
28
    </article>
29
    </body>
30
                            
xxxxxxxxxx
13
 
1
    # Foo
2
    ## Bar
3
​
4
    blah blah
5
​
6
    ## Baz
7
​
8
    blah blah
9
​
10
    # Quux
11
​
12
    blah blah
13

Selection Marking & Highlighter

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

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 

xxxxxxxxxx
28
 
1
0123456789
2
          0123456789
3
                    0123456789
4
                              0123456789
5
                                        0123456789
6
                                                  0123456789
7
                                                            0123456789
8
                                                                      0123456789
9
                                                                                0123456789
10
0123456789
11
          0123456789
12
                    0123456789
13
                              0123456789
14
                                        0123456789
15
                                                  0123456789
16
                                                            0123456789
17
                                                                      0123456789
18
                                                                                0123456789
19
0123456789
20
          0123456789
21
                    0123456789
22
                              0123456789
23
                                        0123456789
24
                                                  0123456789
25
                                                            0123456789
26
                                                                      0123456789
27
                                                                                0123456789
28
​
15
 
1
    <body>
2
    <p>Canvas pane goes here:</p>
3
    <canvas id="pane" width="300" height="200"></canvas>
4
    <script>
5
        var canvas = document.getElementById('pane');
6
        var context = canvas.getContext('2d');
7
​
8
        context.fillStyle = 'rgb(250,0,0)';
9
        context.fillRect(10, 10, 55, 50);
10
​
11
        context.fillStyle = 'rgba(0, 0, 250, 0.5)';
12
        context.fillRect(30, 30, 55, 50);
13
    </script>
14
    </body>
15

Theme Customizer

Customize & Preview in Real Time

Menu Color Options
Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now