smshine/programming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
smshine
2026-02-07 09:46:32 +08:00
commit 5fcd5dc646
443 changed files with 89466 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
codemirror/demo/activeline.html vendored Normal file
View File

@@ -0,0 +1,76 @@
<!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>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.activeline {background: #e8f2ff !important;}
</style>
</head>
<body>
<h1>CodeMirror: Active Line Demo</h1>
<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"
xmlns:twitter="http://api.twitter.com">
<channel>
<title>Twitter / codemirror</title>
<link>http://twitter.com/codemirror</link>
<atom:link type="application/rss+xml"
href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
<description>Twitter updates from CodeMirror / codemirror.</description>
<language>en-us</language>
<ttl>40</ttl>
<item>
<title>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This one
uses CodeMirror as its editor.</title>
<description>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This
one uses CodeMirror as its editor.</description>
<pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate>
<guid>http://twitter.com/codemirror/statuses/48527733722058752</guid>
<link>http://twitter.com/codemirror/statuses/48527733722058752</link>
<twitter:source>web</twitter:source>
<twitter:place/>
</item>
<item>
<title>codemirror: Posted a description of the CodeMirror 2 internals at
http://codemirror.net/2/internals.html</title>
<description>codemirror: Posted a description of the CodeMirror 2 internals at
http://codemirror.net/2/internals.html</description>
<pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate>
<guid>http://twitter.com/codemirror/statuses/42920879788789760</guid>
<link>http://twitter.com/codemirror/statuses/42920879788789760</link>
<twitter:source>web</twitter:source>
<twitter:place/>
</item>
</channel>
</rss></textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "application/xml",
lineNumbers: true,
lineWrapping: true
});
var hlLine = editor.addLineClass(0, "background", "activeline");
editor.on("cursorActivity", function() {
var cur = editor.getLineHandle(editor.getCursor().line);
if (cur != hlLine) {
editor.removeLineClass(hlLine, "background", "activeline");
hlLine = editor.addLineClass(cur, "background", "activeline");
}
});
</script>
<p>Styling the current cursor line.</p>
</body>
</html>

87
codemirror/demo/btree.html vendored Normal file
View File

@@ -0,0 +1,87 @@
<!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">
.lineblock { display: inline-block; margin: 1px; height: 5px; }
.CodeMirror {border: 1px solid #aaa; height: 400px}
</style>
</head>
<body>
<h1>CodeMirror: B-Tree visualization</h1>
<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>
<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>
</div>
<div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
</div>
<script id="me">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true
});
var updateTimeout;
editor.on("change", function(cm) {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(updateVisual, 200);
});
updateVisual();
function updateVisual() {
var out = document.getElementById("output");
out.innerHTML = "";
function drawTree(out, node) {
if (node.lines) {
out.appendChild(document.createElement("div")).innerHTML =
"<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
var lines = out.appendChild(document.createElement("div"));
lines.style.lineHeight = "6px"; lines.style.marginLeft = "10px";
for (var i = 0; i < node.lines.length; ++i) {
var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
lineElt.className = "lineblock";
var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
if (col.length == 1) col = "0" + col;
lineElt.style.background = "#" + col + col + col;
console.log(line.height, line);
lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
}
} else {
out.appendChild(document.createElement("div")).innerHTML =
"<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
var sub = out.appendChild(document.createElement("div"));
sub.style.paddingLeft = "20px";
for (var i = 0; i < node.children.length; ++i)
drawTree(sub, node.children[i]);
}
}
drawTree(out, editor.view.doc);
}
function fillEditor() {
var sc = document.getElementById("me");
var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n";
doc += doc; doc += doc; doc += doc; doc += doc; doc += doc; doc += doc;
editor.setValue(doc);
}
</script>
<p><button onclick="fillEditor()">Add a lot of content</button></p>
</body>
</html>

50
codemirror/demo/changemode.html vendored Normal file
View File

