diff options
Diffstat (limited to 'codemirror_ui/lib/CodeMirror-2.3/demo')
20 files changed, 1291 insertions, 0 deletions
diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/activeline.html b/codemirror_ui/lib/CodeMirror-2.3/demo/activeline.html new file mode 100644 index 0000000..a5b3c2c --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/activeline.html @@ -0,0 +1,72 @@ +<!doctype html> +<html> + <head> + <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 — they're springing up like mushrooms. This one + uses CodeMirror as its editor.</title> + <description>codemirror: http://cloud-ide.com — 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, + onCursorActivity: function() { + editor.setLineClass(hlLine, null, null); + hlLine = editor.setLineClass(editor.getCursor().line, null, "activeline"); + } +}); +var hlLine = editor.setLineClass(0, "activeline"); +</script> + + <p>Styling the current cursor line.</p> + + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/changemode.html b/codemirror_ui/lib/CodeMirror-2.3/demo/changemode.html new file mode 100644 index 0000000..f5e0661 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/changemode.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <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, + matchBrackets: true, + tabMode: "indent", + onChange: 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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/closetag.html b/codemirror_ui/lib/CodeMirror-2.3/demo/closetag.html new file mode 100644 index 0000000..57cd4be --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/closetag.html @@ -0,0 +1,65 @@ +<!doctype html>
+<html>
+ <head>
+ <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 #eee; border-bottom: 1px solid #eee;}
+ </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>
+ </p>
+
+ <form><textarea id="code" name="code"></textarea></form>
+
+ <script type="text/javascript">
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+ mode: 'text/html',
+
+ //closeTagEnabled: false, // Set this option to disable tag closing behavior without having to remove the key bindings.
+ //closeTagIndent: false, // Pass false or an array of tag names to override the default indentation behavior.
+
+ extraKeys: {
+ "'>'": function(cm) { cm.closeTag(cm, '>'); },
+ "'/'": function(cm) { cm.closeTag(cm, '/'); }
+ },
+
+ /*
+ // extraKeys is the easier way to go, but if you need native key event processing, this should work too.
+ onKeyEvent: function(cm, e) {
+ if (e.type == 'keydown') {
+ var c = e.keyCode || e.which;
+ if (c == 190 || c == 191) {
+ try {
+ cm.closeTag(cm, c == 190 ? '>' : '/');
+ e.stop();
+ return true;
+ } catch (e) {
+ if (e != CodeMirror.Pass) throw e;
+ }
+ }
+ }
+ return false;
+ },
+ */
+
+ wordWrap: true
+ });
+ </script>
+
+ </body>
+</html>
diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/complete.html b/codemirror_ui/lib/CodeMirror-2.3/demo/complete.html new file mode 100644 index 0000000..95ae397 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/complete.html @@ -0,0 +1,70 @@ +<!doctype html> +<html> + <head> + <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"> + <style type="text/css">.CodeMirror {border: 1px solid #eee;} .CodeMirror-scroll { height: 100% }</style> + </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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/emacs.html b/codemirror_ui/lib/CodeMirror-2.3/demo/emacs.html new file mode 100644 index 0000000..87190c5 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/emacs.html @@ -0,0 +1,59 @@ +<!doctype html> +<html> + <head> + <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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/folding.html b/codemirror_ui/lib/CodeMirror-2.3/demo/folding.html new file mode 100644 index 0000000..2e05e9b --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/folding.html @@ -0,0 +1,61 @@ +<!doctype html> +<html> + <head> + <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-gutter {min-width: 2.6em; 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, + onGutterClick: foldFunc, + extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}} + }); + foldFunc(editor, 9); + foldFunc(editor, 20); + + var foldFunc_html = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder); + window.editor_html = CodeMirror.fromTextArea(te_html, { + mode: "text/html", + lineNumbers: true, + lineWrapping: true, + onGutterClick: foldFunc_html, + extraKeys: {"Ctrl-Q": function(cm){foldFunc_html(cm, cm.getCursor().line);}} + }) + foldFunc_html(editor_html, 1); + foldFunc_html(editor_html, 15); +}; +</script> + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/formatting.html b/codemirror_ui/lib/CodeMirror-2.3/demo/formatting.html new file mode 100644 index 0000000..e4faf5f --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/formatting.html @@ -0,0 +1,80 @@ +<!doctype html> +<html> + <head> + <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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/fullscreen.html b/codemirror_ui/lib/CodeMirror-2.3/demo/fullscreen.html new file mode 100644 index 0000000..0e2b5ec --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/fullscreen.html @@ -0,0 +1,152 @@ +<!doctype html> +<html> + <head> + <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 {border-top: 1px solid black; border-bottom: 1px solid black;} + .CodeMirror-fullscreen { + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 9999; + margin: 0; + padding: 0; + border: 0px solid #BBBBBB; + opacity: 1; + } + </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> + var editor = CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true, + theme: "night", + extraKeys: { + "F11": function() { + var scroller = editor.getScrollerElement(); + if (scroller.className.search(/\bCodeMirror-fullscreen\b/) === -1) { + scroller.className += " CodeMirror-fullscreen"; + scroller.style.height = "100%"; + scroller.style.width = "100%"; + editor.refresh(); + } else { + scroller.className = scroller.className.replace(" CodeMirror-fullscreen", ""); + scroller.style.height = ''; + scroller.style.width = ''; + editor.refresh(); + } + }, + "Esc": function() { + var scroller = editor.getScrollerElement(); + if (scroller.className.search(/\bCodeMirror-fullscreen\b/) !== -1) { + scroller.className = scroller.className.replace(" CodeMirror-fullscreen", ""); + scroller.style.height = ''; + scroller.style.width = ''; + editor.refresh(); + } + } + } + }); + +</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> + + <p><strong>Note:</strong> Does not currently work correctly in IE + 6 and 7, where setting the height of something + to <code>100%</code> doesn't make it full screen.</p> + + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/loadmode.html b/codemirror_ui/lib/CodeMirror-2.3/demo/loadmode.html new file mode 100644 index 0000000..3d7015e --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/loadmode.html @@ -0,0 +1,39 @@ +<!doctype html> +<html> + <head> + <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> + <link rel="stylesheet" href="../doc/docs.css"> + + <style type="text/css"> + .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} + </style> + </head> + <body> + <h1>CodeMirror: Lazy Mode Loading</h1> + + <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*/. +</textarea></form> +<p><input type=text value=javascript id=mode> <button type=button onclick="change()">change mode</button></p> + + <script> +CodeMirror.modeURL = "../mode/%N/%N.js"; +var editor = CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true +}); +var modeInput = document.getElementById("mode"); +CodeMirror.connect(modeInput, "keypress", function(e) { + if (e.keyCode == 13) change(); +}); +function change() { + editor.setOption("mode", modeInput.value); + CodeMirror.autoLoadMode(editor, modeInput.value); +} +</script> + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/marker.html b/codemirror_ui/lib/CodeMirror-2.3/demo/marker.html new file mode 100644 index 0000000..00a89ce --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/marker.html @@ -0,0 +1,52 @@ +<!doctype html> +<html> + <head> + <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"> + .CodeMirror-gutter { + width: 3em; + background: white; + } + .CodeMirror { + border: 1px solid #aaa; + } + </style> + </head> + <body> + <h1>CodeMirror: Breakpoint demo</h1> + + <form><textarea id="code" name="code"> +CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true, + onGutterClick: function(cm, n) { + var info = cm.lineInfo(n); + if (info.markerText) + cm.clearMarker(n); + else + cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%"); + } +}); +</textarea></form> + +<p>Click the line-number gutter to add or remove 'breakpoints'.</p> + + <script> + CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true, + onGutterClick: function(cm, n) { + var info = cm.lineInfo(n); + if (info.markerText) + cm.clearMarker(n); + else + cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%"); + } + }); + </script> + + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/matchhighlighter.html b/codemirror_ui/lib/CodeMirror-2.3/demo/matchhighlighter.html new file mode 100644 index 0000000..768c51e --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/matchhighlighter.html @@ -0,0 +1,37 @@ +<!doctype html> +<html> + <head> + <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, + onCursorActivity: function() { + editor.matchHighlight("CodeMirror-matchhighlight"); + } +}); +</script> + + <p>Highlight matches of selected text on select</p> + + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/multiplex.html b/codemirror_ui/lib/CodeMirror-2.3/demo/multiplex.html new file mode 100644 index 0000000..9348545 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/multiplex.html @@ -0,0 +1,59 @@ +<!doctype html> +<html> + <head> + <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> + <h1><< this is not <html >></h1> + << + multiline + not html + at all : &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><< + >></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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/mustache.html b/codemirror_ui/lib/CodeMirror-2.3/demo/mustache.html new file mode 100644 index 0000000..e96fda8 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/mustache.html @@ -0,0 +1,57 @@ +<!doctype html> +<html> + <head> + <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; + 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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html b/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html new file mode 100644 index 0000000..607a621 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/preview.html @@ -0,0 +1,76 @@ +<!doctype html> +<html> + <head> + <title>CodeMirror: HTML5 preview</title> + <meta charset=utf-8> + <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', + onChange: 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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/resize.html b/codemirror_ui/lib/CodeMirror-2.3/demo/resize.html new file mode 100644 index 0000000..e20c3fb --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/resize.html @@ -0,0 +1,41 @@ +<!doctype html> +<html> + <head> + <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; + } + .CodeMirror-scroll { + height: auto; + overflow-y: hidden; + overflow-x: auto; + } + </style> + </head> + <body> + <h1>CodeMirror: Autoresize demo</h1> + + <form><textarea id="code" name="code"> +.CodeMirror-scroll { + height: auto; + 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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/runmode.html b/codemirror_ui/lib/CodeMirror-2.3/demo/runmode.html new file mode 100644 index 0000000..d6ee17e --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/runmode.html @@ -0,0 +1,49 @@ +<!doctype html> +<html> + <head> + <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="&quot;bar&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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/search.html b/codemirror_ui/lib/CodeMirror-2.3/demo/search.html new file mode 100644 index 0000000..c385e6b --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/search.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <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>. + 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> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/theme.html b/codemirror_ui/lib/CodeMirror-2.3/demo/theme.html new file mode 100644 index 0000000..ac47d91 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/theme.html @@ -0,0 +1,78 @@ +<!doctype html> +<html> + <head> + <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"> + <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>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 && document.location.search.slice(1); + if (choice) { + input.value = choice; + editor.setOption("theme", choice); + } +</script> + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/vim.html b/codemirror_ui/lib/CodeMirror-2.3/demo/vim.html new file mode 100644 index 0000000..76ad6da --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/vim.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <title>CodeMirror: Vim 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/vim.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: 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> + +<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" + }); + </script> + + </body> +</html> diff --git a/codemirror_ui/lib/CodeMirror-2.3/demo/visibletabs.html b/codemirror_ui/lib/CodeMirror-2.3/demo/visibletabs.html new file mode 100644 index 0000000..96d1ea5 --- /dev/null +++ b/codemirror_ui/lib/CodeMirror-2.3/demo/visibletabs.html @@ -0,0 +1,61 @@ +<!doctype html> +<html> + <head> + <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"> + .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} + .cm-tab:after { + content: "\21e5"; + display: -moz-inline-block; + display: -webkit-inline-block; + display: inline-block; + width: 0px; + position: relative; + overflow: visible; + left: -1.4em; + color: #aaa; + } + </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. This demo uses +an <code>:after</code> pseudo-class CSS hack that will not work on old +browsers. You can use a more conservative technique like a background +image as an alternative.</p> + + <script> + var editor = CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true, + tabSize: 4, + indentUnit: 4, + indentWithTabs: true, + mode: "text/x-csrc" + }); + </script> + + </body> +</html> |