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:
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
}
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
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
<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>
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