@@ -0,0 +1,50 @@
<!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">
.CodeMirror {border: 1px solid black;}
</style>
</head>
<body>
<h1>CodeMirror: Mode-Changing demo</h1>
<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.
(define (double x)
(* x x))
</textarea></form>
<p>On changes to the content of the above editor, a (crude) script
tries to auto-detect the language used, and switches the editor to
either JavaScript or Scheme mode based on that.</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "scheme",
lineNumbers: true,
tabMode: "indent"
});
editor.on("change", function() {
clearTimeout(pending);
setTimeout(update, 400);
});
var pending;
function looksLikeScheme(code) {
return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
}
function update() {
editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
}
</script>
</body>
</html>

37
codemirror/demo/closetag.html vendored Normal file
View File

@@ -0,0 +1,37 @@
<!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="../lib/util/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">
.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>
<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>

70
codemirror/demo/complete.html vendored Normal file
View File

@@ -0,0 +1,70 @@
<!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="../lib/util/simple-hint.js"></script>
<link rel="stylesheet" href="../lib/util/simple-hint.css">
<script src="../lib/util/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">
function getCompletions(token, context) {
var found = [], start = token.string;
function maybeAdd(str) {
if (str.indexOf(start) == 0) found.push(str);
}
function gatherCompletions(obj) {
if (typeof obj == "string") forEach(stringProps, maybeAdd);
else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
else if (obj instanceof Function) forEach(funcProps, maybeAdd);
for (var name in obj) maybeAdd(name);
}
if (context) {
// If this is a property, see if it belongs to some object we can
// find in the current environment.
var obj = context.pop(), base;
if (obj.className == "js-variable")
base = window[obj.string];
else if (obj.className == "js-string")
base = "";
else if (obj.className == "js-atom")
base = 1;
while (base != null && context.length)
base = base[context.pop().string];
if (base != null) gatherCompletions(base);
}
else {
// If not, just look in the window object and any local scope
// (reading into JS mode internals to get at the local variables)
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
gatherCompletions(window);
forEach(keywords, maybeAdd);
}
return found;
}
</textarea></form>
<p>Press <strong>ctrl-space</strong> to activate autocompletion. See
the code (<a href="../lib/util/simple-hint.js">here</a>
and <a href="../lib/util/javascript-hint.js">here</a>) to figure out
how it works.</p>
<script>
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
</body>
</html>

60
codemirror/demo/emacs.html vendored Normal file
View File

@@ -0,0 +1,60 @@
<!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>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
</head>
<body>
<h1>CodeMirror: Emacs bindings demo</h1>
<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
{
static char buf[BUFSIZ];
static char *bufp = buf;
static int n = 0;
if (n == 0) { /* buffer is empty */
n = read(0, buf, sizeof buf);
bufp = buf;
}
return (--n >= 0) ? (unsigned char) *bufp++ : EOF;
}
</textarea></form>
<p>The emacs keybindings are enabled by
including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting
the <code>keyMap</code> option to <code>"emacs"</code>. Because
CodeMirror's internal API is quite different from Emacs, they are only
a loose approximation of actual emacs bindings, though.</p>
<p>Also note that a lot of browsers disallow certain keys from being
captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the
result that idiomatic use of Emacs keys will constantly close your tab
or open a new window.</p>
<script>
CodeMirror.commands.save = function() {
var elt = editor.getWrapperElement();
elt.style.background = "#def";
setTimeout(function() { elt.style.background = ""; }, 300);
};
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "text/x-csrc",
keyMap: "emacs"
});
</script>
</body>
</html>

67
codemirror/demo/folding.html vendored Normal file
View File

