Permalink
Browse files

Move to a new website layout

  • Loading branch information...
1 parent 015b2e6 commit 12a25eaf34f9dc7cf0fd6f6663ad1160408c7e4f @marijnh marijnh committed Aug 13, 2013
Showing with 4,225 additions and 3,079 deletions.
  1. +25 −16 demo/activeline.html
  2. +27 −17 demo/anywordhint.html
  3. +25 −16 demo/bidi.html
  4. +22 −23 demo/btree.html
  5. +27 −16 demo/buffers.html
  6. +25 −16 demo/changemode.html
  7. +27 −27 demo/closebrackets.html
  8. +29 −26 demo/closetag.html
  9. +31 −21 demo/complete.html
  10. +31 −22 demo/emacs.html
  11. +29 −25 demo/folding.html
  12. +25 −16 demo/fullscreen.html
  13. +33 −23 demo/html5complete.html
  14. +25 −16 demo/indentwrap.html
  15. +31 −20 demo/lint.html
  16. +24 −15 demo/loadmode.html
  17. +25 −16 demo/marker.html
  18. +25 −16 demo/markselection.html
  19. +25 −16 demo/matchhighlighter.html
  20. +28 −17 demo/matchtags.html
  21. +28 −13 demo/merge.html
  22. +25 −16 demo/multiplex.html
  23. +26 −17 demo/mustache.html
  24. +24 −15 demo/placeholder.html
  25. +29 −17 demo/preview.html
  26. +24 −15 demo/resize.html
  27. +26 −14 demo/runmode.html
  28. +28 −19 demo/search.html
  29. +22 −10 demo/spanaffectswrapping_shim.html
  30. +41 −35 demo/tern.html
  31. +49 −40 demo/theme.html
  32. +24 −15 demo/trailingspace.html
  33. +27 −18 demo/variableheight.html
  34. +28 −19 demo/vim.html
  35. +24 −15 demo/visibletabs.html
  36. +26 −15 demo/widget.html
  37. +28 −18 demo/xmlcomplete.html
  38. +42 −0 doc/activebookmark.js
  39. BIN doc/baboon.png
  40. +0 −153 doc/baboon_vector.svg
  41. +20 −18 doc/compress.html
  42. +160 −114 doc/docs.css
  43. +53 −55 doc/internals.html
  44. BIN doc/logo.png
  45. +147 −0 doc/logo.svg
  46. +82 −76 doc/manual.html
  47. +0 −100 doc/modes.html
  48. +20 −17 doc/realworld.html
  49. +273 −77 doc/{oldrelease.html → releases.html}
  50. +21 −20 doc/reporting.html
  51. +23 −25 doc/upgrade_v2.2.html
  52. +69 −66 doc/upgrade_v3.html
  53. +170 −464 index.html
  54. +26 −15 mode/apl/index.html
  55. +27 −15 mode/asterisk/index.html
  56. +26 −15 mode/clike/index.html
  57. +27 −27 mode/clike/scala.html
  58. +27 −15 mode/clojure/index.html
  59. +50 −35 mode/cobol/index.html
  60. +27 −15 mode/coffeescript/index.html
  61. +27 −15 mode/commonlisp/index.html
  62. +27 −15 mode/css/index.html
  63. +27 −15 mode/css/scss.html
  64. +26 −15 mode/d/index.html
  65. +27 −15 mode/diff/index.html
  66. +28 −15 mode/ecl/index.html
  67. +27 −16 mode/erlang/index.html
  68. +27 −16 mode/gas/index.html
  69. +32 −24 mode/gfm/index.html
  70. +27 −16 mode/go/index.html
  71. +26 −15 mode/groovy/index.html
  72. +31 −19 mode/haml/index.html
  73. +27 −16 mode/haskell/index.html
  74. +27 −14 mode/haxe/index.html
  75. +29 −18 mode/htmlembedded/index.html
  76. +31 −19 mode/htmlmixed/index.html
  77. +27 −14 mode/http/index.html
  78. +106 −0 mode/index.html
  79. +27 −15 mode/jade/index.html
  80. +30 −17 mode/javascript/index.html
  81. +27 −14 mode/javascript/typescript.html
  82. +27 −15 mode/jinja2/index.html
  83. +29 −17 mode/less/index.html
  84. +28 −15 mode/livescript/index.html
  85. +29 −17 mode/lua/index.html
  86. +28 −18 mode/markdown/index.html
  87. +28 −16 mode/mirc/index.html
  88. +27 −13 mode/nginx/index.html
  89. +27 −15 mode/ntriples/index.html
  90. +22 −7 mode/ocaml/index.html
  91. +27 −14 mode/pascal/index.html
  92. +27 −14 mode/perl/index.html
  93. +31 −20 mode/php/index.html
  94. +25 −12 mode/pig/index.html
  95. +27 −15 mode/properties/index.html
  96. +28 −16 mode/python/index.html
  97. +28 −15 mode/q/index.html
  98. +27 −15 mode/r/index.html
  99. +24 −10 mode/rpm/changes/index.html
  100. +24 −9 mode/rpm/spec/index.html
  101. +25 −15 mode/rst/index.html
  102. +28 −16 mode/ruby/index.html
  103. +27 −14 mode/rust/index.html
  104. +28 −16 mode/sass/index.html
  105. +27 −15 mode/scheme/index.html
  106. +22 −7 mode/shell/index.html
  107. +27 −15 mode/sieve/index.html
  108. +26 −15 mode/smalltalk/index.html
  109. +27 −17 mode/smarty/index.html
  110. +29 −22 mode/smartymixed/index.html
  111. +28 −16 mode/sparql/index.html
  112. +25 −32 mode/sql/index.html
  113. +27 −15 mode/stex/index.html
  114. +28 −16 mode/tcl/index.html
  115. +29 −16 mode/tiddlywiki/index.html
  116. +29 −15 mode/tiki/index.html
  117. +27 −15 mode/turtle/index.html
  118. +32 −17 mode/vb/index.html
  119. +27 −15 mode/vbscript/index.html
  120. +28 −16 mode/velocity/index.html
  121. +25 −14 mode/verilog/index.html
  122. +27 −15 mode/xml/index.html
  123. +30 −41 mode/xquery/index.html
  124. +27 −15 mode/yaml/index.html
  125. +27 −14 mode/z80/index.html
  126. +59 −46 test/index.html
