CodeMirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

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

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

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"

CodeMirror

Basic Code Editor

Themes

Lazy Mode Loading

Sublime Text bindings

Code Folding Demo

Selection Marking & Highlighter

HTML5 preview

Ruler & Visible tabs

Theme Customizer

Menu Color Options

Layout Options

Navigation Color Options

Solid

Gradient

Solid

Gradient

You have new order!

99% Server load

Warning notifixation

Complete the task

Generate monthly report

Margaret Govan

Bret Lezama

Carie Berra

Eric Alsobrook

CodeMirror

Basic Code Editor

Themes

Lazy Mode Loading

Sublime Text bindings

Code Folding Demo

Selection Marking & Highlighter

HTML5 preview

Ruler & Visible tabs

Theme Customizer

Menu Color Options

Layout Options

Navigation Color Options

Solid

Gradient

Solid

Gradient