@@ -0,0 +1,67 @@
<!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="../lib/util/foldcode.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">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-foldmarker {
color: blue;
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
font-family: arial;
line-height: .3;
cursor: pointer;
}
</style>
</head>
<body>
<h1>CodeMirror: Code Folding Demo</h1>
<p>Demonstration of code folding using the code
in <a href="../lib/util/foldcode.js"><code>foldcode.js</code></a>.
Press ctrl-q or click on the gutter to fold a block, again
to unfold.</p>
<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">
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 = "<html>\n " + document.documentElement.innerHTML + "\n</html>";
var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);
window.editor = CodeMirror.fromTextArea(te, {
mode: "javascript",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}}
});
editor.on("gutterClick", foldFunc);
foldFunc(editor, 9);
var foldFunc_html = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
window.editor_html = CodeMirror.fromTextArea(te_html, {
mode: "text/html",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){foldFunc_html(cm, cm.getCursor().line);}}
});
editor_html.on("gutterClick", foldFunc_html);
foldFunc_html(editor_html, 11);
foldFunc_html(editor_html, 1);
};
</script>
</body>
</html>

81
codemirror/demo/formatting.html vendored Normal file
View File

@@ -0,0 +1,81 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Formatting Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../lib/util/formatting.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
}
td {
padding-right: 20px;
}
</style>
</head>
<body>
<h1>CodeMirror: Formatting demo</h1>
<form><textarea id="code" name="code"><script> function (s,e){ for(var i=0; i < 1; i++) test("test();a=1");} </script>
<script>
function test(c){ for (var i = 0; i < 10; i++){ process("a.b();c = null;", 300);}
}
</script>
<table><tr><td>test 1</td></tr><tr><td>test 2</td></tr></table>
<script> function test() { return 1;} </script>
<style> .test { font-size: medium; font-family: monospace; }
</style></textarea></form>
<p>Select a piece of code and click one of the links below to apply automatic formatting to the selected text or comment/uncomment the selected text. Note that the formatting behavior depends on the current block's mode.
<table>
<tr>
<td>
<a href="javascript:autoFormatSelection()">
Autoformat Selected
</a>
</td>
<td>
<a href="javascript:commentSelection(true)">
Comment Selected
</a>
</td>
<td>
<a href="javascript:commentSelection(false)">
Uncomment Selected
</a>
</td>
</tr>
</table>
</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "htmlmixed"
});
CodeMirror.commands["selectAll"](editor);
function getSelectedRange() {
return { from: editor.getCursor(true), to: editor.getCursor(false) };
}
function autoFormatSelection() {
var range = getSelectedRange();
editor.autoFormatRange(range.from, range.to);
}
function commentSelection(isComment) {
var range = getSelectedRange();
editor.commentRange(isComment, range.from, range.to);
}
</script>
</body>
</html>

147
codemirror/demo/fullscreen.html vendored Normal file
View File