View
41 demo/activeline.html
@@ -1,23 +1,33 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Active Line Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <script src="../addon/selection/active-line.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Active Line Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../addon/selection/active-line.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-activeline-background {background: #e8f2ff !important;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Active Line Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Active Line</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Active Line Demo</h2>
+<form><textarea id="code" name="code">
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
xmlns:georss="http://www.georss.org/georss"
@@ -66,5 +76,4 @@
<p>Styling the current cursor line.</p>
- </body>
-</html>
+ </article>
View
44 demo/anywordhint.html
@@ -1,20 +1,31 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Any Word Completion Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/hint/show-hint.js"></script>
- <link rel="stylesheet" href="../addon/hint/show-hint.css">
- <script src="../addon/hint/anyword-hint.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- </head>
- <body>
- <h1>CodeMirror: Any Word Completion Demo</h1>
- <form><textarea id="code" name="code">
+<title>CodeMirror: Any Word Completion Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/hint/show-hint.js"></script>
+<script src="../addon/hint/anyword-hint.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Any Word Completion</a>
+ </ul>
+</div>
+
+<article>
+<h2>Any Word Completion Demo</h2>
+<form><textarea id="code" name="code">
(function() {
"use strict";
@@ -65,5 +76,4 @@
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
- </body>
-</html>
+ </article>
View
41 demo/bidi.html
@@ -1,21 +1,31 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Bi-directional Text Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
-
- <style type="text/css">
+
+<title>CodeMirror: Bi-directional Text Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Bi-directional Text Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Bi-directional Text</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by
+<article>
+<h2>Bi-directional Text Demo</h2>
+<form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by
Google Translate -->
<dl>
@@ -57,5 +67,4 @@
the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
blog post</a> for more background.</p>
- </body>
-</html>
+ </article>
View
45 demo/btree.html
@@ -1,31 +1,31 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: B-Tree visualization</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: B-Tree visualization</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<style type="text/css">
.lineblock { display: inline-block; margin: 1px; height: 5px; }
.CodeMirror {border: 1px solid #aaa; height: 400px}
</style>
- </head>
- <body>
- <h1>CodeMirror: B-Tree visualization</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
- <p>Shows a visual representation of the b-tree that CodeMirror
- uses to store its document. See
- the <a href="http://marijnhaverbeke.nl/blog/codemirror-line-tree.html">corresponding
- blog post</a> for a description of this format. The gray blocks
- under each leaf show the lines it holds (with their width
- representing the line height). Add and remove content to see how
- the nodes are split and merged to keep the tree balanced.</p>
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">B-Tree visualization</a>
+ </ul>
+</div>
- <div style="position: relative">
- <div style="width: 60%; display: inline-block; vertical-align: top">
- <form><textarea id="code" name="code">type here, see a summary of the document b-tree to the right</textarea></form>
+<article>
+<h2>B-Tree visualization</h2>
+<form><textarea id="code" name="code">type here, see a summary of the document b-tree below</textarea></form>
</div>
<div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
</div>
@@ -83,5 +83,4 @@
<p><button onclick="fillEditor()">Add a lot of content</button></p>
- </body>
-</html>
+ </article>
View
43 demo/buffers.html
@@ -1,20 +1,32 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Multiple Buffer & Split View Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <script src="../mode/css/css.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
-
- <style type="text/css" id=style>
+
+<title>CodeMirror: Multiple Buffer & Split View Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/css/css.js"></script>
+<style type="text/css" id=style>
.CodeMirror {border: 1px solid black; height: 250px;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Multiple Buffer & Split View</a>
+ </ul>
+</div>
+
+<article>
+<h2>Multiple Buffer & Split View Demo</h2>
+
<div id=code_top></div>
<div>
@@ -94,5 +106,4 @@
using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
to use a single editor to display multiple documents.</p>
- </body>
-</html>
+ </article>
View
41 demo/changemode.html
@@ -1,22 +1,32 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Mode-Changing Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <script src="../mode/scheme/scheme.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Mode-Changing Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/scheme/scheme.js"></script>
+<style type="text/css">
.CodeMirror {border: 1px solid black;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Mode-Changing demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Mode-Changing</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Mode-Changing Demo</h2>
+<form><textarea id="code" name="code">
;; If there is Scheme code in here, the editor will be in Scheme mode.
;; If you put in JS instead, it'll switch to JS mode.
@@ -46,5 +56,4 @@
editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
}
</script>
- </body>
-</html>
+ </article>
View
54 demo/closebrackets.html
@@ -1,31 +1,32 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Closebrackets Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/edit/closebrackets.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
- .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
- </style>
- </head>
- <body>
-
- <h1>CodeMirror: Closebrackets Demo</h1>
-
- <p>Type a bracket like '[', '(', '{', '&quot;', or '''
- and <a href="../doc/manual.html#addon_closebrackets">the addon</a>
- will auto-close it. Type the closing variant when directly in
- front of a matching character and it will overwrite it.</p>
- <p>If you backspace over a starting bracket while inside empty brackets
- (e.g. <code>{|}</code>), it will delete the closing bracket for you.</p>
+<title>CodeMirror: Closebrackets Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
-
- <form><textarea id="code" name="code">(function() {
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/edit/closebrackets.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<style type="text/css">
+ .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+ </style>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Closebrackets</a>
+ </ul>
+</div>
+
+<article>
+<h2>Closebrackets Demo</h2>
+<form><textarea id="code" name="code">(function() {
var DEFAULT_BRACKETS = "()[]{}''\"\"";
CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
@@ -59,5 +60,4 @@
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
</script>
- </body>
-</html>
+ </article>
View
55 demo/closetag.html
@@ -1,37 +1,40 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Close-Tag Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/edit/closetag.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <script src="../mode/css/css.js"></script>
- <script src="../mode/htmlmixed/htmlmixed.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+
+<title>CodeMirror: Close-Tag Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/edit/closetag.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/css/css.js"></script>
+<script src="../mode/htmlmixed/htmlmixed.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
</style>
- </head>
- <body>
-
- <h1>Close-Tag Demo</h1>
- <ul>
- <li>Type an html tag. When you type '>' or '/', the tag will auto-close/complete. Block-level tags will indent.</li>
- <li>There are options for disabling tag closing or customizing the list of tags to indent.</li>
- <li>Works with "text/html" (based on htmlmixed.js or xml.js) mode.</li>
- <li>View source for key binding details.</li>
- </ul>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Close-Tag</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code"><html</textarea></form>
+<article>
+<h2>Close-Tag Demo</h2>
+<form><textarea id="code" name="code"><html</textarea></form>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: 'text/html',
autoCloseTags: true
});
</script>
- </body>
-</html>
+ </article>
View
52 demo/complete.html
@@ -1,20 +1,31 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Autocomplete Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/hint/show-hint.js"></script>
- <link rel="stylesheet" href="../addon/hint/show-hint.css">
- <script src="../addon/hint/javascript-hint.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- </head>
- <body>
- <h1>CodeMirror: Autocomplete demo</h1>
- <form><textarea id="code" name="code">
+<title>CodeMirror: Autocomplete Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/hint/show-hint.js"></script>
+<script src="../addon/hint/javascript-hint.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Autocomplete</a>
+ </ul>
+</div>
+
+<article>
+<h2>Autocomplete Demo</h2>
+<form><textarea id="code" name="code">
function getCompletions(token, context) {
var found = [], start = token.string;
function maybeAdd(str) {
@@ -52,10 +63,10 @@
}
</textarea></form>
-<p>Press <strong>ctrl-space</strong> to activate autocompletion. See
-the code (<a href="../addon/hint/show-hint.js">here</a>
-and <a href="../addon/hint/javascript-hint.js">here</a>) to figure out
-how it works.</p>
+<p>Press <strong>ctrl-space</strong> to activate autocompletion. Built
+on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a>
+and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a>
+addons.</p>
<script>
CodeMirror.commands.autocomplete = function(cm) {
@@ -66,5 +77,4 @@
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
- </body>
-</html>
+ </article>
View
53 demo/emacs.html
@@ -1,28 +1,38 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Emacs bindings demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/clike/clike.js"></script>
- <script src="../keymap/emacs.js"></script>
- <script src="../addon/edit/matchbrackets.js"></script>
- <script src="../addon/comment/comment.js"></script>
- <script src="../addon/dialog/dialog.js"></script>
- <script src="../addon/search/searchcursor.js"></script>
- <script src="../addon/search/search.js"></script>
- <link rel="stylesheet" href="../addon/dialog/dialog.css">
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Emacs bindings demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/dialog/dialog.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/clike/clike.js"></script>
+<script src="../keymap/emacs.js"></script>
+<script src="../addon/edit/matchbrackets.js"></script>
+<script src="../addon/comment/comment.js"></script>
+<script src="../addon/dialog/dialog.js"></script>
+<script src="../addon/search/searchcursor.js"></script>
+<script src="../addon/search/search.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Emacs bindings demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Emacs bindings</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Emacs bindings demo</h2>
+<form><textarea id="code" name="code">
#include "syscalls.h"
/* getchar: simple buffered version */
int getchar(void)
@@ -62,5 +72,4 @@
});
</script>
- </body>
-</html>
+ </article>
View
54 demo/folding.html
@@ -1,19 +1,18 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Code Folding Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/fold/foldcode.js"></script>
- <script src="../addon/fold/foldgutter.js"></script>
- <script src="../addon/fold/brace-fold.js"></script>
- <script src="../addon/fold/xml-fold.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Code Folding Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/fold/foldcode.js"></script>
+<script src="../addon/fold/foldgutter.js"></script>
+<script src="../addon/fold/brace-fold.js"></script>
+<script src="../addon/fold/xml-fold.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-foldmarker {
color: blue;
@@ -37,16 +36,22 @@
content: "\25B8";
}
</style>
- </head>
- <body>
- <h1>CodeMirror: Code Folding Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Code Folding</a>
+ </ul>
+</div>
- <p>Demonstration of code folding using the code
- in <a href="../doc/manual.html#addon_foldcode"><code>foldcode.js</code></a>
- and <a href="../doc/manual.html#addon_foldgutter"><code>foldgutter.js</code></a>.
- Press ctrl-q or click on the gutter markers to fold a block, again
- to unfold.</p>
- <form>
+<article>
+<h2>Code Folding Demo</h2>
+<form>
<div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
<div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
</form>
@@ -81,5 +86,4 @@
editor_html.foldCode(CodeMirror.Pos(1, 0));
};
</script>
- </body>
-</html>
+ </article>
View
41 demo/fullscreen.html
@@ -1,15 +1,14 @@
<!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">
+<title>CodeMirror: Full Screen Editing</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../theme/night.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror-fullscreen {
display: block;
position: absolute;
@@ -18,11 +17,22 @@
z-index: 9999;
}
</style>
- </head>
- <body>
- <h1>CodeMirror: Full Screen Editing</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Full Screen Editing</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code" rows="5">
+<article>
+<h2>Full Screen Editing</h2>
+<form><textarea id="code" name="code" rows="5">
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
<dd>Whether, when indenting, the first N*8 spaces should be
replaced by N tabs. Default is false.</dd>
@@ -143,5 +153,4 @@
</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>
+ </article>
View
56 demo/html5complete.html
@@ -1,27 +1,38 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: HTML completion demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/hint/show-hint.js"></script>
- <link rel="stylesheet" href="../addon/hint/show-hint.css">
- <script src="../addon/hint/xml-hint.js"></script>
- <script src="../addon/hint/html-hint.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <script src="../mode/css/css.js"></script>
- <script src="../mode/htmlmixed/htmlmixed.js"></script>
-
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+
+<title>CodeMirror: HTML completion demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/hint/show-hint.js"></script>
+<script src="../addon/hint/xml-hint.js"></script>
+<script src="../addon/hint/html-hint.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/css/css.js"></script>
+<script src="../mode/htmlmixed/htmlmixed.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
</style>
- </head>
- <body>
-
- <h1>HTML completion demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">HTML completion</a>
+ </ul>
+</div>
+
+<article>
+<h2>HTML completion demo</h2>
+
<p>Shows the <a href="xmlcomplete.html">XML completer</a>
parameterized with information about the tags in HTML.
Press <strong>ctrl-space</strong> to activate completion.</p>
@@ -40,5 +51,4 @@
});
};
</script>
- </body>
-</html>
+ </article>
View
41 demo/indentwrap.html
@@ -1,21 +1,31 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Indented wrapped line demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
-
- <style type="text/css">
+
+<title>CodeMirror: Indented wrapped line demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Indented wrapped line demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Indented wrapped line</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Indented wrapped line demo</h2>
+<form><textarea id="code" name="code">
<!doctype html>
<body>
<h2 id="overview">Overview</h2>
@@ -45,5 +55,4 @@ <h2 id="overview">Overview</h2>
editor.refresh();
</script>
- </body>
-</html>
+ </article>
View
51 demo/lint.html
@@ -1,25 +1,37 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Linter Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
- <script src="https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <link rel="stylesheet" href="../addon/lint/lint.css">
- <script src="../addon/lint/lint.js"></script>
- <script src="../addon/lint/javascript-lint.js"></script>
- <script src="../addon/lint/json-lint.js"></script>
- <style type="text/css">
+<title>CodeMirror: Linter Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/lint/lint.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
+<script src="https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
+<script src="../addon/lint/lint.js"></script>
+<script src="../addon/lint/javascript-lint.js"></script>
+<script src="../addon/lint/json-lint.js"></script>
+<style type="text/css">
.CodeMirror {border: 1px solid black;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Linter Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Linter</a>
+ </ul>
+</div>
+
+<article>
+<h2>Linter Demo</h2>
+
<p><textarea id="code-js">var widgets = []
function updateHints() {
@@ -86,5 +98,4 @@
});
</script>
- </body>
-</html>
+ </article>
View
39 demo/loadmode.html
@@ -1,21 +1,31 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Lazy Mode Loading Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/mode/loadmode.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Lazy Mode Loading Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/mode/loadmode.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Lazy Mode Loading</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Lazy Mode Loading</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">This is the editor.
+<article>
+<h2>Lazy Mode Loading Demo</h2>
+<form><textarea id="code" name="code">This is the editor.
// It starts out in plain text mode,
# use the control below to load and apply a mode
"you'll see the highlighting of" this text /*change*/.
@@ -36,5 +46,4 @@
CodeMirror.autoLoadMode(editor, modeInput.value);
}
</script>
- </body>
-</html>
+ </article>
View
41 demo/marker.html
@@ -1,23 +1,33 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Breakpoint Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
-
- <style type="text/css">
+
+<title>CodeMirror: Breakpoint Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<style type="text/css">
.breakpoints {width: .8em;}
.breakpoint { color: #822; }
.CodeMirror {border: 1px solid #aaa;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Breakpoint demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Breakpoint</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Breakpoint Demo</h2>
+<form><textarea id="code" name="code">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"]
@@ -55,5 +65,4 @@
}
</script>
- </body>
-</html>
+ </article>
View
41 demo/markselection.html
@@ -1,24 +1,34 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Match Highlighter Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/search/searchcursor.js"></script>
- <script src="../addon/selection/mark-selection.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Match Highlighter Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/search/searchcursor.js"></script>
+<script src="../addon/selection/mark-selection.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-selected { background-color: blue !important; }
.CodeMirror-selectedtext { color: white; }
</style>
- </head>
- <body>
- <h1>CodeMirror: Mark Selection Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Match Highlighter</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">Select something from here.
+<article>
+<h2>Match Highlighter Demo</h2>
+<form><textarea id="code" name="code">Select something from here.
You'll see that the selection's foreground color changes to white!
Since, by default, CodeMirror only puts an independent "marker" layer
behind the text, you'll need something like this to change its colour.</textarea></form>
@@ -32,5 +42,4 @@
<p>Simple addon to easily mark (and style) selected text.</p>
- </body>
-</html>
+ </article>
View
41 demo/matchhighlighter.html
@@ -1,27 +1,37 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Match Highlighter Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/search/searchcursor.js"></script>
- <script src="../addon/search/match-highlighter.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Match Highlighter Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/search/searchcursor.js"></script>
+<script src="../addon/search/match-highlighter.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom;
background-repeat: repeat-x;
}
</style>
- </head>
- <body>
- <h1>CodeMirror: Match Highlighter Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Match Highlighter</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">Select this text: hardToSpotVar
+<article>
+<h2>Match Highlighter Demo</h2>
+<form><textarea id="code" name="code">Select this text: hardToSpotVar
And everywhere else in your code where hardToSpotVar appears will automatically illuminate.
Give it a try! No more hardToSpotVars.</textarea></form>
@@ -34,5 +44,4 @@
<p>Search and highlight occurences of the selected text.</p>
- </body>
-</html>
+ </article>
View
45 demo/matchtags.html
@@ -1,22 +1,34 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Tag Matcher Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/fold/xml-fold.js"></script>
- <script src="../addon/edit/matchtags.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
-
- <style type="text/css">
+
+<title>CodeMirror: Tag Matcher Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/fold/xml-fold.js"></script>
+<script src="../addon/edit/matchtags.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
</style>
- </head>
- <body>
- <h1>CodeMirror: Tag Matcher Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Tag Matcher</a>
+ </ul>
+</div>
+
+<article>
+<h2>Tag Matcher Demo</h2>
+
<div id="editor"></div>
@@ -34,5 +46,4 @@
<p>Put the cursor on or inside a pair of tags to highlight them.
Press Ctrl-J to jump to the tag that matches the one under the
cursor.</p>
- </body>
-</html>
+ </article>
View
41 demo/merge.html
@@ -1,15 +1,16 @@
<!doctype html>
-<head>
- <meta charset="utf-8">
- <link rel=stylesheet href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <script src="../addon/merge/dep/diff_match_patch.js"></script>
- <link rel=stylesheet href="../addon/merge/merge.css">
- <script src="../addon/merge/merge.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <title>CodeMirror: merge view demo</title>
- <style>
+
+<title>CodeMirror: merge view demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel=stylesheet href="../lib/codemirror.css">
+<link rel=stylesheet href="../addon/merge/merge.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../addon/merge/dep/diff_match_patch.js"></script>
+<script src="../addon/merge/merge.js"></script>
+<style>
.CodeMirror { line-height: 1.2; }
body { max-width: 80em; }
span.clicky {
@@ -20,9 +21,22 @@
border-radius: 3px;
}
</style>
-</head>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">merge view</a>
+ </ul>
+</div>
+
+<article>
+<h2>merge view demo</h2>
-<h1>CodeMirror: merge view demo</h1>
<div id=view></div>
@@ -61,3 +75,4 @@
initUI(2);
};
</script>
+</article>
View
41 demo/multiplex.html
@@ -1,23 +1,33 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Multiplexing Parser Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/mode/multiplex.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Multiplexing Parser Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/mode/multiplex.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror {border: 1px solid black;}
.cm-delimit {color: #fa4;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Multiplexing Parser Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Multiplexing Parser</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Multiplexing Parser Demo</h2>
+<form><textarea id="code" name="code">
<html>
<body style="<<magic>>">
<h1><< this is not <html >></h1>
@@ -62,5 +72,4 @@
<a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
</p>
- </body>
-</html>
+ </article>
View
43 demo/mustache.html
@@ -1,23 +1,33 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Overlay Parser Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/mode/overlay.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Overlay Parser Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/mode/overlay.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
.CodeMirror {border: 1px solid black;}
.cm-mustache {color: #0ca;}
- </style>
- </head>
- <body>
- <h1>CodeMirror: Overlay Parser Demo</h1>
+</style>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
- <form><textarea id="code" name="code">
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Overlay Parser</a>
+ </ul>
+</div>
+
+<article>
+<h2>Overlay Parser Demo</h2>
+<form><textarea id="code" name="code">
<html>
<body>
<h1>{{title}}</h1>
@@ -55,5 +65,4 @@
in <a href="../addon/mode/overlay.js"><code>overlay.js</code></a>. View
source to see the 15 lines of code needed to accomplish this.</p>
- </body>
-</html>
+ </article>
View
39 demo/placeholder.html
@@ -1,24 +1,34 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Placeholder demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/display/placeholder.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Placeholder demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/display/placeholder.js"></script>
+<style type="text/css">
.CodeMirror { border: 1px solid silver; }
.CodeMirror-empty { outline: 1px solid #c22; }
.CodeMirror-empty.CodeMirror-focused { outline: none; }
.CodeMirror pre.CodeMirror-placeholder { color: #999; }
</style>
- </head>
- <body>
- <h1>CodeMirror: Placeholder demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Placeholder</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
+<article>
+<h2>Placeholder demo</h2>
+<form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
<p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
plug-in adds an option <code>placeholder</code> that can be set to
@@ -32,5 +42,4 @@
});
</script>
- </body>
-</html>
+ </article>
View
46 demo/preview.html
@@ -1,16 +1,16 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: HTML5 preview</title>
- <script src=../lib/codemirror.js></script>
- <script src=../mode/xml/xml.js></script>
- <script src=../mode/javascript/javascript.js></script>
- <script src=../mode/css/css.js></script>
- <script src=../mode/htmlmixed/htmlmixed.js></script>
- <link rel=stylesheet href=../lib/codemirror.css>
- <link rel=stylesheet href=../doc/docs.css>
- <style type=text/css>
+
+<title>CodeMirror: HTML5 preview</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel=stylesheet href=../lib/codemirror.css>
+<script src=../lib/codemirror.js></script>
+<script src=../mode/xml/xml.js></script>
+<script src=../mode/javascript/javascript.js></script>
+<script src=../mode/css/css.js></script>
+<script src=../mode/htmlmixed/htmlmixed.js></script>
+<style type=text/css>
.CodeMirror {
float: left;
width: 50%;
@@ -24,9 +24,22 @@
border-left: 0px;
}
</style>
- </head>
- <body>
- <h1>CodeMirror: HTML5 preview</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">HTML5 preview</a>
+ </ul>
+</div>
+
+<article>
+<h2>HTML5 preview</h2>
+
<textarea id=code name=code>
<!doctype html>
<html>
@@ -72,5 +85,4 @@
}
setTimeout(updatePreview, 300);
</script>
- </body>
-</html>
+ </article>
View
39 demo/resize.html
@@ -1,14 +1,13 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Autoresize Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/css/css.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Autoresize Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/css/css.js"></script>
+<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
height: auto;
@@ -18,11 +17,22 @@
overflow-x: auto;
}
</style>
- </head>
- <body>
- <h1>CodeMirror: Autoresize demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Autoresize</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Autoresize Demo</h2>
+<form><textarea id="code" name="code">
.CodeMirror {
border: 1px solid #eee;
height: auto;
@@ -45,5 +55,4 @@
});
</script>
- </body>
-</html>
+ </article>
View
40 demo/runmode.html
@@ -1,16 +1,29 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Mode Runner Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/runmode/runmode.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- </head>
- <body>
- <h1>CodeMirror: Mode Runner Demo</h1>
+
+<title>CodeMirror: Mode Runner Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/runmode/runmode.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Mode Runner</a>
+ </ul>
+</div>
+
+<article>
+<h2>Mode Runner Demo</h2>
+
<textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
<foobar>
@@ -46,5 +59,4 @@
(through <code>innerHTML</code>).</dd>
</dl>
- </body>
-</html>
+ </article>
View
47 demo/search.html
@@ -1,26 +1,36 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Search/Replace Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <script src="../addon/dialog/dialog.js"></script>
- <link rel="stylesheet" href="../addon/dialog/dialog.css">
- <script src="../addon/search/searchcursor.js"></script>
- <script src="../addon/search/search.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
+<title>CodeMirror: Search/Replace Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/dialog/dialog.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../addon/dialog/dialog.js"></script>
+<script src="../addon/search/searchcursor.js"></script>
+<script src="../addon/search/search.js"></script>
+<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
dt {font-family: monospace; color: #666;}
</style>
- </head>
- <body>
- <h1>CodeMirror: Search/Replace Demo</h1>
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Search/Replace</a>
+ </ul>
+</div>
- <form><textarea id="code" name="code">
+<article>
+<h2>Search/Replace Demo</h2>
+<form><textarea id="code" name="code">
<dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
<dd>Whether, when indenting, the first N*8 spaces should be
replaced by N tabs. Default is false.</dd>
@@ -81,5 +91,4 @@
For good-looking input dialogs, you also want to include
<a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a>
and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p>
- </body>
-</html>
+ </article>
View
32 demo/spanaffectswrapping_shim.html
@@ -1,12 +1,25 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title>
- <link rel="stylesheet" href="../doc/docs.css">
- </head>
- <body>
- <h1>CodeMirror: odd wrapping shim</h1>
+
+<title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<div id=nav>
+ <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https://github.com/marijnh/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Automatically derive odd wrapping behavior for your browser</a>
+ </ul>
+</div>
+
+<article>
+<h2>Automatically derive odd wrapping behavior for your browser</h2>
+
<p>This is a hack to automatically derive
a <code>spanAffectsWrapping</code> regexp for a browser. See the
@@ -69,5 +82,4 @@
document.getElementById("output").appendChild(document.createTextNode("Your regexp is: " + (newRE || "^$")));
</script>
- </body>
-</html>
+ </article>
View
76 demo/tern.html
@@ -1,39 +1,46 @@
<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Tern Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../mode/javascript/javascript.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">