17 changes: 7 additions & 10 deletions addon/hint/show-hint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,11 @@
finished = true;
completion.close();
completion.cm.off("cursorActivity", activity);
CodeMirror.signal(data, "close");
}
function isDone() {
if (finished) return true;
if (!completion.widget) { done(); return true; }
if (data) CodeMirror.signal(data, "close");
}

function update() {
if (isDone()) return;
if (finished) return;
CodeMirror.signal(data, "update");
if (completion.options.async)
completion.getHints(completion.cm, finishUpdate, completion.options);
Expand All @@ -84,9 +80,8 @@
}
function finishUpdate(data_) {
data = data_;
if (isDone()) return;
if (finished) return;
if (!data || !data.list.length) return done();
completion.widget.close();
completion.widget = new Widget(completion, data);
}

Expand All @@ -95,10 +90,12 @@
var pos = completion.cm.getCursor(), line = completion.cm.getLine(pos.line);
if (pos.line != startPos.line || line.length - pos.ch != startLen - startPos.ch ||
pos.ch < startPos.ch || completion.cm.somethingSelected() ||
(pos.ch && closeOn.test(line.charAt(pos.ch - 1))))
(pos.ch && closeOn.test(line.charAt(pos.ch - 1)))) {
completion.close();
else
} else {
debounce = setTimeout(update, 170);
if (completion.widget) completion.widget.close();
}
}
this.cm.on("cursorActivity", activity);
this.onClose = done;
Expand Down
34 changes: 34 additions & 0 deletions addon/scroll/scrollpastend.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
(function() {
"use strict";

CodeMirror.defineOption("scrollPastEnd", false, function(cm, val, old) {
if (old && old != CodeMirror.Init) {
cm.off("change", onChange);
cm.display.lineSpace.parentNode.style.paddingBottom = "";
cm.state.scrollPastEndPadding = null;
}
if (val) {
cm.on("change", onChange);
updateBottomMargin(cm);
}
});

function onChange(cm, change) {
if (CodeMirror.changeEnd(change).line == cm.lastLine())
updateBottomMargin(cm);
}

function updateBottomMargin(cm) {
var padding = "";
if (cm.lineCount() > 1) {
var totalH = cm.display.scroller.clientHeight - 30,
lastLineH = cm.getLineHandle(cm.lastLine()).height;
padding = (totalH - lastLineH) + "px";
}
if (cm.state.scrollPastEndPadding != padding) {
cm.state.scrollPastEndPadding = padding;
cm.display.lineSpace.parentNode.style.paddingBottom = padding;
cm.setSize();
}
}
})();
5 changes: 4 additions & 1 deletion addon/search/match-highlighter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,18 @@
(function() {
var DEFAULT_MIN_CHARS = 2;
var DEFAULT_TOKEN_STYLE = "matchhighlight";
var DEFAULT_DELAY = 100;

function State(options) {
if (typeof options == "object") {
this.minChars = options.minChars;
this.style = options.style;
this.showToken = options.showToken;
this.delay = options.delay;
}
if (this.style == null) this.style = DEFAULT_TOKEN_STYLE;
if (this.minChars == null) this.minChars = DEFAULT_MIN_CHARS;
if (this.delay == null) this.delay = DEFAULT_DELAY;
this.overlay = this.timeout = null;
}

Expand All @@ -45,7 +48,7 @@
function cursorActivity(cm) {
var state = cm.state.matchHighlighter;
clearTimeout(state.timeout);
state.timeout = setTimeout(function() {highlightMatches(cm);}, 100);
state.timeout = setTimeout(function() {highlightMatches(cm);}, state.delay);
}

function highlightMatches(cm) {
Expand Down
6 changes: 6 additions & 0 deletions bin/authors.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Combine existing list of authors with everyone known in git, sort, add header.
tail --lines=+3 AUTHORS > AUTHORS.tmp
git log --format='%aN' >> AUTHORS.tmp
echo -e "List of CodeMirror contributors. Updated before every release.\n" > AUTHORS
sort -u AUTHORS.tmp >> AUTHORS
rm -f AUTHORS.tmp
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "CodeMirror",
"version": "3.15.0",
"version": "3.16.0",
"main": ["lib/codemirror.js", "lib/codemirror.css"],
"ignore": [
"**/.*",
Expand Down
42 changes: 25 additions & 17 deletions demo/activeline.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Active Line Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/selection/active-line.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Active Line Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/selection/active-line.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-activeline-background {background: #e8f2ff !important;}
</style>
</head>
<body>
<h1>CodeMirror: Active Line Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Active Line</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Active Line Demo</h2>
<form><textarea id="code" name="code">
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
xmlns:georss="http://www.georss.org/georss"
Expand Down Expand Up @@ -66,5 +75,4 @@ <h1>CodeMirror: Active Line Demo</h1>

<p>Styling the current cursor line.</p>

</body>
</html>
</article>
44 changes: 27 additions & 17 deletions demo/anywordhint.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Any Word Completion Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../addon/hint/anyword-hint.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Any Word Completion Demo</h1>

<form><textarea id="code" name="code">
<title>CodeMirror: Any Word Completion Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/anyword-hint.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Any Word Completion</a>
</ul>
</div>

<article>
<h2>Any Word Completion Demo</h2>
<form><textarea id="code" name="code">
(function() {
"use strict";

Expand Down Expand Up @@ -65,5 +76,4 @@ <h1>CodeMirror: Any Word Completion Demo</h1>
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
</body>
</html>
</article>
49 changes: 31 additions & 18 deletions demo/bidi.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Bi-directional Text Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">

<title>CodeMirror: Bi-directional Text Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
</head>
<body>
<h1>CodeMirror: Bi-directional Text Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Bi-directional Text</a>
</ul>
</div>

<article>
<h2>Bi-directional Text Demo</h2>
<form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by
Google Translate -->

<dl>
Expand Down Expand Up @@ -48,14 +58,17 @@ <h1>CodeMirror: Bi-directional Text Demo</h1>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html",
lineNumbers: true,
lineWrapping: true
lineNumbers: true
});
</script>

<p>Demonstration of bi-directional text support. See
the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
blog post</a> for more background.</p>

</body>
</html>
<p><strong>Note:</strong> There is
a <a href="https://github.com/marijnh/CodeMirror/issues/1757">known
bug</a> with cursor motion and mouse clicks in bi-directional lines
that are line wrapped.</p>

</article>
45 changes: 22 additions & 23 deletions demo/btree.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: B-Tree visualization</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: B-Tree visualization</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<style type="text/css">
.lineblock { display: inline-block; margin: 1px; height: 5px; }
.CodeMirror {border: 1px solid #aaa; height: 400px}
</style>
</head>
<body>
<h1>CodeMirror: B-Tree visualization</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<p>Shows a visual representation of the b-tree that CodeMirror
uses to store its document. See
the <a href="http://marijnhaverbeke.nl/blog/codemirror-line-tree.html">corresponding
blog post</a> for a description of this format. The gray blocks
under each leaf show the lines it holds (with their width
representing the line height). Add and remove content to see how
the nodes are split and merged to keep the tree balanced.</p>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">B-Tree visualization</a>
</ul>
</div>

<div style="position: relative">
<div style="width: 60%; display: inline-block; vertical-align: top">
<form><textarea id="code" name="code">type here, see a summary of the document b-tree to the right</textarea></form>
<article>
<h2>B-Tree visualization</h2>
<form><textarea id="code" name="code">type here, see a summary of the document b-tree below</textarea></form>
</div>
<div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
</div>
Expand Down Expand Up @@ -83,5 +83,4 @@ <h1>CodeMirror: B-Tree visualization</h1>

<p><button onclick="fillEditor()">Add a lot of content</button></p>

</body>
</html>
</article>
43 changes: 27 additions & 16 deletions demo/buffers.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Multiple Buffer & Split View Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css" id=style>

<title>CodeMirror: Multiple Buffer & Split View Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<style type="text/css" id=style>
.CodeMirror {border: 1px solid black; height: 250px;}
</style>
</head>
<body>
<h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Multiple Buffer & Split View</a>
</ul>
</div>

<article>
<h2>Multiple Buffer & Split View Demo</h2>


<div id=code_top></div>
<div>
Expand Down Expand Up @@ -94,5 +106,4 @@ <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
to use a single editor to display multiple documents.</p>

</body>
</html>
</article>
41 changes: 25 additions & 16 deletions demo/changemode.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Mode-Changing Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/scheme/scheme.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Mode-Changing Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/scheme/scheme.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid black;}
</style>
</head>
<body>
<h1>CodeMirror: Mode-Changing demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Mode-Changing</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Mode-Changing Demo</h2>
<form><textarea id="code" name="code">
;; If there is Scheme code in here, the editor will be in Scheme mode.
;; If you put in JS instead, it'll switch to JS mode.

Expand Down Expand Up @@ -46,5 +56,4 @@ <h1>CodeMirror: Mode-Changing demo</h1>
editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
}
</script>
</body>
</html>
</article>
54 changes: 27 additions & 27 deletions demo/closebrackets.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Closebrackets Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/closebrackets.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
</style>
</head>
<body>

<h1>CodeMirror: Closebrackets Demo</h1>

<p>Type a bracket like '[', '(', '{', '&quot;', or '''
and <a href="../doc/manual.html#addon_closebrackets">the addon</a>
will auto-close it. Type the closing variant when directly in
front of a matching character and it will overwrite it.</p>

<p>If you backspace over a starting bracket while inside empty brackets
(e.g. <code>{|}</code>), it will delete the closing bracket for you.</p>
<title>CodeMirror: Closebrackets Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">


<form><textarea id="code" name="code">(function() {
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/closebrackets.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
</style>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Closebrackets</a>
</ul>
</div>

<article>
<h2>Closebrackets Demo</h2>
<form><textarea id="code" name="code">(function() {
var DEFAULT_BRACKETS = "()[]{}''\"\"";

CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
Expand Down Expand Up @@ -59,5 +60,4 @@ <h1>CodeMirror: Closebrackets Demo</h1>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
</script>
</body>
</html>
</article>
55 changes: 29 additions & 26 deletions demo/closetag.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Close-Tag Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/closetag.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">

<title>CodeMirror: Close-Tag Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/closetag.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
</style>
</head>
<body>

<h1>Close-Tag Demo</h1>
<ul>
<li>Type an html tag. When you type '>' or '/', the tag will auto-close/complete. Block-level tags will indent.</li>
<li>There are options for disabling tag closing or customizing the list of tags to indent.</li>
<li>Works with "text/html" (based on htmlmixed.js or xml.js) mode.</li>
<li>View source for key binding details.</li>
</ul>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Close-Tag</a>
</ul>
</div>

<form><textarea id="code" name="code"><html</textarea></form>
<article>
<h2>Close-Tag Demo</h2>
<form><textarea id="code" name="code"><html</textarea></form>

<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: 'text/html',
autoCloseTags: true
});
</script>
</body>
</html>
</article>
52 changes: 31 additions & 21 deletions demo/complete.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Autocomplete Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../addon/hint/javascript-hint.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Autocomplete demo</h1>

<form><textarea id="code" name="code">
<title>CodeMirror: Autocomplete Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/javascript-hint.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Autocomplete</a>
</ul>
</div>

<article>
<h2>Autocomplete Demo</h2>
<form><textarea id="code" name="code">
function getCompletions(token, context) {
var found = [], start = token.string;
function maybeAdd(str) {
Expand Down Expand Up @@ -52,10 +63,10 @@ <h1>CodeMirror: Autocomplete demo</h1>
}
</textarea></form>

<p>Press <strong>ctrl-space</strong> to activate autocompletion. See
the code (<a href="../addon/hint/show-hint.js">here</a>
and <a href="../addon/hint/javascript-hint.js">here</a>) to figure out
how it works.</p>
<p>Press <strong>ctrl-space</strong> to activate autocompletion. Built
on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a>
and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a>
addons.</p>

<script>
CodeMirror.commands.autocomplete = function(cm) {
Expand All @@ -66,5 +77,4 @@ <h1>CodeMirror: Autocomplete demo</h1>
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
</body>
</html>
</article>
53 changes: 31 additions & 22 deletions demo/emacs.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,38 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Emacs bindings demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../keymap/emacs.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<script src="../addon/comment/comment.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script>
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Emacs bindings demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../keymap/emacs.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<script src="../addon/comment/comment.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
</head>
<body>
<h1>CodeMirror: Emacs bindings demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Emacs bindings</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Emacs bindings demo</h2>
<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
Expand Down Expand Up @@ -62,5 +72,4 @@ <h1>CodeMirror: Emacs bindings demo</h1>
});
</script>

</body>
</html>
</article>
64 changes: 37 additions & 27 deletions demo/folding.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Code Folding Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/fold/foldcode.js"></script>
<script src="../addon/fold/foldgutter.js"></script>
<script src="../addon/fold/brace-fold.js"></script>
<script src="../addon/fold/xml-fold.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Code Folding Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/fold/foldcode.js"></script>
<script src="../addon/fold/foldgutter.js"></script>
<script src="../addon/fold/brace-fold.js"></script>
<script src="../addon/fold/xml-fold.js"></script>
<script src="../addon/fold/comment-fold.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-foldmarker {
color: blue;
Expand All @@ -37,20 +37,29 @@
content: "\25B8";
}
</style>
</head>
<body>
<h1>CodeMirror: Code Folding Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Code Folding</a>
</ul>
</div>

<p>Demonstration of code folding using the code
in <a href="../doc/manual.html#addon_foldcode"><code>foldcode.js</code></a>
and <a href="../doc/manual.html#addon_foldgutter"><code>foldgutter.js</code></a>.
Press ctrl-q or click on the gutter markers to fold a block, again
to unfold.</p>
<form>
<article>
<h2>Code Folding Demo</h2>
<form>
<div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
<div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
</form>
<script id="script">
<script id="script">
/*
* Demonstration of code folding
*/
window.onload = function() {
var te = document.getElementById("code");
var sc = document.getElementById("script");
Expand All @@ -64,7 +73,9 @@ <h1>CodeMirror: Code Folding Demo</h1>
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
foldGutter: {
rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.brace, CodeMirror.fold.comment)
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
editor.foldCode(CodeMirror.Pos(8, 0));
Expand All @@ -81,5 +92,4 @@ <h1>CodeMirror: Code Folding Demo</h1>
editor_html.foldCode(CodeMirror.Pos(1, 0));
};
</script>
</body>
</html>
</article>
85 changes: 34 additions & 51 deletions demo/fullscreen.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Full Screen Editing</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../theme/night.css">
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
.CodeMirror-fullscreen {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
z-index: 9999;
}
</style>
</head>
<body>
<h1>CodeMirror: Full Screen Editing</h1>
<title>CodeMirror: Full Screen Editing</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/display/fullscreen.css">
<link rel="stylesheet" href="../theme/night.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/display/fullscreen.js"></script>

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<form><textarea id="code" name="code" rows="5">
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Full Screen Editing</a>
</ul>
</div>

<article>
<h2>Full Screen Editing</h2>
<form><textarea id="code" name="code" rows="5">
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
<dd>Whether, when indenting, the first N*8 spaces should be
replaced by N tabs. Default is false.</dd>
Expand Down Expand Up @@ -104,44 +108,23 @@ <h1>CodeMirror: Full Screen Editing</h1>

</textarea></form>
<script>
function isFullScreen(cm) {
return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
}
function winHeight() {
return window.innerHeight || (document.documentElement || document.body).clientHeight;
}
function setFullScreen(cm, full) {
var wrap = cm.getWrapperElement();
if (full) {
wrap.className += " CodeMirror-fullscreen";
wrap.style.height = winHeight() + "px";
document.documentElement.style.overflow = "hidden";
} else {
wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
wrap.style.height = "";
document.documentElement.style.overflow = "";
}
cm.refresh();
}
CodeMirror.on(window, "resize", function() {
var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
if (!showing) return;
showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
theme: "night",
extraKeys: {
"F11": function(cm) {
setFullScreen(cm, !isFullScreen(cm));
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (isFullScreen(cm)) setFullScreen(cm, false);
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
</script>

<p>Press <strong>F11</strong> when cursor is in the editor to toggle full screen editing. <strong>Esc</strong> can also be used to <i>exit</i> full screen editing.</p>
</body>
</html>
<p>Demonstration of
the <a href="../doc/manual.html#addon_fullscreen">fullscreen</a>
addon. Press <strong>F11</strong> when cursor is in the editor to
toggle full screen editing. <strong>Esc</strong> can also be used
to <i>exit</i> full screen editing.</p>
</article>
56 changes: 33 additions & 23 deletions demo/html5complete.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,38 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML completion demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../addon/hint/xml-hint.js"></script>
<script src="../addon/hint/html-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>

<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">

<title>CodeMirror: HTML completion demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/xml-hint.js"></script>
<script src="../addon/hint/html-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
</style>
</head>
<body>

<h1>HTML completion demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">HTML completion</a>
</ul>
</div>

<article>
<h2>HTML completion demo</h2>

<p>Shows the <a href="xmlcomplete.html">XML completer</a>
parameterized with information about the tags in HTML.
Press <strong>ctrl-space</strong> to activate completion.</p>
Expand All @@ -40,5 +51,4 @@ <h1>HTML completion demo</h1>
});
};
</script>
</body>
</html>
</article>
41 changes: 25 additions & 16 deletions demo/indentwrap.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Indented wrapped line demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">

<title>CodeMirror: Indented wrapped line demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
</head>
<body>
<h1>CodeMirror: Indented wrapped line demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Indented wrapped line</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Indented wrapped line demo</h2>
<form><textarea id="code" name="code">
<!doctype html>
<body>
<h2 id="overview">Overview</h2>
Expand Down Expand Up @@ -45,5 +55,4 @@ <h2 id="overview">Overview</h2>
editor.refresh();
</script>

</body>
</html>
</article>
51 changes: 31 additions & 20 deletions demo/lint.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,37 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Linter Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
<script src="https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<link rel="stylesheet" href="../addon/lint/lint.css">
<script src="../addon/lint/lint.js"></script>
<script src="../addon/lint/javascript-lint.js"></script>
<script src="../addon/lint/json-lint.js"></script>

<style type="text/css">
<title>CodeMirror: Linter Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/lint/lint.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
<script src="https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
<script src="../addon/lint/lint.js"></script>
<script src="../addon/lint/javascript-lint.js"></script>
<script src="../addon/lint/json-lint.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid black;}
</style>
</head>
<body>
<h1>CodeMirror: Linter Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Linter</a>
</ul>
</div>

<article>
<h2>Linter Demo</h2>


<p><textarea id="code-js">var widgets = []
function updateHints() {
Expand Down Expand Up @@ -86,5 +98,4 @@ <h1>CodeMirror: Linter Demo</h1>
});
</script>

</body>
</html>
</article>
39 changes: 24 additions & 15 deletions demo/loadmode.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Lazy Mode Loading Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/mode/loadmode.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Lazy Mode Loading Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/mode/loadmode.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
</head>
<body>
<h1>CodeMirror: Lazy Mode Loading</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Lazy Mode Loading</a>
</ul>
</div>

<form><textarea id="code" name="code">This is the editor.
<article>
<h2>Lazy Mode Loading Demo</h2>
<form><textarea id="code" name="code">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*/.
Expand All @@ -36,5 +46,4 @@ <h1>CodeMirror: Lazy Mode Loading</h1>
CodeMirror.autoLoadMode(editor, modeInput.value);
}
</script>
</body>
</html>
</article>
41 changes: 25 additions & 16 deletions demo/marker.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Breakpoint Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">

<title>CodeMirror: Breakpoint Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<style type="text/css">
.breakpoints {width: .8em;}
.breakpoint { color: #822; }
.CodeMirror {border: 1px solid #aaa;}
</style>
</head>
<body>
<h1>CodeMirror: Breakpoint demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Breakpoint</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Breakpoint Demo</h2>
<form><textarea id="code" name="code">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"]
Expand Down Expand Up @@ -55,5 +65,4 @@ <h1>CodeMirror: Breakpoint demo</h1>
}
</script>

</body>
</html>
</article>
41 changes: 25 additions & 16 deletions demo/markselection.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Match Highlighter Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/selection/mark-selection.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Match Highlighter Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/selection/mark-selection.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-selected { background-color: blue !important; }
.CodeMirror-selectedtext { color: white; }
</style>
</head>
<body>
<h1>CodeMirror: Mark Selection Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Match Highlighter</a>
</ul>
</div>

<form><textarea id="code" name="code">Select something from here.
<article>
<h2>Match Highlighter Demo</h2>
<form><textarea id="code" name="code">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 colour.</textarea></form>
Expand All @@ -32,5 +42,4 @@ <h1>CodeMirror: Mark Selection Demo</h1>

<p>Simple addon to easily mark (and style) selected text.</p>

</body>
</html>
</article>
41 changes: 25 additions & 16 deletions demo/matchhighlighter.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,37 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Match Highlighter Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/match-highlighter.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Match Highlighter Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/match-highlighter.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>CodeMirror: Match Highlighter Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Match Highlighter</a>
</ul>
</div>

<form><textarea id="code" name="code">Select this text: hardToSpotVar
<article>
<h2>Match Highlighter Demo</h2>
<form><textarea id="code" name="code">Select this text: hardToSpotVar
And everywhere else in your code where hardToSpotVar appears will automatically illuminate.
Give it a try! No more hardToSpotVars.</textarea></form>

Expand All @@ -34,5 +44,4 @@ <h1>CodeMirror: Match Highlighter Demo</h1>

<p>Search and highlight occurences of the selected text.</p>

</body>
</html>
</article>
45 changes: 28 additions & 17 deletions demo/matchtags.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Tag Matcher Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/fold/xml-fold.js"></script>
<script src="../addon/edit/matchtags.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">

<title>CodeMirror: Tag Matcher Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/fold/xml-fold.js"></script>
<script src="../addon/edit/matchtags.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
</style>
</head>
<body>
<h1>CodeMirror: Tag Matcher Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Tag Matcher</a>
</ul>
</div>

<article>
<h2>Tag Matcher Demo</h2>


<div id="editor"></div>

Expand All @@ -34,5 +46,4 @@ <h1>CodeMirror: Tag Matcher Demo</h1>
<p>Put the cursor on or inside a pair of tags to highlight them.
Press Ctrl-J to jump to the tag that matches the one under the
cursor.</p>
</body>
</html>
</article>
41 changes: 28 additions & 13 deletions demo/merge.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<!doctype html>
<head>
<meta charset="utf-8">
<link rel=stylesheet href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/merge/dep/diff_match_patch.js"></script>
<link rel=stylesheet href="../addon/merge/merge.css">
<script src="../addon/merge/merge.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<title>CodeMirror: merge view demo</title>
<style>

<title>CodeMirror: merge view demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel=stylesheet href="../lib/codemirror.css">
<link rel=stylesheet href="../addon/merge/merge.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/merge/dep/diff_match_patch.js"></script>
<script src="../addon/merge/merge.js"></script>
<style>
.CodeMirror { line-height: 1.2; }
body { max-width: 80em; }
span.clicky {
Expand All @@ -20,9 +21,22 @@
border-radius: 3px;
}
</style>
</head>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">merge view</a>
</ul>
</div>

<article>
<h2>merge view demo</h2>

<h1>CodeMirror: merge view demo</h1>

<div id=view></div>

Expand Down Expand Up @@ -61,3 +75,4 @@ <h1>CodeMirror: merge view demo</h1>
initUI(2);
};
</script>
</article>
41 changes: 25 additions & 16 deletions demo/multiplex.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Multiplexing Parser Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/mode/multiplex.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Multiplexing Parser Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/mode/multiplex.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid black;}
.cm-delimit {color: #fa4;}
</style>
</head>
<body>
<h1>CodeMirror: Multiplexing Parser Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Multiplexing Parser</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Multiplexing Parser Demo</h2>
<form><textarea id="code" name="code">
<html>
<body style="<<magic>>">
<h1><< this is not <html >></h1>
Expand Down Expand Up @@ -62,5 +72,4 @@ <h1><< this is not <html >></h1>
<a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
</p>

</body>
</html>
</article>
43 changes: 26 additions & 17 deletions demo/mustache.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Overlay Parser Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/mode/overlay.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Overlay Parser Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/mode/overlay.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid black;}
.cm-mustache {color: #0ca;}
</style>
</head>
<body>
<h1>CodeMirror: Overlay Parser Demo</h1>
</style>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<form><textarea id="code" name="code">
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Overlay Parser</a>
</ul>
</div>

<article>
<h2>Overlay Parser Demo</h2>
<form><textarea id="code" name="code">
<html>
<body>
<h1>{{title}}</h1>
Expand Down Expand Up @@ -55,5 +65,4 @@ <h1>{{title}}</h1>
in <a href="../addon/mode/overlay.js"><code>overlay.js</code></a>. View
source to see the 15 lines of code needed to accomplish this.</p>

</body>
</html>
</article>
39 changes: 24 additions & 15 deletions demo/placeholder.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Placeholder demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/display/placeholder.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Placeholder demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/display/placeholder.js"></script>
<style type="text/css">
.CodeMirror { border: 1px solid silver; }
.CodeMirror-empty { outline: 1px solid #c22; }
.CodeMirror-empty.CodeMirror-focused { outline: none; }
.CodeMirror pre.CodeMirror-placeholder { color: #999; }
</style>
</head>
<body>
<h1>CodeMirror: Placeholder demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Placeholder</a>
</ul>
</div>

<form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
<article>
<h2>Placeholder demo</h2>
<form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>

<p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
plug-in adds an option <code>placeholder</code> that can be set to
Expand All @@ -32,5 +42,4 @@ <h1>CodeMirror: Placeholder demo</h1>
});
</script>

</body>
</html>
</article>
46 changes: 29 additions & 17 deletions demo/preview.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<script src=../lib/codemirror.js></script>
<script src=../mode/xml/xml.js></script>
<script src=../mode/javascript/javascript.js></script>
<script src=../mode/css/css.js></script>
<script src=../mode/htmlmixed/htmlmixed.js></script>
<link rel=stylesheet href=../lib/codemirror.css>
<link rel=stylesheet href=../doc/docs.css>
<style type=text/css>

<title>CodeMirror: HTML5 preview</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel=stylesheet href=../lib/codemirror.css>
<script src=../lib/codemirror.js></script>
<script src=../mode/xml/xml.js></script>
<script src=../mode/javascript/javascript.js></script>
<script src=../mode/css/css.js></script>
<script src=../mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {
float: left;
width: 50%;
Expand All @@ -24,9 +24,22 @@
border-left: 0px;
}
</style>
</head>
<body>
<h1>CodeMirror: HTML5 preview</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">HTML5 preview</a>
</ul>
</div>

<article>
<h2>HTML5 preview</h2>

<textarea id=code name=code>
<!doctype html>
<html>
Expand Down Expand Up @@ -72,5 +85,4 @@ <h1>CodeMirror: HTML5 preview</h1>
}
setTimeout(updatePreview, 300);
</script>
</body>
</html>
</article>
39 changes: 24 additions & 15 deletions demo/resize.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Autoresize Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/css/css.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Autoresize Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/css/css.js"></script>
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
height: auto;
Expand All @@ -18,11 +17,22 @@
overflow-x: auto;
}
</style>
</head>
<body>
<h1>CodeMirror: Autoresize demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Autoresize</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Autoresize Demo</h2>
<form><textarea id="code" name="code">
.CodeMirror {
border: 1px solid #eee;
height: auto;
Expand All @@ -45,5 +55,4 @@ <h1>CodeMirror: Autoresize demo</h1>
});
</script>

</body>
</html>
</article>
40 changes: 26 additions & 14 deletions demo/runmode.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Mode Runner Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/runmode/runmode.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
</head>
<body>
<h1>CodeMirror: Mode Runner Demo</h1>

<title>CodeMirror: Mode Runner Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/runmode/runmode.js"></script>
<script src="../mode/xml/xml.js"></script>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Mode Runner</a>
</ul>
</div>

<article>
<h2>Mode Runner Demo</h2>


<textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
<foobar>
Expand Down Expand Up @@ -46,5 +59,4 @@ <h1>CodeMirror: Mode Runner Demo</h1>
(through <code>innerHTML</code>).</dd>
</dl>

</body>
</html>
</article>
47 changes: 28 additions & 19 deletions demo/search.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Search/Replace Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Search/Replace Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
dt {font-family: monospace; color: #666;}
</style>
</head>
<body>
<h1>CodeMirror: Search/Replace Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Search/Replace</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Search/Replace Demo</h2>
<form><textarea id="code" name="code">
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
<dd>Whether, when indenting, the first N*8 spaces should be
replaced by N tabs. Default is false.</dd>
Expand Down Expand Up @@ -81,5 +91,4 @@ <h1>CodeMirror: Search/Replace Demo</h1>
For good-looking input dialogs, you also want to include
<a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a>
and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p>
</body>
</html>
</article>
32 changes: 22 additions & 10 deletions demo/spanaffectswrapping_shim.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title>
<link rel="stylesheet" href="../doc/docs.css">
</head>
<body>
<h1>CodeMirror: odd wrapping shim</h1>

<title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Automatically derive odd wrapping behavior for your browser</a>
</ul>
</div>

<article>
<h2>Automatically derive odd wrapping behavior for your browser</h2>


<p>This is a hack to automatically derive
a <code>spanAffectsWrapping</code> regexp for a browser. See the
Expand Down Expand Up @@ -69,5 +82,4 @@ <h1>CodeMirror: odd wrapping shim</h1>

document.getElementById("output").appendChild(document.createTextNode("Your regexp is: " + (newRE || "^$")));
</script>
</body>
</html>
</article>
76 changes: 41 additions & 35 deletions demo/tern.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,46 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Tern Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<script src="../addon/dialog/dialog.js"></script>
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<script src="../addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../addon/tern/tern.js"></script>
<link rel="stylesheet" href="../addon/tern/tern.css">

<!-- NOTE: if you are going to actually deploy this in production,
DO NOT hot-link these files. Host them yourself. -->
<script src="http://marijnhaverbeke.nl/acorn/acorn.js"></script>
<script src="http://marijnhaverbeke.nl/acorn/acorn_loose.js"></script>
<script src="http://marijnhaverbeke.nl/acorn/util/walk.js"></script>
<script src="http://ternjs.net/lib/signal.js"></script>
<script src="http://ternjs.net/lib/tern.js"></script>
<script src="http://ternjs.net/lib/def.js"></script>
<script src="http://ternjs.net/lib/comment.js"></script>
<script src="http://ternjs.net/lib/infer.js"></script>
<script src="http://ternjs.net/plugin/doc_comment.js"></script>

<style>

<title>CodeMirror: Tern Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<link rel="stylesheet" href="../addon/tern/tern.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/tern/tern.js"></script>
<script src="http://marijnhaverbeke.nl/acorn/acorn.js"></script>
<script src="http://marijnhaverbeke.nl/acorn/acorn_loose.js"></script>
<script src="http://marijnhaverbeke.nl/acorn/util/walk.js"></script>
<script src="http://ternjs.net/lib/signal.js"></script>
<script src="http://ternjs.net/lib/tern.js"></script>
<script src="http://ternjs.net/lib/def.js"></script>
<script src="http://ternjs.net/lib/comment.js"></script>
<script src="http://ternjs.net/lib/infer.js"></script>
<script src="http://ternjs.net/plugin/doc_comment.js"></script>
<style>
.CodeMirror {border: 1px solid #ddd;}
</style>
</head>
<body>
<h1>CodeMirror: Tern Demo</h1>

<form><textarea id="code" name="code">// Use ctrl-space to complete something
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Tern</a>
</ul>
</div>

<article>
<h2>Tern Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something
// Put the cursor in or after an expression, press ctrl-i to
// find its type

Expand Down Expand Up @@ -118,5 +125,4 @@ <h1>CodeMirror: Tern Demo</h1>
});
</script>

</body>
</html>
</article>
97 changes: 58 additions & 39 deletions demo/theme.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,59 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Theme Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../theme/neat.css">
<link rel="stylesheet" href="../theme/elegant.css">
<link rel="stylesheet" href="../theme/erlang-dark.css">
<link rel="stylesheet" href="../theme/night.css">
<link rel="stylesheet" href="../theme/monokai.css">
<link rel="stylesheet" href="../theme/cobalt.css">
<link rel="stylesheet" href="../theme/eclipse.css">
<link rel="stylesheet" href="../theme/rubyblue.css">
<link rel="stylesheet" href="../theme/lesser-dark.css">
<link rel="stylesheet" href="../theme/xq-dark.css">
<link rel="stylesheet" href="../theme/xq-light.css">
<link rel="stylesheet" href="../theme/ambiance.css">
<link rel="stylesheet" href="../theme/blackboard.css">
<link rel="stylesheet" href="../theme/vibrant-ink.css">
<link rel="stylesheet" href="../theme/solarized.css">
<link rel="stylesheet" href="../theme/twilight.css">
<link rel="stylesheet" href="../theme/midnight.css">
<link rel="stylesheet" href="../theme/3024-day.css">
<link rel="stylesheet" href="../theme/3024-night.css">
<link rel="stylesheet" href="../theme/base16-light.css">
<link rel="stylesheet" href="../theme/base16-dark.css">
<link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
<script src="../mode/javascript/javascript.js"></script>
<script src="../keymap/extra.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Theme Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../theme/3024-day.css">
<link rel="stylesheet" href="../theme/3024-night.css">
<link rel="stylesheet" href="../theme/ambiance.css">
<link rel="stylesheet" href="../theme/base16-dark.css">
<link rel="stylesheet" href="../theme/base16-light.css">
<link rel="stylesheet" href="../theme/blackboard.css">
<link rel="stylesheet" href="../theme/cobalt.css">
<link rel="stylesheet" href="../theme/eclipse.css">
<link rel="stylesheet" href="../theme/elegant.css">
<link rel="stylesheet" href="../theme/erlang-dark.css">
<link rel="stylesheet" href="../theme/lesser-dark.css">
<link rel="stylesheet" href="../theme/midnight.css">
<link rel="stylesheet" href="../theme/monokai.css">
<link rel="stylesheet" href="../theme/neat.css">
<link rel="stylesheet" href="../theme/night.css">
<link rel="stylesheet" href="../theme/paraiso-dark.css">
<link rel="stylesheet" href="../theme/paraiso-light.css">
<link rel="stylesheet" href="../theme/rubyblue.css">
<link rel="stylesheet" href="../theme/solarized.css">
<link rel="stylesheet" href="../theme/the-matrix.css">
<link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="../theme/twilight.css">
<link rel="stylesheet" href="../theme/vibrant-ink.css">
<link rel="stylesheet" href="../theme/xq-dark.css">
<link rel="stylesheet" href="../theme/xq-light.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../keymap/extra.js"></script>
<script src="../addon/selection/active-line.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid black; font-size:13px}
</style>
</head>
<body>
<h1>CodeMirror: Theme demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Theme</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Theme Demo</h2>
<form><textarea id="code" name="code">
function findSequence(goal) {
function find(start, history) {
if (start == goal)
Expand Down Expand Up @@ -69,9 +84,12 @@ <h1>CodeMirror: Theme demo</h1>
<option>monokai</option>
<option>neat</option>
<option>night</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>rubyblue</option>
<option>solarized dark</option>
<option>solarized light</option>
<option>the-matrix</option>
<option>tomorrow-night-eighties</option>
<option>twilight</option>
<option>vibrant-ink</option>
Expand All @@ -82,7 +100,9 @@ <h1>CodeMirror: Theme demo</h1>

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true
});
var input = document.getElementById("select");
function selectTheme() {
Expand All @@ -96,5 +116,4 @@ <h1>CodeMirror: Theme demo</h1>
editor.setOption("theme", choice);
}
</script>
</body>
</html>
</article>
39 changes: 24 additions & 15 deletions demo/trailingspace.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Trailing Whitespace Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/trailingspace.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Trailing Whitespace Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/edit/trailingspace.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.cm-trailingspace {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
background-position: bottom left;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>CodeMirror: Trailing Whitespace Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Trailing Whitespace</a>
</ul>
</div>

<form><textarea id="code" name="code">This text
<article>
<h2>Trailing Whitespace Demo</h2>
<form><textarea id="code" name="code">This text
has some
trailing whitespace!</textarea></form>

Expand All @@ -35,5 +45,4 @@ <h1>CodeMirror: Trailing Whitespace Demo</h1>
the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a>
addon to highlight trailing whitespace.</p>

</body>
</html>
</article>
45 changes: 27 additions & 18 deletions demo/variableheight.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Variable Height Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/markdown/markdown.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">

<title>CodeMirror: Variable Height Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/markdown/markdown.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid silver; border-width: 1px 2px; }
.cm-header { font-size: 150%; font-family: arial; }
.cm-strong { font-size: 140%; }
</style>
</head>
<body>
<h1>CodeMirror: Variable Height Demo</h1>

<form><textarea id="code" name="code"># A First Level Header
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Variable Height</a>
</ul>
</div>

<article>
<h2>Variable Height Demo</h2>
<form><textarea id="code" name="code"># A First Level Header

**Bold** text in a normal-size paragraph.

Expand Down Expand Up @@ -48,5 +58,4 @@ <h1>CodeMirror: Variable Height Demo</h1>
mode: "markdown"
});
</script>
</body>
</html>
</article>
47 changes: 28 additions & 19 deletions demo/vim.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Vim bindings demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../keymap/vim.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">

<style type="text/css">
<title>CodeMirror: Vim bindings demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../keymap/vim.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
</head>
<body>
<h1>CodeMirror: Vim bindings demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Vim bindings</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Vim bindings demo</h2>
<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
Expand Down Expand Up @@ -61,5 +71,4 @@ <h1>CodeMirror: Vim bindings demo</h1>
});
</script>

</body>
</html>
</article>
39 changes: 24 additions & 15 deletions demo/visibletabs.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Visible tabs demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Visible tabs demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>CodeMirror: Visible tabs demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Visible tabs</a>
</ul>
</div>

<form><textarea id="code" name="code">
<article>
<h2>Visible tabs demo</h2>
<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
Expand Down Expand Up @@ -49,5 +59,4 @@ <h1>CodeMirror: Visible tabs demo</h1>
});
</script>

</body>
</html>
</article>
41 changes: 26 additions & 15 deletions demo/widget.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Inline Widget Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
<link rel="stylesheet" href="../doc/docs.css">

<style type="text/css">
<title>CodeMirror: Inline Widget Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid black;}
.lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
.lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
</style>
</head>
<body>
<h1>CodeMirror: Inline Widget Demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Inline Widget</a>
</ul>
</div>

<article>
<h2>Inline Widget Demo</h2>


<div id=code></div>
<script id="script">var widgets = []
Expand Down Expand Up @@ -70,5 +82,4 @@ <h1>CodeMirror: Inline Widget Demo</h1>
in the editor (which is the script used on this page), and
inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
display the warnings that JSHint comes up with.</p>
</body>
</html>
</article>
46 changes: 28 additions & 18 deletions demo/xmlcomplete.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: XML Autocomplete Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../addon/hint/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">

<title>CodeMirror: XML Autocomplete Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<style type="text/css">
.CodeMirror { border: 1px solid #eee; }
</style>
</head>
<body>
<h1>CodeMirror: XML Autocomplete demo</h1>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="../doc/manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">XML Autocomplete</a>
</ul>
</div>

<form><textarea id="code" name="code"><!-- write some xml below -->
<article>
<h2>XML Autocomplete Demo</h2>
<form><textarea id="code" name="code"><!-- write some xml below -->
</textarea></form>

<p>Press <strong>ctrl-space</strong>, or type a '<' character to
Expand Down Expand Up @@ -102,5 +113,4 @@ <h1>CodeMirror: XML Autocomplete demo</h1>
}
});
</script>
</body>
</html>
</article>
42 changes: 42 additions & 0 deletions doc/activebookmark.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
(function() {
var pending = false, prevVal = null;

function updateSoon() {
if (!pending) {
pending = true;
setTimeout(update, 250);
}
}

function update() {
pending = false;
var marks = document.getElementById("nav").getElementsByTagName("a"), found;
for (var i = 0; i < marks.length; ++i) {
var mark = marks[i], m;
if (mark.getAttribute("data-default")) {
if (found == null) found = i;
} else if (m = mark.href.match(/#(.*)/)) {
var ref = document.getElementById(m[1]);
if (ref && ref.getBoundingClientRect().top < 50)
found = i;
}
}
if (found != null && found != prevVal) {
prevVal = found;
var lis = document.getElementById("nav").getElementsByTagName("li");
for (var i = 0; i < lis.length; ++i) lis[i].className = "";
for (var i = 0; i < marks.length; ++i) {
if (found == i) {
marks[i].className = "active";
for (var n = marks[i]; n; n = n.parentNode)
if (n.nodeName == "LI") n.className = "active";
} else {
marks[i].className = "";
}
}
}
}

window.addEventListener("scroll", updateSoon);
window.addEventListener("load", updateSoon);
})();
Binary file removed doc/baboon.png
View file
Binary file not shown.
153 changes: 0 additions & 153 deletions doc/baboon_vector.svg
View file

This file was deleted.

45 changes: 25 additions & 20 deletions doc/compress.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Compression Helper</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
<link rel="stylesheet" type="text/css" href="docs.css"/>
</head>
<body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
<title>CodeMirror: Compression Helper</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="docs.css">

<div class="grey">
<img src="baboon.png" class="logo" alt="logo"/>
<pre>
/* Script compression
helper */
</pre>
<div id=nav>
<a href="http://codemirror.net"><img id=logo src="logo.png"></a>

<ul>
<li><a href="../index.html">Home</a>
<li><a href="manual.html">Manual</a>
<li><a href="https://github.com/marijnh/codemirror">Code</a>
</ul>
<ul>
<li><a class=active href="#">Compression helper</a>
</ul>
</div>

<article>

<h2>Script compression helper</h2>

<p>To optimize loading CodeMirror, especially when including a
bunch of different modes, it is recommended that you combine and
minify (and preferably also gzip) the scripts. This page makes
Expand All @@ -28,8 +31,9 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi

<form id="form" action="http://marijnhaverbeke.nl/uglifyjs" method="post">
<input type="hidden" id="download" name="download" value="codemirror-compressed.js"/>
<p>Version: <select id="version" onchange="setVersion(this);" style="padding: 1px">
<p>Version: <select id="version" onchange="setVersion(this);" style="padding: 1px;">
<option value="http://codemirror.net/">HEAD</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=3.16.0;f=">3.16</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=3.15.0;f=">3.15</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=3.14.0;f=">3.14</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=3.13.0;f=">3.13</option>
Expand Down Expand Up @@ -148,11 +152,13 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<option value="http://codemirror.net/addon/edit/closebrackets.js">closebrackets.js</option>
<option value="http://codemirror.net/addon/edit/closetag.js">closetag.js</option>
<option value="http://codemirror.net/addon/runmode/colorize.js">colorize.js</option>
<option value="http://codemirror.net/addon/edit/comment.js">comment.js</option>
<option value="http://codemirror.net/addon/edit/continuecomment.js">continuecomment.js</option>
<option value="http://codemirror.net/addon/comment/comment.js">comment.js</option>
<option value="http://codemirror.net/addon/fold/comment-fold.js">comment-fold.js</option>
<option value="http://codemirror.net/addon/comment/continuecomment.js">continuecomment.js</option>
<option value="http://codemirror.net/addon/edit/continuelist.js">continuelist.js</option>
<option value="http://codemirror.net/addon/dialog/dialog.js">dialog.js</option>
<option value="http://codemirror.net/addon/fold/foldcode.js">foldcode.js</option>
<option value="http://codemirror.net/addon/display/fullscreen.js">fullscreen.js</option>
<option value="http://codemirror.net/addon/hint/html-hint.js">html-hint.js</option>
<option value="http://codemirror.net/addon/fold/indent-fold.js">indent-fold.js</option>
<option value="http://codemirror.net/addon/hint/javascript-hint.js">javascript-hint.js</option>
Expand Down Expand Up @@ -210,5 +216,4 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
}
</script>

</body>
</html>
</article>
280 changes: 167 additions & 113 deletions doc/docs.css
View file
Original file line number Diff line number Diff line change
@@ -1,167 +1,221 @@
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}

body, html { margin: 0; padding: 0; height: 100%; }
section, article { display: block; padding: 0; }

body {
font-family: Droid Sans, Arial, sans-serif;
background: #f8f8f8;
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
line-height: 1.5;
max-width: 64.3em;
margin: 3em auto;
padding: 0 1em;
}

h1 {
letter-spacing: -3px;
font-size: 3.23em;
font-weight: bold;
margin: 0;
p { margin-top: 0; }

h2, h3 {
font-weight: normal;
text-decoration: underline;
margin-bottom: .7em;
}
h2 { font-size: 120%; }
h3 { font-size: 110%; }
article > h2:first-child, section:first-child > h2 { margin-top: 0; }

h2 {
font-size: 1.23em;
font-weight: bold;
margin: .5em 0;
letter-spacing: -1px;
a, a:visited, a:link, .quasilink {
color: #A21313;
text-decoration: none;
}

h3 {
font-size: 1.1em;
font-weight: bold;
margin: .4em 0;
.quasilink {
cursor: pointer;
}

pre {
background-color: #eee;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 1em;
article {
max-width: 700px;
margin: 0 auto;
border-left: 2px solid #E30808;
border-right: 1px solid #ddd;
padding: 30px 50px 100px 50px;
background: white;
z-index: 2;
position: relative;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

pre.code {
margin: 0 1em;
#nav {
position: fixed;
top: 30px;
right: 50%;
padding-right: 350px;
text-align: right;
z-index: 1;
}

.grey {
background-color: #eee;
border-radius: 6px;
margin-bottom: 1.65em;
margin-top: 0.825em;
padding: 0.825em 1.65em;
position: relative;
@media screen and (max-width: 1000px) {
article {
margin: 0 0 0 160px;
}
#nav {
left: 0; right: none;
width: 160px;
}
}

img.logo {
position: absolute;
right: -1em;
bottom: 4px;
max-width: 23.6875em; /* Scale image down with text to prevent clipping */
#nav ul {
display: block;
margin: 0; padding: 0;
margin-bottom: 32px;
}

.grey > pre {
background:none;
border-radius:0;
padding:0;
margin:0;
font-size:2.2em;
line-height:1.2em;
#nav li {
display: block;
margin-bottom: 4px;
}

a:link, a:visited, .quasilink {
color: #df0019;
cursor: pointer;
text-decoration: none;
#nav li ul {
font-size: 80%;
margin-bottom: 0;
display: none;
}

a:hover, .quasilink:hover {
color: #800004;
#nav li.active ul {
display: block;
}

#nav li li a {
padding-right: 20px;
}

h1 a:link, h1 a:visited, h1 a:hover {
#nav ul a {
color: black;
padding: 0 7px 1px 11px;
}

ul {
margin: 0;
padding-left: 1.2em;
#nav ul a.active, #nav ul a:hover {
border-bottom: 1px solid #E30808;
color: #E30808;
}

a.download {
color: white;
background-color: #df0019;
width: 100%;
display: block;
text-align: center;
font-size: 1.23em;
font-weight: bold;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: .5em 0;
margin-bottom: 1em;
#logo {
margin-right: 7px;
margin-bottom: 25px;
}

a.download:hover {
background-color: #bb0010;
section {
border-top: 1px solid #E30808;
margin: 1.5em 0;
}

.rel {
margin-bottom: 0;
section.first {
border: none;
margin-top: 0;
}

.rel-note {
color: #777;
font-size: .9em;
margin-top: .1em;
#demo {
position: relative;
}

#demolist {
position: absolute;
right: 5px;
top: 5px;
z-index: 25;
}

#bankinfo {
text-align: left;
display: none;
padding: 0 .5em;
position: absolute;
border: 2px solid #aaa;
border-radius: 5px;
background: #eee;
top: 10px;
left: 30px;
}

.logo-braces {
color: #df0019;
#bankinfo_close {
position: absolute;
top: 0; right: 6px;
font-weight: bold;
cursor: pointer;
}

.bigbutton {
cursor: pointer;
text-align: center;
padding: 0 1em;
display: inline-block;
color: white;
position: relative;
top: -4px;
line-height: 1.9;
color: white !important;
background: #A21313;
}

.blk {
float: left;
.bigbutton.right {
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}

.left {
margin-right: 20.68em;
max-width: 37em;
padding-right: 6.53em;
padding-bottom: 1em;
.bigbutton.left {
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
}

.left1 {
width: 15.24em;
padding-right: 6.45em;
.bigbutton:hover {
background: #E30808;
}

.left2 {
max-width: 15.24em;
th {
text-decoration: underline;
font-weight: normal;
text-align: left;
}

.right {
width: 20.68em;
margin-left: -20.68em;
#features ul {
list-style: none;
margin: 0 0 1em;
padding: 0 0 0 1.2em;
}

.leftbig {
width: 42.44em;
padding-right: 6.53em;
#features li:before {
content: "-";
width: 1em;
display: inline-block;
padding: 0;
margin: 0;
margin-left: -1em;
}

.rightsmall {
width: 15.24em;
.rel {
margin-bottom: 0;
}
.rel-note {
margin-top: 0;
color: #555;
}

.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clear { display: inline-block; }
/* start commented backslash hack \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* close commented backslash hack */
pre {
padding-left: 15px;
border-left: 2px solid #ddd;
}

code {
padding: 0 2px;
}

strong {
text-decoration: underline;
font-weight: normal;
}

.field {
border: 1px solid #A21313;
}
Loading