@@ -0,0 +1,147 @@
<!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>
<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>
<dt id="option_tabMode"><code>tabMode (string)</code></dt>
<dd>Determines what happens when the user presses the tab key.
Must be one of the following:
<dl>
<dt><code>"classic" (the default)</code></dt>
<dd>When nothing is selected, insert a tab. Otherwise,
behave like the <code>"shift"</code> mode. (When shift is
held, this behaves like the <code>"indent"</code> mode.)</dd>
<dt><code>"shift"</code></dt>
<dd>Indent all selected lines by
one <a href="#option_indentUnit"><code>indentUnit</code></a>.
If shift was held while pressing tab, un-indent all selected
lines one unit.</dd>
<dt><code>"indent"</code></dt>
<dd>Indent the line the 'correctly', based on its syntactic
context. Only works if the
mode <a href="#indent">supports</a> it.</dd>
<dt><code>"default"</code></dt>
<dd>Do not capture tab presses, let the browser apply its
default behaviour (which usually means it skips to the next
control).</dd>
</dl></dd>
<dt id="option_enterMode"><code>enterMode (string)</code></dt>
<dd>Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
<dl>
<dt><code>"indent" (the default)</code></dt>
<dd>Use the mode's indentation rules to give the new line
the correct indentation.</dd>
<dt><code>"keep"</code></dt>
<dd>Indent the line the same as the previous line.</dd>
<dt><code>"flat"</code></dt>
<dd>Do not indent the new line.</dd>
</dl></dd>
<dt id="option_enterMode"><code>enterMode (string)</code></dt>
<dd>Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
<dl>
<dt><code>"indent" (the default)</code></dt>
<dd>Use the mode's indentation rules to give the new line
the correct indentation.</dd>
<dt><code>"keep"</code></dt>
<dd>Indent the line the same as the previous line.</dd>
<dt><code>"flat"</code></dt>
<dd>Do not indent the new line.</dd>
</dl></dd>
<dt id="option_enterMode"><code>enterMode (string)</code></dt>
<dd>Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
<dl>
<dt><code>"indent" (the default)</code></dt>
<dd>Use the mode's indentation rules to give the new line
the correct indentation.</dd>
<dt><code>"keep"</code></dt>
<dd>Indent the line the same as the previous line.</dd>
<dt><code>"flat"</code></dt>
<dd>Do not indent the new line.</dd>
</dl></dd>
<dt id="option_enterMode"><code>enterMode (string)</code></dt>
<dd>Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
<dl>
<dt><code>"indent" (the default)</code></dt>
<dd>Use the mode's indentation rules to give the new line
the correct indentation.</dd>
<dt><code>"keep"</code></dt>
<dd>Indent the line the same as the previous line.</dd>
<dt><code>"flat"</code></dt>
<dd>Do not indent the new line.</dd>
</dl></dd>
</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));
},
"Esc": function(cm) {
if (isFullScreen(cm)) setFullScreen(cm, 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>

71
codemirror/demo/loadmode.html vendored Normal file
View File

@@ -0,0 +1,71 @@
<!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="../lib/util/loadmode.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../mode/pascal/pascal.js"></script>
<script src="../mode/python/python.js"></script>
<script src="../mode/shell/shell.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<link rel="stylesheet" href="../theme/eclipse.css">
</head>
<body>
<form><textarea id="code" name="code">
procedure a
begin
a:=9;
end
int main()
{
for(int i=0;i<100;i++)
cout<<a;
}
</textarea></form>
<select onchange ="change()" id="modeselect">
<option value="1">C (GCC 4.4)</option>
<option value="2">C++ (G++ 4.4)</option>
<option value="3">Java (Sun JDK 5)</option>
<option value="4">Java (Sun JDK 6)</option>
<option value="5">Pascal (Free Pascal 2.4)</option>
<option value="6">Python 2.5</option>
<option value="7">C# (Mono 2.0)</option>
<option value="8">Bash (Bash 3)</option>
</select>
<script>
//CodeMirror.modeURL = "../mode/%N/%N.js";
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
tabSize: 4,
indentUnit: 4,
indentWithTabs: true,
mode: "text/x-csrc"
});
//var a;
var arr = new Array();
arr[0] = "text/x-csrc";
arr[1] = "text/x-csrc";
arr[2] = "text/x-c++src";
arr[3] = "text/x-java";
arr[4] = "text/x-java";
arr[5] = "text/x-pascal";
arr[6] = "text/x-python";
arr[7] = "text/x-csharp";
arr[8] = "text/x-sh";
var modeInput = document.getElementById("modeselect");
function change() {
editor.setOption("mode",arr[modeInput.value]);
editor.setOption("theme", "eclipse");
CodeMirror.autoLoadMode(editor, arr[modeInput.value]);
}
</script>
</body>
</html>

59
codemirror/demo/marker.html vendored Normal file
View File

@@ -0,0 +1,59 @@
<!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">
.breakpoints {width: .8em;}
.breakpoint { color: #822; }
.CodeMirror {border: 1px solid #aaa;}
</style>
</head>
<body>
<h1>CodeMirror: Breakpoint demo</h1>
<form><textarea id="code" name="code">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"]
});
editor.on("gutterClick", function(cm, n) {
var info = cm.lineInfo(n);
cm.setGutterMarker(n, "breakpoints", info.markers ? null : makeMarker());
});
function makeMarker() {
var marker = document.createElement("div");
marker.innerHTML = "●";
marker.className = "breakpoint";
return marker;
}
</textarea></form>
<p>Click the line-number gutter to add or remove 'breakpoints'.</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"]
});
editor.on("gutterClick", function(cm, n) {
var info = cm.lineInfo(n);
cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
});
function makeMarker() {
var marker = document.createElement("div");
marker.style.color = "#822";
marker.innerHTML = "●";
return marker;
}
</script>
</body>
</html>

