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: "//"
	}
	});

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"

HTML:

Markdown:

Basic Code Editor

Themes

Lazy Mode Loading

Sublime Text bindings

Code Folding Demo

Selection Marking & Highlighter

HTML5 preview

Ruler & Visible tabs