36
codemirror/demo/matchhighlighter.html vendored Normal file
View File

@@ -0,0 +1,36 @@
<!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="../lib/util/searchcursor.js"></script>
<script src="../lib/util/match-highlighter.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
span.CodeMirror-matchhighlight { background: #e9e9e9 }
.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
</style>
</head>
<body>
<h1>CodeMirror: Match Highlighter Demo</h1>
<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>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers : true});
editor.on("cursorActivity", function() {
editor.matchHighlight("CodeMirror-matchhighlight");
});
</script>
<p>Highlight matches of selected text on select</p>
</body>
</html>

60
codemirror/demo/multiplex.html vendored Normal file
View File

@@ -0,0 +1,60 @@
<!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="../lib/util/multiplex.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border: 1px solid black;}
.cm-delimit {color: #fa4;}
</style>
</head>
<body>
<h1>CodeMirror: Multiplexing Parser Demo</h1>
<form><textarea id="code" name="code">
<html>
<body style="<<magic>>">
<h1><< this is not <html >></h1>
<<
multiline
not html
at all : &amp;amp; <link/>
>>
<p>this is html again</p>
</body>
</html>
</textarea></form>
<script>
CodeMirror.defineMode("demo", function(config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, "text/html"),
{open: "<<", close: ">>",
mode: CodeMirror.getMode(config, "text/plain"),
delimStyle: "delimit"}
// .. more multiplexed styles can follow here
);
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "demo",
lineNumbers: true,
lineWrapping: true
});
</script>
<p>Demonstration of a multiplexing mode, which, at certain
boundary strings, switches to one or more inner modes. The out
(HTML) mode does not get fed the content of the <code>&lt;&lt;
>></code> blocks. See
the <a href="../doc/manual.html#util_multiplex">manual</a> and
the <a href="../lib/util/multiplex.js">source</a> for more
information.</p>
</body>
</html>

59
codemirror/demo/mustache.html vendored Normal file
View File

@@ -0,0 +1,59 @@
<!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="../lib/util/overlay.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border: 1px solid black;}
.cm-mustache {color: #0ca;}
</style>
</head>
<body>
<h1>CodeMirror: Overlay Parser Demo</h1>
<form><textarea id="code" name="code">
<html>
<body>
<h1>{{title}}</h1>
<p>These are links to {{things}}:</p>
<ul>{{#links}}
<li><a href="{{url}}">{{text}}</a></li>
{{/links}}</ul>
</body>
</html>
</textarea></form>
<script>
CodeMirror.defineMode("mustache", function(config, parserConfig) {
var mustacheOverlay = {
token: function(stream, state) {
var ch;
if (stream.match("{{")) {
while ((ch = stream.next()) != null)
if (ch == "}" && stream.next() == "}") break;
stream.eat("}");
return "mustache";
}
while (stream.next() != null && !stream.match("{{", false)) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
</script>
<p>Demonstration of a mode that parses HTML, highlighting
the <a href="http://mustache.github.com/">Mustache</a> templating
directives inside of it by using the code
in <a href="../lib/util/overlay.js"><code>overlay.js</code></a>. View
source to see the 15 lines of code needed to accomplish this.</p>
</body>
</html>

76
codemirror/demo/preview.html vendored Normal file
View File

@@ -0,0 +1,76 @@
<!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>
.CodeMirror {
float: left;
width: 50%;
border: 1px solid black;
}
iframe {
width: 49%;
float: left;
height: 300px;
border: 1px solid black;
border-left: 0px;
}
</style>
</head>
<body>
<h1>CodeMirror: HTML5 preview</h1>
<textarea id=code name=code>
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style>
</head>
<body>
<p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas>
<script>
var canvas = document.getElementById('pane');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(250,0,0)';
context.fillRect(10, 10, 55, 50);
context.fillStyle = 'rgba(0, 0, 250, 0.5)';
context.fillRect(30, 30, 55, 50);
</script>
</body>
</html></textarea>
<iframe id=preview></iframe>
<script>
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent'
});
editor.on("change", function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
</script>
</body>
</html>

46
codemirror/demo/resize.html vendored Normal file
View File

@@ -0,0 +1,46 @@
<!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">
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>CodeMirror: Autoresize demo</h1>
<form><textarea id="code" name="code">
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
}
</textarea></form>
<p>By setting a few CSS properties, CodeMirror can be made to
automatically resize to fit its content.</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true
});
</script>
</body>
</html>

50
codemirror/demo/runmode.html vendored Normal file
View File

@@ -0,0 +1,50 @@
<!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="../lib/util/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>
<textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
<foobar>
<blah>Enter your xml here and press the button below to display
it as highlighted by the CodeMirror XML mode</blah>
<tag2 foo="2" bar="&amp;quot;bar&amp;quot;"/>
</foobar></textarea><br>
<button onclick="doHighlight();">Highlight!</button>
<pre id="output" class="cm-s-default"></pre>
<script>
function doHighlight() {
CodeMirror.runMode(document.getElementById("code").value, "application/xml",
document.getElementById("output"));
}
</script>
<p>Running a CodeMirror mode outside of the editor.
The <code>CodeMirror.runMode</code> function, defined
in <code><a href="../lib/util/runmode.js">lib/runmode.js</a></code> takes the following arguments:</p>
<dl>
<dt><code>text (string)</code></dt>
<dd>The document to run through the highlighter.</dd>
<dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
<dd>The mode to use (must be loaded as normal).</dd>
<dt><code>output (function or DOM node)</code></dt>
<dd>If this is a function, it will be called for each token with
two arguments, the token's text and the token's style class (may
be <code>null</code> for unstyled tokens). If it is a DOM node,
the tokens will be converted to <code>span</code> elements as in
an editor, and inserted into the node
(through <code>innerHTML</code>).</dd>
</dl>
</body>
</html>

85
codemirror/demo/search.html vendored Normal file
View File

@@ -0,0 +1,85 @@
<!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="../lib/util/dialog.js"></script>
<link rel="stylesheet" href="../lib/util/dialog.css">
<script src="../lib/util/searchcursor.js"></script>
<script src="../lib/util/search.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<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>
<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>
<dt id="option_tabMode"><code>tabMode (string)</code></dt>
<dd>Determines what happens when the user presses the tab key.
Must be one of the following:
<dl>
<dt><code>"classic" (the default)</code></dt>
<dd>When nothing is selected, insert a tab. Otherwise,
behave like the <code>"shift"</code> mode. (When shift is
held, this behaves like the <code>"indent"</code> mode.)</dd>
<dt><code>"shift"</code></dt>
<dd>Indent all selected lines by
one <a href="#option_indentUnit"><code>indentUnit</code></a>.
If shift was held while pressing tab, un-indent all selected
lines one unit.</dd>
<dt><code>"indent"</code></dt>
<dd>Indent the line the 'correctly', based on its syntactic
context. Only works if the
mode <a href="#indent">supports</a> it.</dd>
<dt><code>"default"</code></dt>
<dd>Do not capture tab presses, let the browser apply its
default behaviour (which usually means it skips to the next
control).</dd>
</dl></dd>
<dt id="option_enterMode"><code>enterMode (string)</code></dt>
<dd>Determines whether and how new lines are indented when the
enter key is pressed. The following modes are supported:
<dl>
<dt><code>"indent" (the default)</code></dt>
<dd>Use the mode's indentation rules to give the new line
the correct indentation.</dd>
<dt><code>"keep"</code></dt>
<dd>Indent the line the same as the previous line.</dd>
<dt><code>"flat"</code></dt>
<dd>Do not indent the new line.</dd>
</dl></dd>
</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", lineNumbers: true});
</script>
<p>Demonstration of primitive search/replace functionality. The
keybindings (which can be overridden by custom keymaps) are:</p>
<dl>
<dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd>
<dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd>
<dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd>
<dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd>
<dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd>
</dl>
<p>Searching is enabled by
including <a href="../lib/util/search.js">lib/util/search.js</a>
and <a href="../lib/util/searchcursor.js">lib/util/searchcursor.js</a>.
For good-looking input dialogs, you also want to include
<a href="../lib/util/dialog.js">lib/util/dialog.js</a>
and <a href="../lib/util/dialog.css">lib/util/dialog.css</a>.</p>
</body>
</html>

85
codemirror/demo/theme.html vendored Normal file
View File

@@ -0,0 +1,85 @@
<!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/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">
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border: 1px solid black; font-size:13px}
</style>
</head>
<body>
<h1>CodeMirror: Theme demo</h1>
<form><textarea id="code" name="code">
function findSequence(goal) {
function find(start, history) {
if (start == goal)
return history;
else if (start > goal)
return null;
else
return find(start + 5, "(" + history + " + 5)") ||
find(start * 3, "(" + history + " * 3)");
}
return find(1, "1");
}</textarea></form>
<p>Select a theme: <select onchange="selectTheme()" id=select>
<option selected>default</option>
<option>ambiance</option>
<option>blackboard</option>
<option>cobalt</option>
<option>eclipse</option>
<option>elegant</option>
<option>erlang-dark</option>
<option>lesser-dark</option>
<option>monokai</option>
<option>neat</option>
<option>night</option>
<option>rubyblue</option>
<option>solarized dark</option>
<option>solarized light</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
</select>
</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true
});
var input = document.getElementById("select");
function selectTheme() {
var theme = input.options[input.selectedIndex].innerHTML;
editor.setOption("theme", theme);
}
var choice = document.location.search &&
decodeURIComponent(document.location.search.slice(1));
if (choice) {
input.value = choice;
editor.setOption("theme", choice);
}
</script>
</body>
</html>

52
codemirror/demo/variableheight.html vendored Normal file
View File

@@ -0,0 +1,52 @@
<!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">
.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
**Bold** text in a normal-size paragraph.
And a very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long, wrapped line with a piece of **big** text inside of it.
## A Second Level Header
Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.
The quick brown fox jumped over the lazy
dog's back.
### Header 3
> This is a blockquote.
>
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote
</textarea></form>
<script id="script">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true,
mode: "markdown"
});
</script>
</body>
</html>

65
codemirror/demo/vim.html vendored Normal file
View File

@@ -0,0 +1,65 @@
<!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="../lib/util/dialog.js"></script>
<script src="../lib/util/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="../lib/util/dialog.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
</head>
<body>
<h1>CodeMirror: Vim bindings demo</h1>
<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
{
static char buf[BUFSIZ];
static char *bufp = buf;
static int n = 0;
if (n == 0) { /* buffer is empty */
n = read(0, buf, sizeof buf);
bufp = buf;
}
return (--n >= 0) ? (unsigned char) *bufp++ : EOF;
}
</textarea></form>
<form><textarea id="code2" name="code2">
I am another file! You can yank from my neighbor and paste here.
</textarea></form>
<p>The vim keybindings are enabled by
including <a href="../keymap/vim.js">keymap/vim.js</a> and setting
the <code>keyMap</code> option to <code>"vim"</code>. Because
CodeMirror's internal API is quite different from Vim, they are only
a loose approximation of actual vim bindings, though.</p>
<script>
CodeMirror.commands.save = function(){ alert("Saving"); };
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "text/x-csrc",
keyMap: "vim",
showCursorWhenSelecting: true
});
var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
lineNumbers: true,
mode: "text/x-csrc",
keyMap: "vim",
showCursorWhenSelecting: true
});
</script>
</body>
</html>

55
codemirror/demo/visibletabs.html vendored Normal file
View File

@@ -0,0 +1,55 @@
<!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>
<script src="../mode/pascal/pascal.js"></script>
<script src="../mode/clike/clike.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<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>
<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
{
static char buf[BUFSIZ];
static char *bufp = buf;
static int n = 0;
if (n == 0) { /* buffer is empty */
n = read(0, buf, sizeof buf);
bufp = buf;
}
return (--n >= 0) ? (unsigned char) *bufp++ : EOF;
}
</textarea></form>
<p>Tabs inside the editor are spans with the
class <code>cm-tab</code>, and can be styled.
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
tabSize: 4,
indentUnit: 4,
indentWithTabs: true,
mode: "text/x-csrc"
});
</script>
</body>
</html>

74
codemirror/demo/widget.html vendored Normal file
View File

@@ -0,0 +1,74 @@
<!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">
.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=code></div>
<script id="script">var widgets = []
function updateHints() {
editor.operation(function(){
for (var i = 0; i < widgets.length; ++i)
editor.removeLineWidget(widgets[i]);
widgets.length = 0;
JSHINT(editor.getValue());
for (var i = 0; i < JSHINT.errors.length; ++i) {
var err = JSHINT.errors[i];
if (!err) continue;
var msg = document.createElement("div");
var icon = msg.appendChild(document.createElement("span"));
icon.innerHTML = "!!";
icon.className = "lint-error-icon";
msg.appendChild(document.createTextNode(err.reason));
msg.className = "lint-error";
widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
}
});
var info = editor.getScrollInfo();
var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
if (info.top + info.clientHeight < after)
editor.scrollTo(null, after - info.clientHeight + 3);
}
window.onload = function() {
var sc = document.getElementById("script");
var content = sc.textContent || sc.innerText || sc.innerHTML;
window.editor = CodeMirror(document.getElementById("code"), {
lineNumbers: true,
mode: "javascript",
value: content
});
var waiting;
editor.on("change", function() {
clearTimeout(waiting);
waiting = setTimeout(updateHints, 500);
});
setTimeout(updateHints, 100);
};
"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
</script>
<p>This demo runs <a href="http://jshint.com">JSHint</a> over the code
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>

74
codemirror/demo/xmlcomplete.html vendored Normal file
View File

@@ -0,0 +1,74 @@
<!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="../lib/util/simple-hint.js"></script>
<link rel="stylesheet" href="../lib/util/simple-hint.css">
<script src="../lib/util/closetag.js"></script>
<script src="../lib/util/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror { border: 1px solid #eee; height: auto; }
.CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
</style>
</head>
<body>
<h1>CodeMirror: XML Autocomplete demo</h1>
<form><textarea id="code" name="code"></textarea></form>
<p>Type '&lt;' or space inside tag or
press <strong>ctrl-space</strong> to activate autocompletion. See
the code (<a href="../lib/util/simple-hint.js">here</a>
and <a href="../lib/util/xml-hint.js">here</a>) to figure out how
it works.</p>
<script>
CodeMirror.xmlHints['<'] = [
'levelTop',
'levelRoot',
'mainLevel'
];
CodeMirror.xmlHints['<levelTop '] =
CodeMirror.xmlHints['<levelRoot '] =
CodeMirror.xmlHints['<mainLevel '] = [
'property1111',
'property2222'
];
CodeMirror.xmlHints['<levelTop><'] =
CodeMirror.xmlHints['<levelRoot><'] =
CodeMirror.xmlHints['<mainLevel><'] = [
'second',
'two'
];
CodeMirror.xmlHints['<levelTop><second '] = [
'secondProperty'
];
CodeMirror.xmlHints['<levelTop><second><'] = [
'three',
'x-three'
];
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
value: '',
mode: 'text/html',
lineNumbers: true,
extraKeys: {
"'>'": function(cm) { cm.closeTag(cm, '>'); },
"'/'": function(cm) { cm.closeTag(cm, '/'); },
"' '": function(cm) { CodeMirror.xmlHint(cm, ' '); },
"'<'": function(cm) { CodeMirror.xmlHint(cm, '<'); },
"Ctrl-Space": function(cm) { CodeMirror.xmlHint(cm, ''); }
}
});
</script>
</body>
</html>