From 12a25eaf34f9dc7cf0fd6f6663ad1160408c7e4f Mon Sep 17 00:00:00 2001
From: Marijn Haverbeke <marijnh@gmail.com>
Date: Tue, 13 Aug 2013 18:34:34 +0200
Subject: [PATCH] Move to a new website layout

---
 demo/activeline.html                   |  41 +-
 demo/anywordhint.html                  |  44 +-
 demo/bidi.html                         |  41 +-
 demo/btree.html                        |  45 +-
 demo/buffers.html                      |  43 +-
 demo/changemode.html                   |  41 +-
 demo/closebrackets.html                |  54 +--
 demo/closetag.html                     |  55 ++-
 demo/complete.html                     |  52 +-
 demo/emacs.html                        |  53 ++-
 demo/folding.html                      |  54 ++-
 demo/fullscreen.html                   |  41 +-
 demo/html5complete.html                |  56 ++-
 demo/indentwrap.html                   |  41 +-
 demo/lint.html                         |  51 +-
 demo/loadmode.html                     |  39 +-
 demo/marker.html                       |  41 +-
 demo/markselection.html                |  41 +-
 demo/matchhighlighter.html             |  41 +-
 demo/matchtags.html                    |  45 +-
 demo/merge.html                        |  41 +-
 demo/multiplex.html                    |  41 +-
 demo/mustache.html                     |  43 +-
 demo/placeholder.html                  |  39 +-
 demo/preview.html                      |  46 +-
 demo/resize.html                       |  39 +-
 demo/runmode.html                      |  40 +-
 demo/search.html                       |  47 +-
 demo/spanaffectswrapping_shim.html     |  32 +-
 demo/tern.html                         |  76 +--
 demo/theme.html                        |  89 ++--
 demo/trailingspace.html                |  39 +-
 demo/variableheight.html               |  45 +-
 demo/vim.html                          |  47 +-
 demo/visibletabs.html                  |  39 +-
 demo/widget.html                       |  41 +-
 demo/xmlcomplete.html                  |  46 +-
 doc/activebookmark.js                  |  42 ++
 doc/baboon.png                         | Bin 23299 -> 0 bytes
 doc/baboon_vector.svg                  | 153 ------
 doc/compress.html                      |  38 +-
 doc/docs.css                           | 274 ++++++-----
 doc/internals.html                     | 108 +++--
 doc/logo.png                           | Bin 0 -> 12003 bytes
 doc/logo.svg                           | 147 ++++++
 doc/manual.html                        | 158 +++---
 doc/modes.html                         | 100 ----
 doc/realworld.html                     |  37 +-
 doc/{oldrelease.html => releases.html} | 350 +++++++++++---
 doc/reporting.html                     |  41 +-
 doc/upgrade_v2.2.html                  |  48 +-
 doc/upgrade_v3.html                    | 135 +++---
 index.html                             | 634 +++++++------------------
 mode/apl/index.html                    |  41 +-
 mode/asterisk/index.html               |  42 +-
 mode/clike/index.html                  |  41 +-
 mode/clike/scala.html                  |  54 +--
 mode/clojure/index.html                |  42 +-
 mode/cobol/index.html                  |  85 ++--
 mode/coffeescript/index.html           |  42 +-
 mode/commonlisp/index.html             |  42 +-
 mode/css/index.html                    |  42 +-
 mode/css/scss.html                     |  42 +-
 mode/d/index.html                      |  41 +-
 mode/diff/index.html                   |  42 +-
 mode/ecl/index.html                    |  43 +-
 mode/erlang/index.html                 |  43 +-
 mode/gas/index.html                    |  43 +-
 mode/gfm/index.html                    |  56 ++-
 mode/go/index.html                     |  43 +-
 mode/groovy/index.html                 |  41 +-
 mode/haml/index.html                   |  50 +-
 mode/haskell/index.html                |  43 +-
 mode/haxe/index.html                   |  41 +-
 mode/htmlembedded/index.html           |  47 +-
 mode/htmlmixed/index.html              |  50 +-
 mode/http/index.html                   |  41 +-
 mode/index.html                        | 106 +++++
 mode/jade/index.html                   |  42 +-
 mode/javascript/index.html             |  47 +-
 mode/javascript/typescript.html        |  41 +-
 mode/jinja2/index.html                 |  42 +-
 mode/less/index.html                   |  46 +-
 mode/livescript/index.html             |  43 +-
 mode/lua/index.html                    |  46 +-
 mode/markdown/index.html               |  46 +-
 mode/mirc/index.html                   |  44 +-
 mode/nginx/index.html                  |  40 +-
 mode/ntriples/index.html               |  42 +-
 mode/ocaml/index.html                  |  29 +-
 mode/pascal/index.html                 |  41 +-
 mode/perl/index.html                   |  41 +-
 mode/php/index.html                    |  51 +-
 mode/pig/index.html                    |  37 +-
 mode/properties/index.html             |  42 +-
 mode/python/index.html                 |  44 +-
 mode/q/index.html                      |  43 +-
 mode/r/index.html                      |  42 +-
 mode/rpm/changes/index.html            |  34 +-
 mode/rpm/spec/index.html               |  33 +-
 mode/rst/index.html                    |  40 +-
 mode/ruby/index.html                   |  44 +-
 mode/rust/index.html                   |  41 +-
 mode/sass/index.html                   |  44 +-
 mode/scheme/index.html                 |  42 +-
 mode/shell/index.html                  |  29 +-
 mode/sieve/index.html                  |  42 +-
 mode/smalltalk/index.html              |  41 +-
 mode/smarty/index.html                 |  44 +-
 mode/smartymixed/index.html            |  51 +-
 mode/sparql/index.html                 |  44 +-
 mode/sql/index.html                    |  57 +--
 mode/stex/index.html                   |  42 +-
 mode/tcl/index.html                    |  44 +-
 mode/tiddlywiki/index.html             |  45 +-
 mode/tiki/index.html                   |  44 +-
 mode/turtle/index.html                 |  42 +-
 mode/vb/index.html                     |  49 +-
 mode/vbscript/index.html               |  42 +-
 mode/velocity/index.html               |  44 +-
 mode/verilog/index.html                |  39 +-
 mode/xml/index.html                    |  42 +-
 mode/xquery/index.html                 |  71 ++-
 mode/yaml/index.html                   |  42 +-
 mode/z80/index.html                    |  41 +-
 test/index.html                        | 105 ++--
 126 files changed, 4225 insertions(+), 3079 deletions(-)
 create mode 100644 doc/activebookmark.js
 delete mode 100644 doc/baboon.png
 delete mode 100644 doc/baboon_vector.svg
 create mode 100644 doc/logo.png
 create mode 100644 doc/logo.svg
 delete mode 100644 doc/modes.html
 rename doc/{oldrelease.html => releases.html} (70%)
 create mode 100644 mode/index.html

diff --git a/demo/activeline.html b/demo/activeline.html
index b0ea9b90..a9b000e6 100644
--- a/demo/activeline.html
+++ b/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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 
     <p>Styling the current cursor line.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/anywordhint.html b/demo/anywordhint.html
index 5bb0a62a..851f4300 100644
--- a/demo/anywordhint.html
+++ b/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 @@ to those.</p>
         extraKeys: {"Ctrl-Space": "autocomplete"}
       });
     </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/bidi.html b/demo/bidi.html
index 47feb8c5..082e7b3e 100644
--- a/demo/bidi.html
+++ b/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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
   the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
   blog post</a> for more background.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/btree.html b/demo/btree.html
index 5e5ce0ab..7635ca1b 100644
--- a/demo/btree.html
+++ b/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 @@ function fillEditor() {
 
 <p><button onclick="fillEditor()">Add a lot of content</button></p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/buffers.html b/demo/buffers.html
index bfd8248e..951209ca 100644
--- a/demo/buffers.html
+++ b/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 @@ selectBuffer(ed_bot, "js");
     using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
     to use a single editor to display multiple documents.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/changemode.html b/demo/changemode.html
index 364c5cdb..61c17860 100644
--- a/demo/changemode.html
+++ b/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 @@ either JavaScript or Scheme mode based on that.</p>
     editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
   }
 </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/closebrackets.html b/demo/closebrackets.html
index 47304ea8..8c0dc1cc 100644
--- a/demo/closebrackets.html
+++ b/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>
diff --git a/demo/closetag.html b/demo/closetag.html
index 87f4f019..8981f7eb 100644
--- a/demo/closetag.html
+++ b/demo/closetag.html
@@ -1,31 +1,35 @@
 <!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"), {
@@ -33,5 +37,4 @@
         autoCloseTags: true
       });
     </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/complete.html b/demo/complete.html
index 1a65f6e0..56999b9c 100644
--- a/demo/complete.html
+++ b/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 @@ function getCompletions(token, context) {
 }
 </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 @@ how it works.</p>
         extraKeys: {"Ctrl-Space": "autocomplete"}
       });
     </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/emacs.html b/demo/emacs.html
index 0a8cfc5d..5b622a99 100644
--- a/demo/emacs.html
+++ b/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 @@ or open a new window.</p>
       });
     </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/folding.html b/demo/folding.html
index e6cecf26..51faf706 100644
--- a/demo/folding.html
+++ b/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 @@ window.onload = function() {
   editor_html.foldCode(CodeMirror.Pos(1, 0));
 };
 </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/fullscreen.html b/demo/fullscreen.html
index 2709ebb4..8cf8005b 100644
--- a/demo/fullscreen.html
+++ b/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>
diff --git a/demo/html5complete.html b/demo/html5complete.html
index 9ea91822..899260aa 100644
--- a/demo/html5complete.html
+++ b/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>
diff --git a/demo/indentwrap.html b/demo/indentwrap.html
index c367c945..6c1fc596 100644
--- a/demo/indentwrap.html
+++ b/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 @@
       editor.refresh();
     </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/lint.html b/demo/lint.html
index d379c319..ee64237e 100644
--- a/demo/lint.html
+++ b/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 @@ function updateHints() {
   });
 </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/loadmode.html b/demo/loadmode.html
index 1bd958f7..be28c7a8 100644
--- a/demo/loadmode.html
+++ b/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 @@ function change() {
    CodeMirror.autoLoadMode(editor, modeInput.value);
 }
 </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/marker.html b/demo/marker.html
index f0981e4d..5cbd1625 100644
--- a/demo/marker.html
+++ b/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 @@ function makeMarker() {
 }
     </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/markselection.html b/demo/markselection.html
index e1c05486..2e52af93 100644
--- a/demo/markselection.html
+++ b/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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 
     <p>Simple addon to easily mark (and style) selected text.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/matchhighlighter.html b/demo/matchhighlighter.html
index 9d2fdd09..170213bf 100644
--- a/demo/matchhighlighter.html
+++ b/demo/matchhighlighter.html
@@ -1,15 +1,14 @@
 <!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==);
@@ -17,11 +16,22 @@
         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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 
     <p>Search and highlight occurences of the selected text.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/matchtags.html b/demo/matchtags.html
index 8f4217de..40ee8c0b 100644
--- a/demo/matchtags.html
+++ b/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 @@ window.onload = function() {
     <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>
diff --git a/demo/merge.html b/demo/merge.html
index 907f769d..d3c8eb03 100644
--- a/demo/merge.html
+++ b/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 @@ window.onload = function() {
   initUI(2);
 };
 </script>
+</article>
diff --git a/demo/multiplex.html b/demo/multiplex.html
index ec0519cb..2ad9608a 100644
--- a/demo/multiplex.html
+++ b/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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
       <a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
     </p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/mustache.html b/demo/mustache.html
index 9d2081dc..cb029159 100644
--- a/demo/mustache.html
+++ b/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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mu
     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>
diff --git a/demo/placeholder.html b/demo/placeholder.html
index b0f24569..6cf098b0 100644
--- a/demo/placeholder.html
+++ b/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>
diff --git a/demo/preview.html b/demo/preview.html
index f70cdb00..ccf9122e 100644
--- a/demo/preview.html
+++ b/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>
diff --git a/demo/resize.html b/demo/resize.html
index 7badc2bf..10326ef6 100644
--- a/demo/resize.html
+++ b/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 @@ automatically resize to fit its content.</p>
       });
     </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/runmode.html b/demo/runmode.html
index dba808ba..144783d3 100644
--- a/demo/runmode.html
+++ b/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 @@ function doHighlight() {
       (through <code>innerHTML</code>).</dd>
     </dl>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/search.html b/demo/search.html
index d7210715..4aef2a81 100644
--- a/demo/search.html
+++ b/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 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "te
     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>
diff --git a/demo/spanaffectswrapping_shim.html b/demo/spanaffectswrapping_shim.html
index 733db067..00de3bdc 100644
--- a/demo/spanaffectswrapping_shim.html
+++ b/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>
diff --git a/demo/tern.html b/demo/tern.html
index bbc5e478..adc79e5c 100644
--- a/demo/tern.html
+++ b/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">
-    <script src="../addon/dialog/dialog.js"></script>
-    <link rel="stylesheet" href="../addon/dialog/dialog.css">
-    <script src="../addon/hint/show-hint.js"></script>
-    <link rel="stylesheet" href="../addon/hint/show-hint.css">
-    <script src="../addon/tern/tern.js"></script>
-    <link rel="stylesheet" href="../addon/tern/tern.css">
-
-    <!-- NOTE: if you are going to actually deploy this in production,
-         DO NOT hot-link these files. Host them yourself. -->
-    <script src="http://marijnhaverbeke.nl/acorn/acorn.js"></script>
-    <script src="http://marijnhaverbeke.nl/acorn/acorn_loose.js"></script>
-    <script src="http://marijnhaverbeke.nl/acorn/util/walk.js"></script>
-    <script src="http://ternjs.net/lib/signal.js"></script>
-    <script src="http://ternjs.net/lib/tern.js"></script>
-    <script src="http://ternjs.net/lib/def.js"></script>
-    <script src="http://ternjs.net/lib/comment.js"></script>
-    <script src="http://ternjs.net/lib/infer.js"></script>
-    <script src="http://ternjs.net/plugin/doc_comment.js"></script>
-
-    <style>
+
+<title>CodeMirror: Tern Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/dialog/dialog.css">
+<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<link rel="stylesheet" href="../addon/tern/tern.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../addon/dialog/dialog.js"></script>
+<script src="../addon/hint/show-hint.js"></script>
+<script src="../addon/tern/tern.js"></script>
+<script src="http://marijnhaverbeke.nl/acorn/acorn.js"></script>
+<script src="http://marijnhaverbeke.nl/acorn/acorn_loose.js"></script>
+<script src="http://marijnhaverbeke.nl/acorn/util/walk.js"></script>
+<script src="http://ternjs.net/lib/signal.js"></script>
+<script src="http://ternjs.net/lib/tern.js"></script>
+<script src="http://ternjs.net/lib/def.js"></script>
+<script src="http://ternjs.net/lib/comment.js"></script>
+<script src="http://ternjs.net/lib/infer.js"></script>
+<script src="http://ternjs.net/plugin/doc_comment.js"></script>
+<style>
       .CodeMirror {border: 1px solid #ddd;}
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Tern Demo</h1>
-
-    <form><textarea id="code" name="code">// Use ctrl-space to complete something
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Tern</a>
+  </ul>
+</div>
+
+<article>
+<h2>Tern Demo</h2>
+<form><textarea id="code" name="code">// Use ctrl-space to complete something
 // Put the cursor in or after an expression, press ctrl-i to
 // find its type
 
@@ -118,5 +125,4 @@ overview.</p>
   });
 </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/theme.html b/demo/theme.html
index 53bd90a5..936df29c 100644
--- a/demo/theme.html
+++ b/demo/theme.html
@@ -1,46 +1,56 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Theme Demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <link rel="stylesheet" href="../theme/3024-day.css">
-    <link rel="stylesheet" href="../theme/3024-night.css">
-    <link rel="stylesheet" href="../theme/ambiance.css">
-    <link rel="stylesheet" href="../theme/base16-dark.css">
-    <link rel="stylesheet" href="../theme/base16-light.css">
-    <link rel="stylesheet" href="../theme/blackboard.css">
-    <link rel="stylesheet" href="../theme/cobalt.css">
-    <link rel="stylesheet" href="../theme/eclipse.css">
-    <link rel="stylesheet" href="../theme/elegant.css">
-    <link rel="stylesheet" href="../theme/erlang-dark.css">
-    <link rel="stylesheet" href="../theme/lesser-dark.css">
-    <link rel="stylesheet" href="../theme/midnight.css">
-    <link rel="stylesheet" href="../theme/monokai.css">
-    <link rel="stylesheet" href="../theme/neat.css">
-    <link rel="stylesheet" href="../theme/night.css">
-    <link rel="stylesheet" href="../theme/paraiso-dark.css">
-    <link rel="stylesheet" href="../theme/paraiso-light.css">
-    <link rel="stylesheet" href="../theme/rubyblue.css">
-    <link rel="stylesheet" href="../theme/solarized.css">
-    <link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
-    <link rel="stylesheet" href="../theme/twilight.css">
-    <link rel="stylesheet" href="../theme/vibrant-ink.css">
-    <link rel="stylesheet" href="../theme/xq-dark.css">
-    <link rel="stylesheet" href="../theme/xq-light.css">
-    <script src="../mode/javascript/javascript.js"></script>
-    <script src="../keymap/extra.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
 
-    <style type="text/css">
+<title>CodeMirror: Theme Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../theme/3024-day.css">
+<link rel="stylesheet" href="../theme/3024-night.css">
+<link rel="stylesheet" href="../theme/ambiance.css">
+<link rel="stylesheet" href="../theme/base16-dark.css">
+<link rel="stylesheet" href="../theme/base16-light.css">
+<link rel="stylesheet" href="../theme/blackboard.css">
+<link rel="stylesheet" href="../theme/cobalt.css">
+<link rel="stylesheet" href="../theme/eclipse.css">
+<link rel="stylesheet" href="../theme/elegant.css">
+<link rel="stylesheet" href="../theme/erlang-dark.css">
+<link rel="stylesheet" href="../theme/lesser-dark.css">
+<link rel="stylesheet" href="../theme/midnight.css">
+<link rel="stylesheet" href="../theme/monokai.css">
+<link rel="stylesheet" href="../theme/neat.css">
+<link rel="stylesheet" href="../theme/night.css">
+<link rel="stylesheet" href="../theme/paraiso-dark.css">
+<link rel="stylesheet" href="../theme/paraiso-light.css">
+<link rel="stylesheet" href="../theme/rubyblue.css">
+<link rel="stylesheet" href="../theme/solarized.css">
+<link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
+<link rel="stylesheet" href="../theme/twilight.css">
+<link rel="stylesheet" href="../theme/vibrant-ink.css">
+<link rel="stylesheet" href="../theme/xq-dark.css">
+<link rel="stylesheet" href="../theme/xq-light.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../keymap/extra.js"></script>
+<style type="text/css">
       .CodeMirror {border: 1px solid black; font-size:13px}
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Theme demo</h1>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Theme</a>
+  </ul>
+</div>
 
-    <form><textarea id="code" name="code">
+<article>
+<h2>Theme Demo</h2>
+<form><textarea id="code" name="code">
 function findSequence(goal) {
   function find(start, history) {
     if (start == goal)
@@ -100,5 +110,4 @@ function findSequence(goal) {
     editor.setOption("theme", choice);
   }
 </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/trailingspace.html b/demo/trailingspace.html
index ca74152e..c3e9c376 100644
--- a/demo/trailingspace.html
+++ b/demo/trailingspace.html
@@ -1,14 +1,13 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Trailing Whitespace Demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../addon/edit/trailingspace.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
 
-    <style type="text/css">
+<title>CodeMirror: Trailing Whitespace Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/edit/trailingspace.js"></script>
+<style type="text/css">
       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
       .cm-trailingspace {
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
@@ -16,11 +15,22 @@
         background-repeat: repeat-x;
       }
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Trailing Whitespace Demo</h1>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Trailing Whitespace</a>
+  </ul>
+</div>
 
-    <form><textarea id="code" name="code">This text  
+<article>
+<h2>Trailing Whitespace Demo</h2>
+<form><textarea id="code" name="code">This text  
  has some	 
 trailing whitespace!</textarea></form>
 
@@ -35,5 +45,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a>
 addon to highlight trailing whitespace.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/variableheight.html b/demo/variableheight.html
index b00f7e45..1ef8fc44 100644
--- a/demo/variableheight.html
+++ b/demo/variableheight.html
@@ -1,24 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Variable Height Demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../mode/markdown/markdown.js"></script>
-    <script src="../mode/xml/xml.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
-
-    <style type="text/css">
+
+<title>CodeMirror: Variable Height Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/markdown/markdown.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
       .CodeMirror {border: 1px solid silver; border-width: 1px 2px; }
       .cm-header { font-size: 150%; font-family: arial; }
       .cm-strong { font-size: 140%; }
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Variable Height Demo</h1>
-
-    <form><textarea id="code" name="code"># A First Level Header
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Variable Height</a>
+  </ul>
+</div>
+
+<article>
+<h2>Variable Height Demo</h2>
+<form><textarea id="code" name="code"># A First Level Header
 
 **Bold** text in a normal-size paragraph.
 
@@ -48,5 +58,4 @@ dog's back.
         mode: "markdown"
       });
     </script>
-  </body>
-</html>
+  </article>
diff --git a/demo/vim.html b/demo/vim.html
index 9b7a432c..379fac14 100644
--- a/demo/vim.html
+++ b/demo/vim.html
@@ -1,25 +1,35 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Vim bindings demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../addon/dialog/dialog.js"></script>
-    <script src="../addon/search/searchcursor.js"></script>
-    <script src="../mode/clike/clike.js"></script>
-    <script src="../keymap/vim.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
-    <link rel="stylesheet" href="../addon/dialog/dialog.css">
 
-    <style type="text/css">
+<title>CodeMirror: Vim bindings demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/dialog/dialog.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/dialog/dialog.js"></script>
+<script src="../addon/search/searchcursor.js"></script>
+<script src="../mode/clike/clike.js"></script>
+<script src="../keymap/vim.js"></script>
+<style type="text/css">
       .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Vim bindings demo</h1>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Vim bindings</a>
+  </ul>
+</div>
 
-    <form><textarea id="code" name="code">
+<article>
+<h2>Vim bindings demo</h2>
+<form><textarea id="code" name="code">
 #include "syscalls.h"
 /* getchar:  simple buffered version */
 int getchar(void)
@@ -61,5 +71,4 @@ a loose approximation of actual vim bindings, though.</p>
       });
     </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/visibletabs.html b/demo/visibletabs.html
index 109d1a6b..5a5a19aa 100644
--- a/demo/visibletabs.html
+++ b/demo/visibletabs.html
@@ -1,14 +1,13 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Visible tabs demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../mode/clike/clike.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
 
-    <style type="text/css">
+<title>CodeMirror: Visible tabs demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/clike/clike.js"></script>
+<style type="text/css">
       .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
       .cm-tab {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
@@ -16,11 +15,22 @@
          background-repeat: no-repeat;
       }
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Visible tabs demo</h1>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Visible tabs</a>
+  </ul>
+</div>
 
-    <form><textarea id="code" name="code">
+<article>
+<h2>Visible tabs demo</h2>
+<form><textarea id="code" name="code">
 #include "syscalls.h"
 /* getchar:  simple buffered version */
 int getchar(void)
@@ -49,5 +59,4 @@ class <code>cm-tab</code>, and can be styled.</p>
       });
     </script>
 
-  </body>
-</html>
+  </article>
diff --git a/demo/widget.html b/demo/widget.html
index a3b27a9e..6c468539 100644
--- a/demo/widget.html
+++ b/demo/widget.html
@@ -1,22 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Inline Widget Demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../mode/javascript/javascript.js"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
 
-    <style type="text/css">
+<title>CodeMirror: Inline Widget Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
+<style type="text/css">
       .CodeMirror {border: 1px solid black;}
       .lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
       .lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Inline Widget Demo</h1>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Inline Widget</a>
+  </ul>
+</div>
+
+<article>
+<h2>Inline Widget Demo</h2>
+
 
     <div id=code></div>
     <script id="script">var widgets = []
@@ -70,5 +82,4 @@ window.onload = function() {
 in the editor (which is the script used on this page), and
 inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
 display the warnings that JSHint comes up with.</p>
-  </body>
-</html>
+  </article>
diff --git a/demo/xmlcomplete.html b/demo/xmlcomplete.html
index 007893b9..2f81c54c 100644
--- a/demo/xmlcomplete.html
+++ b/demo/xmlcomplete.html
@@ -1,23 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: XML Autocomplete Demo</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../addon/hint/show-hint.js"></script>
-    <link rel="stylesheet" href="../addon/hint/show-hint.css">
-    <script src="../addon/hint/xml-hint.js"></script>
-    <script src="../mode/xml/xml.js"></script>
-    <link rel="stylesheet" href="../doc/docs.css">
-    <style type="text/css">
+
+<title>CodeMirror: XML Autocomplete Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/hint/show-hint.js"></script>
+<script src="../addon/hint/xml-hint.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style type="text/css">
       .CodeMirror { border: 1px solid #eee; }
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: XML Autocomplete demo</h1>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">XML Autocomplete</a>
+  </ul>
+</div>
 
-    <form><textarea id="code" name="code"><!-- write some xml below -->
+<article>
+<h2>XML Autocomplete Demo</h2>
+<form><textarea id="code" name="code"><!-- write some xml below -->
 </textarea></form>
 
     <p>Press <strong>ctrl-space</strong>, or type a '<' character to
@@ -102,5 +113,4 @@
         }
       });
     </script>
-  </body>
-</html>
+  </article>
diff --git a/doc/activebookmark.js b/doc/activebookmark.js
new file mode 100644
index 00000000..69a126e8
--- /dev/null
+++ b/doc/activebookmark.js
@@ -0,0 +1,42 @@
+(function() {
+  var pending = false, prevVal = null;
+
+  function updateSoon() {
+    if (!pending) {
+      pending = true;
+      setTimeout(update, 250);
+    }
+  }
+
+  function update() {
+    pending = false;
+    var marks = document.getElementById("nav").getElementsByTagName("a"), found;
+    for (var i = 0; i < marks.length; ++i) {
+      var mark = marks[i], m;
+      if (mark.getAttribute("data-default")) {
+        if (found == null) found = i;
+      } else if (m = mark.href.match(/#(.*)/)) {
+        var ref = document.getElementById(m[1]);
+        if (ref && ref.getBoundingClientRect().top < 50)
+          found = i;
+      }
+    }
+    if (found != null && found != prevVal) {
+      prevVal = found;
+      var lis = document.getElementById("nav").getElementsByTagName("li");
+      for (var i = 0; i < lis.length; ++i) lis[i].className = "";
+      for (var i = 0; i < marks.length; ++i) {
+        if (found == i) {
+          marks[i].className = "active";
+          for (var n = marks[i]; n; n = n.parentNode)
+            if (n.nodeName == "LI") n.className = "active";
+        } else {
+          marks[i].className = "";
+        }
+      }
+    }
+  }
+
+  window.addEventListener("scroll", updateSoon);
+  window.addEventListener("load", updateSoon);
+})();
diff --git a/doc/baboon.png b/doc/baboon.png
deleted file mode 100644
index 55d97f70b817ff2b78ebb409bf34a5147fe40d07..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 23299
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

diff --git a/doc/baboon_vector.svg b/doc/baboon_vector.svg
deleted file mode 100644
index dc1667af..00000000
--- a/doc/baboon_vector.svg
+++ /dev/null
@@ -1,153 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg3181"
-   version="1.1"
-   inkscape:version="0.48.0 r9654"
-   width="1750"
-   height="960"
-   xml:space="preserve"
-   sodipodi:docname="baboon_vector.svg"><metadata
-     id="metadata3187"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
-     id="defs3185"><clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath3195"><path
-         d="M 0,768 1400,768 1400,0 0,0 0,768 z"
-         id="path3197" /></clipPath><clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath3215"><path
-         d="M 0,768 1400,768 1400,0 0,0 0,768 z"
-         id="path3217" /></clipPath></defs><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1440"
-     inkscape:window-height="851"
-     id="namedview3183"
-     showgrid="false"
-     inkscape:zoom="0.20550291"
-     inkscape:cx="1534.1667"
-     inkscape:cy="795.78156"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g3189" /><g
-     id="g3189"
-     inkscape:groupmode="layer"
-     inkscape:label="baboon_vector"
-     transform="matrix(1.25,0,0,-1.25,0,960)"><g
-       id="g3191"><g
-         id="g3193"
-         clip-path="url(#clipPath3195)"><g
-           id="g3199"
-           transform="translate(458.9561,569.9678)"><path
-             d="m 0,0 59.835,69.355 87.034,26.518 133.949,-7.479 c 0,0 74.116,-32.639 74.795,-34.678 0.68,-2.04 84.314,-59.155 84.314,-59.155 l 12.238,-74.795 5.439,-97.912 -13.598,-25.159 -4.76,-40.797 -18.358,-23.118 24.39,-5.561 0.501,-5.192 -14.012,-60.641 16.477,-93.368 7.223,-49.972 -208.295,-51.754 -18.552,4.005 -37.468,8.325 -10.036,4.036 -66.885,10.101 c 0,0 -14.959,74.793 -16.999,73.433 -2.039,-1.359 -42.836,56.437 -42.836,56.437 l -19.719,65.274 12.48,74.571 -7.961,9.643 -26.479,16.187 -12.716,38.309 4.08,48.277 8.769,38.985 L 6.608,-74.308 0,0 z"
-             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-             id="path3201" /></g><g
-           id="g3203"
-           transform="translate(78.8657,682.1582)"><path
-             d="M 0,0 142.789,40.797 259.74,52.355 313.457,-232.543 204.665,-291.698 78.194,-293.738 0,0 z"
-             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-             id="path3205" /></g><g
-           id="g3207"
-           transform="translate(269.5122,345.2344)"><path
-             d="M 0,0 18.801,-74.425 40.728,-85.408 59.539,-59.541 40.259,13.503 36.821,15.669 0,0 z"
-             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-             id="path3209" /></g></g></g><g
-       id="g3223"
-       transform="translate(741.918,109.0332)"><path
-         d="m 0,0 -17.236,-9.401 -16.452,-22.721 -0.783,12.537 6.268,17.234 13.317,6.268 L 0,7.833 14.884,3.917 0,0 z m 172.622,-21.824 c -0.031,0.271 -0.081,0.535 -0.117,0.804 -20.85,7.653 -49.59,7.327 -66.874,10.927 -13.849,2.886 -23.047,9.119 -27.032,12.298 -9.863,-8.494 -12.025,-14.377 -12.025,-14.377 0,0 -9.816,15.309 -30.17,25.76 -7.05,3.621 -17.767,5.691 -29.341,5.691 -24.297,0 -52.384,-9.155 -58.339,-32.223 -10.458,-40.511 9.697,-76.594 49.814,-77.623 1.325,-0.034 2.623,-0.12 3.894,-0.12 36.131,0 48.855,8.572 58.323,15.478 0.027,0.021 0.104,0 0.104,0 0,0 25.126,-11.506 53.529,-11.506 4.419,0 9.156,0.415 14.249,1.063 31.641,4.018 47.989,28.124 43.985,63.828"
-         style="fill:#df0019;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3225"
-         inkscape:connector-curvature="0" /></g><g
-       id="g3227"
-       transform="translate(300.8481,270.0254)"><path
-         d="m 0,0 c -3.063,-0.691 -12.535,0.784 -12.535,0.784 l 6.267,-25.853 43.481,13.319 -9.01,27.418 C 28.203,15.668 7.867,1.777 0,0"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3229"
-         inkscape:connector-curvature="0" /></g><g
-       id="g3231"
-       transform="translate(211.66052,615.85984)"><path
-         d="m 0,0 -16.243,-2.871 -15.462,-9.4 4.323,-10.938 14.568,9.89 L 2.75,-8.771 0,0 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3233"
-         inkscape:connector-curvature="0" /></g><g
-       id="g3235"
-       transform="translate(274.15732,626.4084)"><path
-         d="m 0,0 -15.64,0.407 -14.279,-3.608 2.008,-9.747 14.756,4.208 L 1.111,-8.215 0,0 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3237"
-         inkscape:connector-curvature="0" /></g><path
-       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-       d="M 436.65625 22.28125 C 436.65625 22.28125 338.18375 25.385 251 42.8125 C 163.24875 60.35375 70.40625 99.65625 70.40625 99.65625 L 175.1875 495.28125 L 327.96875 492.34375 L 337.75 527.59375 C 337.75 527.59375 365.095 523.25875 373 518.78125 C 376.31375 516.90375 383.78125 508 383.78125 508 L 377.75 484.65625 L 504.21875 407.15625 L 436.65625 22.28125 z M 410.53125 55.1875 L 465.6875 393.3125 L 346.59375 456.625 L 202.75 466.46875 L 112 114.40625 L 263 79.1875 L 410.53125 55.1875 z "
-       transform="matrix(0.8,0,0,-0.8,0,768)"
-       id="path3253" /><g
-       id="g3247"
-       transform="matrix(1.199238,-0.02879331,0.02673084,1.0520756,172.41935,498.37339)"><path
-         d="m 0,0 c 0,0 -1.861,1.481 -9.143,-1.457 9.712,18.867 9.439,39.989 9.439,39.989 0,0 -3.106,-2.465 -11.311,-8.47 9.241,23.044 5.338,72.525 5.338,72.525 0,0 -17.493,40.746 -13.657,45.799 8.841,11.65 23.834,23.968 44.295,25.594 17.935,1.424 44.606,-4.953 55.865,-15.284 4.536,-4.161 23.367,-47.493 23.367,-47.493 0,0 6.104,-35.271 11.619,-54.108 5.513,-18.839 11.054,-26.674 21.284,-34.825 17.831,-14.207 27.076,-29.938 27.076,-29.938 L 143.399,3.945 c 3.655,-17.356 14.875,-34.28 27.39,-47.672 -12.863,1.507 -19.61,8.783 -19.61,8.783 0,0 2.151,-12.664 9.109,-26.554 l 28.712,15.264 -1.762,10.805 c -5.128,9.304 -9.336,15.534 -9.336,15.534 0,0 2.089,0.956 7.385,-3.572 l -2.005,12.296 c -4.814,9.391 -11.773,16.752 -25.115,31.113 5.944,-6.087 15.438,-5.379 20.751,-4.356 l -0.572,3.512 c -2.231,1.278 -5.494,3.171 -10.241,5.957 -12.43,7.299 -22.326,21.049 -22.326,21.049 0,0 12.85,1.815 20.513,11.022 -7.316,-2.641 -18.585,0.799 -18.585,0.799 -17.086,6.772 -15.022,30.217 -17.687,50.587 -2.667,20.37 -9.299,34.125 -9.299,34.125 0,0 -0.243,2.149 11.91,-5.906 -7.744,33.215 -35.545,44.94 -35.545,44.94 0,0 2.223,2.79 22.843,0.044 -16.469,15.817 -32.303,16.896 -32.303,16.896 0,0 10.077,2.25 23.611,0.24 0,0 -3.327,3.508 -7.549,6.453 L 35.985,194.291 -77.543,167.815 -8.211,-101.17 17.481,-99.413 C 8.602,-85.114 -0.371,-63.837 -2.15,-40.857 -4.911,-5.208 0,0 0,0"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3249"
-         inkscape:connector-curvature="0" /></g><g
-       id="g3255"
-       transform="translate(204.22134,580.88353)"><path
-         d="m 0,0 c 0,-1.418 0.43,-2.736 1.168,-3.83 1.523,0.677 3.551,1.094 5.786,1.094 2.164,0 4.133,-0.39 5.639,-1.029 0.711,1.081 1.129,2.374 1.129,3.765 0,3.79 -3.072,6.861 -6.861,6.861 C 3.071,6.861 0,3.79 0,0"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3257"
-         inkscape:connector-curvature="0" /></g><g
-       id="g3259"
-       transform="translate(256.3311,595.31646)"><path
-         d="m 0,0 c 0,-1.418 0.43,-2.736 1.168,-3.83 1.524,0.677 3.552,1.094 5.787,1.094 2.163,0 4.132,-0.39 5.638,-1.029 0.712,1.081 1.129,2.373 1.129,3.765 0,3.79 -3.072,6.861 -6.861,6.861 C 3.071,6.861 0,3.79 0,0"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3261"
-         inkscape:connector-curvature="0" /></g><g
-       id="g4174"
-       transform="matrix(0.99694509,0.07810563,-0.07810563,0.99694509,47.348748,-15.348299)"><g
-         transform="translate(222.5098,610.1558)"
-         id="g3219"><path
-           inkscape:connector-curvature="0"
-           id="path3221"
-           style="fill:#df0019;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="m 0,0 4.45,2.752 5.34,3.785 7.05,-8.226 7.093,-33.359 17.801,-51.259 13.86,-30.215 26.261,-1.55 -6.685,-35.653 c 0,0 -49.98,-21.871 -49.545,-21.911 -42.657,4.001 -12.553,43.066 -8.631,47.301 L 3.666,-47.869 0,0 z" /></g><g
-         transform="translate(247.626,467.3545)"
-         id="g3239"><path
-           inkscape:connector-curvature="0"
-           id="path3241"
-           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="M 0,0 C -3.044,-0.345 -5.232,-3.092 -4.888,-6.136 -4.543,-9.18 1.576,-2.254 13.308,-4.961 13.971,-1.97 3.044,0.344 0,0" /></g><g
-         transform="translate(279.4419,476.5762)"
-         id="g3243"><path
-           inkscape:connector-curvature="0"
-           id="path3245"
-           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="M 0,0 C 3.271,1.08 6.798,-0.697 7.88,-3.969 8.96,-7.24 -0.55,-3.044 -11.258,-11.329 -13.345,-8.586 -3.272,-1.081 0,0" /></g><g
-         transform="translate(284.1929,525.9082)"
-         id="g3263"><path
-           inkscape:connector-curvature="0"
-           id="path3265"
-           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-           d="M 0,0 C 0,0 -6.972,28.671 -6.972,29.355 L 1.585,2.864 9.999,-10.564 13.634,-32.697 7.922,-11.098 0,0 z M -0.633,-15.036 -9.19,-4.86 -16.478,25.776 c -0.202,0.684 9.106,-28.811 9.106,-28.811 l 8.64,-11.642 2.469,-17.336 -4.37,16.977 z m -6.339,-6.085 -10.457,16.826 -5.444,28.646 6.614,-27.842 11.311,-18.026 1.413,-9.583 -3.437,9.979 z m -53.462,-13.246 -1.437,24.944 -2.682,28.754 5.106,-29.895 1.212,-21.677 4.139,-18.236 -6.338,16.11 z m -4.265,-19.55 -6.665,15.516 0.404,29.205 -0.882,28.169 3.104,-28.396 0.808,-26.697 4.242,-15.972 2.423,-6.617 -3.434,4.792 z m -9.695,-2.967 -7.117,16.885 1.318,32.01 0,25.223 2.115,-25.061 -0.581,-31.259 5.869,-16.429 5.056,-8.671 -6.66,7.302 z m 103.144,-7.97 -6.676,20.38 2.141,11.54 L 16.499,-9.376 4.557,13.104 -5.879,53.97 c 0,0 -8.325,-7.41 -16.781,-8.08 -8.455,-0.671 -15.09,4.018 -15.09,4.018 0,0 3.592,-17.761 8.659,-37.597 5.069,-19.836 17.528,-44.866 17.528,-44.866 0,0 21.578,-8.197 24.302,-16.587 2.724,-8.391 -3.508,-22.911 -14.102,-26.551 -10.593,-3.64 -32.284,-8.262 -32.284,-8.262 0,0 -19,1.512 -20.438,14.26 0,0 4.131,16.406 10.418,19.225 6.285,2.819 21.362,11.174 21.362,11.174 l -8.254,1.332 -7.664,-1.332 c 0,0 -4.784,11.295 -10.973,35.086 -6.19,23.79 -8.967,42.485 -8.967,42.485 0,0 -3.912,-4.391 -14.199,-4.885 -10.286,-0.494 -16.031,7.988 -16.031,7.988 l 1.027,-30.185 -1.049,-25.83 -0.15,-29.22 5.102,-15.99 19.818,-30.448 c 0,0 14.102,-9.293 31.728,-9.293 16.453,1.328 51.131,18.047 51.131,18.047 l 9.536,16.687 z" /></g></g><g
-       id="g3267"
-       transform="translate(847.2637,321.5059)"><path
-         d="m 0,0 c 2.252,3.516 6.693,15.3 6.693,15.3 0,0 3.778,-13.306 1.912,-17.213 -3.056,-6.404 -23.905,-15.3 -23.905,-15.3 0,0 12.196,12.364 15.3,17.213 m -33.514,23.16 -0.757,56.352 c 0,0 11.136,-14.028 11.843,-19.739 1.176,-9.491 -11.086,-36.613 -11.086,-36.613 m -17.575,236.921 c 0,0 12.453,-15.338 14.854,-21.39 1.424,-3.591 2.286,-15.287 2.286,-15.287 l -17.14,36.677 z M -98.574,-86.136 c -9.757,-0.906 -29.836,1.016 -38.912,4.708 -7.499,3.05 -25.734,19.656 -25.734,19.656 l 24.187,-10.86 -4.701,17.627 15.272,-22.009 41.813,-5.356 c 0,0 -8.812,-3.477 -11.925,-3.766 m -74.428,157.941 c -4.518,10.057 -1.763,44.065 -1.763,44.065 0,0 7.544,-31.093 12.338,-40.541 6.978,-13.754 37.015,-49.352 37.015,-49.352 0,0 -40.824,30.759 -47.59,45.828 m -17.833,-149.47 -40.407,24.724 1.636,-17.575 0.026,-0.035 -5.178,-29.811 -2.056,-10.701 0.383,-33.34 -4.982,36.406 6.41,41.45 -11.063,8.338 -17.532,43.159 23.502,-38.779 2.351,14.101 40.634,-25.695 11.924,-5.651 13.809,-28.871 -19.457,22.28 z m -85.522,138.863 17.212,-34.424 c 0,0 -12.972,11.185 -15.299,16.257 -1.905,4.152 -1.913,18.167 -1.913,18.167 m -2.367,66.042 c 0,0 -6.206,15.581 -6.323,21.082 -0.168,7.817 4.568,23.148 7.695,30.315 0.755,1.73 4.103,6.341 4.103,6.341 0,0 -4.654,-24.542 -5.347,-32.829 -0.518,-6.205 -0.128,-24.909 -0.128,-24.909 m -7.195,-114.809 c -0.334,3.363 1.912,13.387 1.912,13.387 l 3.825,-29.643 c 0,0 -5.313,11.967 -5.737,16.256 m -20.082,53.549 c -1.394,3.571 -0.956,15.301 -0.956,15.301 l 13.388,-30.6 c 0,0 -10.639,10.71 -12.432,15.299 m -6.03,106.795 c 0,0 -0.315,35.831 4.637,46.379 4.531,9.647 29.936,30.356 29.936,30.356 0,0 -17.824,-22.47 -21.503,-31.2 -5.089,-12.077 -10.119,-51.437 -10.119,-51.437 l -2.951,5.902 z M 50.121,205.01 c 3.335,-9.155 1.168,-38.956 1.168,-38.956 0,0 -5.451,29.987 -9.221,39.366 -4.214,10.487 -23.014,38.907 -23.014,38.907 0,0 26.78,-27.546 31.067,-39.317 M 54.506,95.624 c 0,0 6.884,-18.586 5.738,-24.861 -0.773,-4.241 -9.562,-14.345 -9.562,-14.345 0,0 2.414,12.874 2.868,17.212 0.573,5.474 0.956,21.994 0.956,21.994 M 19.125,-13.389 c 0,0 9.656,22.183 11.062,30.068 1.235,6.941 0,28.203 0,28.203 0,0 8.477,-22.819 7.106,-30.538 C 35.845,6.183 19.125,-13.389 19.125,-13.389 m 441.487,-40.965 c -3.249,8.935 -6.587,17.23 -10.01,24.928 l -1.862,28.873 -8.857,-4.876 -25.862,49.457 -4.828,-10.34 c -32.69,31.48 -70.457,34.284 -111.982,31.646 -65.568,-4.163 -91.587,-41.63 -79.098,-57.241 12.49,-15.613 18.733,-5.205 40.589,5.203 21.858,10.407 74.937,26.017 110.323,-2.082 35.386,-28.1 86.383,-109.281 50.997,-169.646 -35.386,-60.365 -105.626,-105.385 -182.135,-88.465 -86.422,19.112 -126.078,60.082 -177.675,74.811 -8.311,1.334 -18.347,2.789 -24.791,3.191 -12.671,0.792 -21.6,14.727 -21.6,14.727 l 17.181,-9.327 25.763,-2.36 c 2.331,14 9.395,49.054 9.395,49.054 l -8.688,87.29 -18.668,-27.06 -7.246,10.184 -21.349,-22.915 -15.473,-1.959 14.67,6.596 21.38,29.409 6.7,-13.754 19.485,24.691 0.004,-0.011 16.47,9.525 -3.123,68.69 10.407,-10.407 -4.163,40.59 22.173,71.502 -34.662,91.899 16.652,-4.162 -19.773,35.386 -40.591,38.509 9.368,17.693 -93.671,9.368 -20.229,-7.165 -18.437,38.292 13.22,8.813 -69.039,14.69 2.938,19.095 -80.791,-23.303 -26.147,-19.191 -116.339,0 8.814,-10.188 -42.501,-40.641 -8.911,-78.491 7.344,-1.494 8.814,-45.548 23.502,-24.978 19.096,45.533 -14.689,-4.409 41.13,48.474 30.848,26.44 -14.69,-1.469 19.096,16.158 105.763,2.938 72.917,15.799 -41.623,-14.742 -30.181,-7.285 -104.079,-1.043 1.04,-11.449 -64.526,-61.403 14.571,2.081 -27.844,-63.28 c -15.017,-13.719 -28.06,-55.016 -36.687,-75.145 -9.367,-21.856 -20.816,-39.55 -20.816,-39.55 0,0 -30.182,-6.244 -61.405,-18.734 -31.224,-12.489 -43.713,4.163 -43.713,4.163 l -3.122,-8.326 c 0,0 -18.28,-9.057 -39.303,-11.825 -16.43,-2.162 -9.967,-20.946 -9.613,-26.684 0.405,-6.57 4.294,-19.774 8.325,-24.978 3.227,-4.165 12.525,-10.425 17.694,-11.448 12.039,-2.385 28.101,5.204 45.794,17.693 74.936,-6.245 103.241,-10.321 126.974,8.326 14.572,11.448 29.142,22.897 41.631,40.59 l -15.611,42.671 -8.327,-14.569 -5.807,44.931 1.841,17.863 5.547,-51.234 7.789,9.257 35.387,-70.772 11.448,4.164 c 0,0 13.515,-18.583 23.057,-32.881 l -26.02,25.006 -10.224,-5.964 -11.076,22.152 c 0,0 -13.383,-2.353 -24.727,-18.027 -15.862,-21.915 -23.503,-24.678 -17.627,-78.735 5.876,-54.055 16.452,-54.055 64.632,-121.039 11.752,-16.452 14.601,-18.465 14.601,-18.465 l -51.03,-27.365 -22.327,-5.876 -21.384,-11.28 c 0,0 4.744,-8.174 7.495,-9.369 4.739,-2.062 20.613,1.56 20.613,1.56 0,0 15.603,-6.763 36.756,-6.763 21.152,0 32.903,8.225 47.005,8.225 14.101,0 38.78,-8.225 57.582,-5.876 18.802,2.351 22.328,12.927 22.328,12.927 l -51.706,54.057 -4.675,47.096 -56.605,75.769 -3.038,9.437 65.791,-82.24 5.107,-46.75 55.161,-61.405 37.468,-8.325 c 0,0 -0.257,1.226 -0.625,3.114 -6.146,15.664 -6.986,34.894 -1.999,54.214 6.975,27.012 38.85,36.596 64.029,36.596 12.506,0 24.179,-2.312 32.025,-6.341 12.912,-6.63 21.851,-15.076 27.029,-20.917 3.673,4.516 7.133,7.194 11.833,11.11 0,0 12.143,-11.751 45.047,-14.101 27.14,-1.939 45.048,-8.226 70.901,-19.585 53.676,-23.584 102.5,-61.785 207.618,-45.132 105.119,16.651 206.073,113.444 164.442,227.929"
-         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path3269"
-         inkscape:connector-curvature="0" /></g><path
-       inkscape:connector-curvature="0"
-       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
-       d="m 329.26398,723.3082 -118.025,-19.2 -120.800003,-28.175 72.600003,-281.65 115.075,7.875 95.275,50.65 -44.125,270.5 z m -6.55,-10.575 40.675,-252.4 -87.85,-47.275 -106.125,-7.325 -66.95,262.8 111.4,26.275 108.85,17.925 z"
-       id="path3253-3" /></g></svg>
\ No newline at end of file
diff --git a/doc/compress.html b/doc/compress.html
index e2d79f58..91a76b25 100644
--- a/doc/compress.html
+++ b/doc/compress.html
@@ -1,23 +1,26 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Compression Helper</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-  </head>
-  <body>
 
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
+<title>CodeMirror: Compression Helper</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
 
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Script compression
-   helper */
-</pre>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Compression helper</a>
+  </ul>
 </div>
 
+<article>
+
+<h2>Script compression helper</h2>
+
     <p>To optimize loading CodeMirror, especially when including a
     bunch of different modes, it is recommended that you combine and
     minify (and preferably also gzip) the scripts. This page makes
@@ -28,7 +31,7 @@
 
     <form id="form" action="http://marijnhaverbeke.nl/uglifyjs" method="post">
       <input type="hidden" id="download" name="download" value="codemirror-compressed.js"/>
-      <p>Version: <select id="version" onchange="setVersion(this);" style="padding: 1px">
+      <p>Version: <select id="version" onchange="setVersion(this);" style="padding: 1px;">
         <option value="http://codemirror.net/">HEAD</option>
         <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=3.15.0;f=">3.15</option>
         <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=3.14.0;f=">3.14</option>
@@ -210,5 +213,4 @@
        }
     </script>
 
-  </body>
-</html>
+</article>
diff --git a/doc/docs.css b/doc/docs.css
index 170cd412..9cd7319f 100644
--- a/doc/docs.css
+++ b/doc/docs.css
@@ -1,167 +1,213 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
+}
+
+body, html { margin: 0; padding: 0; height: 100%; }
+section, article { display: block; padding: 0; }
+
 body {
-  font-family: Droid Sans, Arial, sans-serif;
-  line-height: 1.5;
-  max-width: 64.3em;
-  margin: 3em auto;
-  padding: 0 1em;
+  background: #f8f8f8;
 }
 
-h1 {
-  letter-spacing: -3px;
-  font-size: 3.23em;
-  font-weight: bold;
-  margin: 0;
+article {
+  max-width: 700px;
+  margin: 0 auto;
+  border-left: 2px solid #E30808;
+  border-right: 1px solid #ddd;
+  padding: 30px 50px 100px 50px;
+  background: white;
+  z-index: 2;
+  position: relative;
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
-h2 {
-  font-size: 1.23em;
-  font-weight: bold;
-  margin: .5em 0;
-  letter-spacing: -1px;
+body {
+  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+  line-height: 1.5;
 }
 
-h3 {
-  font-size: 1.1em;
-  font-weight: bold;
-  margin: .4em 0;
+p { margin-top: 0; }
+
+h2, h3 {
+  font-weight: normal;
+  text-decoration: underline;
+  margin-bottom: .7em;
 }
+h2 { font-size: 120%; }
+h3 { font-size: 110%; }
+article > h2:first-child, section:first-child > h2 { margin-top: 0; }
 
-pre {
-  background-color: #eee;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  padding: 1em;
+a, a:visited, a:link, .quasilink {
+  color: #A21313;
+  text-decoration: none;
 }
 
-pre.code {
-  margin: 0 1em;
+.quasilink {
+  cursor: pointer;
 }
 
-.grey {
-  background-color: #eee;
-  border-radius: 6px;
-  margin-bottom: 1.65em;
-  margin-top: 0.825em;
-  padding: 0.825em 1.65em;
-  position: relative;
+#nav {
+  position: fixed;
+  top: 30px;
+  right: 50%;
+  padding-right: 350px;
+  text-align: right;
+  z-index: 1;
 }
 
-img.logo {
-  position: absolute;
-  right: -1em;
-  bottom: 4px;
-  max-width: 23.6875em; /* Scale image down with text to prevent clipping */
+#nav ul {
+  display: block;
+  margin: 0; padding: 0;
+  margin-bottom: 32px;
 }
 
-.grey > pre {
-  background:none;
-  border-radius:0;
-  padding:0;
-  margin:0;
-  font-size:2.2em;
-  line-height:1.2em;
+#nav li {
+  display: block;
+  margin-bottom: 4px;
 }
 
-a:link, a:visited, .quasilink {
-  color: #df0019;
-  cursor: pointer;
-  text-decoration: none;
+#nav li ul {
+  font-size: 80%;
+  margin-bottom: 0;
+  display: none;
+}
+
+#nav li.active ul {
+  display: block;
 }
 
-a:hover, .quasilink:hover {
-  color: #800004;
+#nav li li a {
+  padding-right: 20px;
 }
 
-h1 a:link, h1 a:visited, h1 a:hover {
+#nav ul a {
   color: black;
+  padding: 0 7px 1px 11px;
 }
 
-ul {
-  margin: 0;
-  padding-left: 1.2em;
+#nav ul a.active, #nav ul a:hover {
+  border-bottom: 1px solid #E30808;
+  color: #E30808;
 }
 
-a.download {
-  color: white;
-  background-color: #df0019;
-  width: 100%;
-  display: block;
-  text-align: center;
-  font-size: 1.23em;
-  font-weight: bold;
-  text-decoration: none;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  padding: .5em 0;
-  margin-bottom: 1em;
+#logo {
+  margin-right: 7px;
+  margin-bottom: 25px;
 }
 
-a.download:hover {
-  background-color: #bb0010;
+section {
+  border-top: 1px solid #E30808;
+  margin: 1.5em 0;
 }
 
-.rel {
-  margin-bottom: 0;
+section.first {
+  border: none;
+  margin-top: 0;
 }
 
-.rel-note {
-  color: #777;
-  font-size: .9em;
-  margin-top: .1em;
+#demo {
+  position: relative;
+}
+
+#demolist {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 25;
+}
+
+#bankinfo {
+  text-align: left;
+  display: none;
+  padding: 0 .5em;
+  position: absolute;
+  border: 2px solid #aaa;
+  border-radius: 5px;
+  background: #eee;
+  top: 10px;
+  left: 30px;
+}
+
+#bankinfo_close {
+  position: absolute;
+  top: 0; right: 6px;
+  font-weight: bold;
+  cursor: pointer;
 }
 
-.logo-braces {
-  color: #df0019;
+.bigbutton {
+  cursor: pointer;
+  text-align: center;
+  padding: 0 1em;
+  display: inline-block;
+  color: white;
   position: relative;
-  top: -4px;
+  line-height: 1.9;
+  color: white !important;
+  background: #A21313;
 }
 
-.blk {
-  float: left;
+.bigbutton.right {
+  border-bottom-left-radius: 100px;
+  border-top-left-radius: 100px;
 }
 
-.left {
-  margin-right: 20.68em;
-  max-width: 37em;
-  padding-right: 6.53em;
-  padding-bottom: 1em;
+.bigbutton.left {
+  border-bottom-right-radius: 100px;
+  border-top-right-radius: 100px;
 }
 
-.left1 {
-  width: 15.24em;
-  padding-right: 6.45em;
+.bigbutton:hover {
+  background: #E30808;
 }
 
-.left2 {
-  max-width: 15.24em;
+th {
+  text-decoration: underline;
+  font-weight: normal;
+  text-align: left;
 }
 
-.right {
-  width: 20.68em;
-  margin-left: -20.68em;
+#features ul {
+  list-style: none;
+  margin: 0 0 1em;
+  padding: 0 0 0 1.2em;
 }
 
-.leftbig {
-  width: 42.44em;
-  padding-right: 6.53em;
+#features li:before {
+  content: "-";
+  width: 1em;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  margin-left: -1em;
 }
 
-.rightsmall {
-  width: 15.24em;
+.rel {
+  margin-bottom: 0;
+}
+.rel-note {
+  margin-top: 0;
+  color: #555;
 }
 
-.clear:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-.clear { display: inline-block; }
-/* start commented backslash hack \*/
-* html .clear { height: 1%; }
-.clear { display: block; }
-/* close commented backslash hack */
+pre {
+  padding-left: 15px;
+  border-left: 2px solid #ddd;
+}
+
+code {
+  padding: 0 2px;
+}
+
+strong {
+  text-decoration: underline;
+  font-weight: normal;
+}
+
+.field {
+  border: 1px solid #A21313;
+}
diff --git a/doc/internals.html b/doc/internals.html
index 4336ba4d..3f1b7de8 100644
--- a/doc/internals.html
+++ b/doc/internals.html
@@ -1,25 +1,35 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Internals</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-    <style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* (Re-) Implementing A Syntax-
-   Highlighting Editor in JavaScript */
-</pre>
+
+<title>CodeMirror: Internals</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
+<style>dl dl {margin: 0;} .update {color: #d40 !important}</style>
+<script src="activebookmark.js"></script>
+
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a href="#top">Introduction</a></li>
+    <li><a href="#approach">General Approach</a></li>
+    <li><a href="#input">Input</a></li>
+    <li><a href="#selection">Selection</a></li>
+    <li><a href="#update">Intelligent Updating</a></li>
+    <li><a href="#parse">Parsing</a></li>
+    <li><a href="#summary">What Gives?</a></li>
+    <li><a href="#btree">Content Representation</a></li>
+    <li><a href="#keymap">Key Maps</a></li>
+  </ul>
 </div>
 
-<div class="clear"><div class="leftbig blk">
+<article>
+
+<h2 id=top>(Re-) Implementing A Syntax-Highlighting Editor in JavaScript</h2>
 
 <p style="font-size: 85%" id="intro">
   <strong>Topic:</strong> JavaScript, code editor implementation<br>
@@ -103,7 +113,8 @@ also kept breaking in newly released versions, requiring me to come up
 with <em>new</em> scary hacks in order to keep up. This was starting
 to lose its appeal.</p>
 
-<h2 id="approach">General Approach</h2>
+<section id=approach>
+  <h2>General Approach</h2>
 
 <p>What CodeMirror 2 does is try to sidestep most of the hairy hacks
 that came up in version 1. I owe a lot to the
@@ -136,8 +147,9 @@ ensure that the visible part of the document has been added, and can
 do the rest only when needed. (Fortunately, the <code>onscroll</code>
 event works almost the same on all browsers, and lends itself well to
 displaying things only as they are scrolled into view.)</p>
-
-<h2 id="input">Input</h2>
+</section>
+<section id="input">
+  <h2>Input</h2>
 
 <p>ACE uses its hidden textarea only as a text input shim, and does
 all cursor movement and things like text deletion itself by directly
@@ -165,8 +177,9 @@ href="#keymap">[no longer the case]</a></p>
 <p>Of course, since only a small part of the document sits in the
 textarea, keys like page up and ctrl-end won't do the right thing.
 CodeMirror is catching those events and handling them itself.</p>
-
-<h2 id="selection">Selection</h2>
+</section>
+<section id="selection">
+  <h2>Selection</h2>
 
 <p>Getting and setting the selection range of a textarea in modern
 browsers is trivial—you just use the <code>selectionStart</code>
@@ -213,8 +226,9 @@ pressing a certain key had (only) the effect of moving the cursor.
 This, of course, doesn't work if the first time the key is used was
 for extending an inverted selection, but it works most of the
 time.</p>
-
-<h2 id="update">Intelligent Updating</h2>
+</section>
+<section id="update">
+  <h2>Intelligent Updating</h2>
 
 <p>One thing that always comes up when you have a complicated internal
 state that's reflected in some user-visible external representation
@@ -274,8 +288,9 @@ selection info for that line into a snippet of HTML. The patch updater
 uses this to reset individual lines, the refresh updater builds an
 HTML chunk for the whole visible document at once, and then uses a
 single <code>innerHTML</code> update to do the refresh.</p>
-
-<h2 id="parse">Parsers can be Simple</h2>
+</section>
+<section id="parse">
+  <h2>Parsers can be Simple</h2>
 
 <p>When I wrote CodeMirror 1, I
 thought <a href="http://codemirror.net/story.html#parser">interruptable
@@ -315,8 +330,9 @@ finishes the whole document in a single 100-millisecond time slice—it
 manages some 1500 lines during that time on Chrome. All it has to do
 is munge strings, so there is no real reason for it to be slow
 anymore.</p>
-
-<h2 id="summary">What Gives?</h2>
+</section>
+<section id="summary">
+  <h2>What Gives?</h2>
 
 <p>Given all this, what can you expect from CodeMirror 2?</p>
 
@@ -368,8 +384,9 @@ some changes to the codebase that cause some of the text above to no
 longer be current. I've left the text intact, but added markers at the
 passages that are now inaccurate. The new situation is described
 below.</p>
-
-<h2 id="btree">Content Representation</h2>
+</section>
+<section id="btree">
+  <h2>Content Representation</h2>
 
 <p>The original implementation of CodeMirror 2 represented the
 document as a flat array of line objects. This worked well—splicing
@@ -419,8 +436,9 @@ below a given number. This means that there are some weird editing
 patterns that may result in a seriously unbalanced tree, but even such
 an unbalanced tree will perform well, unless you spend a day making
 strangely repeating edits to a really big document.</p>
-
-<h2 id="keymap">Keymaps</h2>
+</section>
+<section id="keymap">
+  <h2>Keymaps</h2>
 
 <p><a href="#approach">Above</a>, I claimed that directly catching key
 events for things like cursor movement is impractical because it
@@ -482,24 +500,4 @@ composing is finished, but many don't fire anything when the character
 is updated <em>during</em> composition. So we poll, whenever the
 editor is focused, to provide immediate updates of the display.</p>
 
-</div><div class="rightsmall blk">
-
-    <h2>Contents</h2>
-
-    <ul>
-      <li><a href="#intro">Introduction</a></li>
-      <li><a href="#approach">General Approach</a></li>
-      <li><a href="#input">Input</a></li>
-      <li><a href="#selection">Selection</a></li>
-      <li><a href="#update">Intelligent Updating</a></li>
-      <li><a href="#parse">Parsing</a></li>
-      <li><a href="#summary">What Gives?</a></li>
-      <li><a href="#btree">Content Representation</a></li>
-      <li><a href="#keymap">Key Maps</a></li>
-    </ul>
-
-</div></div>
-
-<div style="height: 2em">&nbsp;</div>
-
-</body></html>
+</article>
diff --git a/doc/logo.png b/doc/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..2334f5e0999358985862f477ce812805dd66d08d
GIT binary patch
literal 12003
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

literal 0
HcmV?d00001

diff --git a/doc/logo.svg b/doc/logo.svg
new file mode 100644
index 00000000..9783869c
--- /dev/null
+++ b/doc/logo.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   inkscape:export-filename="/home/marijn/src/js/codemirror/doc/logo.png"
+   inkscape:export-xdpi="27.450405"
+   inkscape:export-ydpi="27.450405"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs4">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4138">
+      <path
+         transform="matrix(1.05,0,0,1,-290.76164,27.927128)"
+         d="m 705.08647,231.61324 a 70.710678,104.55079 0 1 1 -141.42135,0 70.710678,104.55079 0 1 1 141.42135,0 z"
+         sodipodi:ry="104.55079"
+         sodipodi:rx="70.710678"
+         sodipodi:cy="231.61324"
+         sodipodi:cx="634.37579"
+         id="path4140"
+         style="fill:#ffffff;fill-opacity:1;stroke:none"
+         sodipodi:type="arc" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="291.72812"
+     inkscape:cy="789.2497"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="875"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <text
+       xml:space="preserve"
+       style="font-size:15px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#a21313;fill-opacity:1;stroke:none;font-family:Ubuntu Mono;-inkscape-font-specification:Ubuntu Mono"
+       x="247.48738"
+       y="163.42795"
+       id="text4006"
+       sodipodi:linespacing="125%"
+       clip-path="url(#clipPath4138)"
+       transform="translate(0.50507287,0.50507595)"><tspan
+         sodipodi:role="line"
+         id="tspan4008"
+         x="247.48738"
+         y="163.42795">    if (unit == &quot;char&quot;) moveOnce();</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="182.17795"
+         id="tspan4010">    else if (unit == &quot;column&quot;) moveOnce(true);</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="200.92795"
+         id="tspan4012">    else if (unit == &quot;word&quot; || unit == &quot;group&quot;) {</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="219.67795"
+         id="tspan4014">      var sawType = null, group = unit == &quot;group&quot;;</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="238.42795"
+         id="tspan4016">      for (var first = true;; first = false) {</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="257.17795"
+         id="tspan4018">        if (dir &lt; 0 &amp;&amp; !moveOnce(!first)) break;</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="275.92795"
+         id="tspan4020">        var cur = lineObj.text.charAt(ch) || &quot;\n&quot;;</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="294.67795"
+         id="tspan4022">        var type = isWordChar(cur) ? &quot;w&quot;</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="313.42795"
+         id="tspan4024">          : !group ? null</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="332.17795"
+         id="tspan4026">          : /\s/.test(cur) ? null</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="350.92795"
+         id="tspan4028">          : &quot;p&quot;; // punctuation</tspan><tspan
+         sodipodi:role="line"
+         x="247.48738"
+         y="369.67795"
+         id="tspan4046">        if (sawType &amp;&amp; sawType</tspan></text>
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 374.84375 136.8125 C 371.96854 136.71001 368.64305 137.97919 365.15625 142.03125 C 361.97051 140.84608 359.22347 140.35622 356.84375 140.375 C 346.53162 140.4564 343.3125 149.71875 343.3125 149.71875 C 326.2234 146.67934 325.625 162.59375 325.625 162.59375 C 309.43195 163.37101 312.4375 177.375 312.4375 177.375 C 295.67899 180.15651 301.1875 194 301.1875 194 C 284.10838 199.04575 293.4375 212.46875 293.4375 212.46875 C 293.4375 212.46875 277.68174 220.31271 288.1875 232.25 C 288.1875 232.25 273.81776 243.63282 285.90625 253.34375 C 285.90625 253.34375 271.57897 263.97487 286.40625 275.03125 C 286.40625 275.03125 273.84147 285.48036 289.96875 295.3125 C 289.96875 295.3125 278.92374 306.07108 295.59375 314.65625 C 295.59375 314.65625 287.70844 329.01862 305.96875 335.125 C 305.96875 335.125 300.47495 348.88874 319.09375 351.46875 C 319.09375 351.46875 315.90162 357.19564 321.59375 361.15625 C 321.59375 361.15625 310.04416 364.78661 312.5625 374.40625 C 313.83361 379.26171 316.82684 380.49158 323.53125 380.1875 C 323.53125 380.1875 329.096 395.54812 350.46875 398.96875 L 353.125 402.59375 C 353.125 402.59375 342.80592 409.64088 359.125 421.5 C 359.125 421.5 354.16126 425.74314 363.28125 433.34375 C 363.28125 433.34375 357.54117 438.3362 365.75 442.625 C 365.75 442.625 361.35822 445.96166 366.09375 448.125 C 366.09375 448.125 370.88293 490.18262 355.40625 534.4375 C 355.40625 534.4375 341.28721 542.04782 350.1875 556.96875 C 350.1875 556.96875 331.59675 562.24093 345.09375 575.53125 C 345.09375 575.53125 342.0547 585.56155 349.375 585.78125 C 349.375 585.78125 346.16048 592.54552 354.4375 594.5625 C 354.4375 594.5625 353.17883 603.88113 364.09375 602.1875 C 369.44813 608.40994 378.92733 608.70518 385.21875 602.34375 C 396.13361 604.03738 394.875 594.71875 394.875 594.71875 C 403.15197 592.70177 399.9375 585.9375 399.9375 585.9375 C 407.25781 585.7178 404.21875 575.6875 404.21875 575.6875 C 417.71573 562.39718 399.125 557.09375 399.125 557.09375 C 408.0253 542.17282 393.90625 534.5625 393.90625 534.5625 C 378.42953 490.30762 383.21875 448.28125 383.21875 448.28125 C 387.95421 446.11791 383.5625 442.78125 383.5625 442.78125 C 391.77129 438.49245 386.03125 433.5 386.03125 433.5 C 395.15125 425.89939 390.1875 421.65625 390.1875 421.65625 C 406.5066 409.79713 396.1875 402.75 396.1875 402.75 L 398.84375 399.125 C 420.21649 395.70437 425.78125 380.34375 425.78125 380.34375 C 432.48566 380.64783 435.47889 379.41796 436.75 374.5625 C 439.26834 364.94286 427.75 361.3125 427.75 361.3125 C 433.44213 357.35188 430.21875 351.59375 430.21875 351.59375 C 448.83755 349.01373 443.34375 335.28125 443.34375 335.28125 C 461.60406 329.17487 453.71875 314.78125 453.71875 314.78125 C 470.38876 306.19608 459.34375 295.46875 459.34375 295.46875 C 475.47103 285.63661 462.90625 275.1875 462.90625 275.1875 C 477.73353 264.13112 463.40625 253.5 463.40625 253.5 C 475.49474 243.78907 461.15625 232.375 461.15625 232.375 C 471.66201 220.43771 455.875 212.625 455.875 212.625 C 455.875 212.625 465.20411 199.202 448.125 194.15625 C 448.125 194.15625 453.66476 180.31276 436.90625 177.53125 C 436.90625 177.53125 439.88054 163.52726 423.6875 162.75 C 423.6875 162.75 423.0891 146.8356 406 149.875 C 406 149.875 401.14687 135.83532 384.15625 142.15625 C 384.15625 142.15625 380.33279 137.00815 374.84375 136.8125 z M 375.34375 155 C 416.3488 155 449.59375 201.78944 449.59375 259.53125 C 449.59375 317.27306 416.3488 364.09375 375.34375 364.09375 C 334.3387 364.09375 301.09375 317.27306 301.09375 259.53125 C 301.09375 201.78944 334.3387 155 375.34375 155 z "
+       id="rect3058" />
+    <text
+       sodipodi:linespacing="125%"
+       id="text4207"
+       y="491.91403"
+       x="149.69542"
+       style="font-size:95px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#a21313;fill-opacity:1;stroke:none;font-family:Source Sans;-inkscape-font-specification:Source Sans"
+       xml:space="preserve"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"><tspan
+         y="491.91403"
+         x="149.69542"
+         id="tspan4209"
+         sodipodi:role="line">Code  Mirror</tspan></text>
+  </g>
+</svg>
diff --git a/doc/manual.html b/doc/manual.html
index 53228516..37230f54 100644
--- a/doc/manual.html
+++ b/doc/manual.html
@@ -1,38 +1,63 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: User Manual</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold">
-    <link rel="stylesheet" type="text/css" href="docs.css">
-    <style>dl dl {margin: 0;}</style>
-    <script src="../lib/codemirror.js"></script>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../addon/runmode/runmode.js"></script>
-    <script src="../addon/runmode/colorize.js"></script>
-    <script src="../mode/javascript/javascript.js"></script>
-    <script src="../mode/xml/xml.js"></script>
-    <script src="../mode/css/css.js"></script>
-    <script src="../mode/htmlmixed/htmlmixed.js"></script>
-    <style>
-      dt { text-indent: -1.5em; padding-left: 1.5em; }
-    </style>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo">
-<pre>
-/* User manual and
-   reference guide */
-</pre>
+
+<title>CodeMirror: User Manual</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
+<script src="activebookmark.js"></script>
+
+<script src="../lib/codemirror.js"></script>
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../addon/runmode/runmode.js"></script>
+<script src="../addon/runmode/colorize.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../mode/css/css.js"></script>
+<script src="../mode/htmlmixed/htmlmixed.js"></script>
+<style>
+  dt { text-indent: -2em; padding-left: 2em; }
+  dd { margin-left: 1.5em; }
+  dl dl {margin: 0;}
+</style>
+
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="#overview" class=active data-default="true">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a href="#usage">Basic Usage</a></li>
+    <li><a href="#config">Configuration</a></li>
+    <li><a href="#events">Events</a></li>
+    <li><a href="#keymaps">Keymaps</a></li>
+    <li><a href="#styling">Customized Styling</a></li>
+    <li><a href="#api">Programming API</a>
+      <ul>
+        <li><a href="#api_constructor">Constructor</a></li>
+        <li><a href="#api_content">Content manipulation</a></li>
+        <li><a href="#api_selection">Selection</a></li>
+        <li><a href="#api_configuration">Configuration</a></li>
+        <li><a href="#api_doc">Document management</a></li>
+        <li><a href="#api_history">History</a></li>
+        <li><a href="#api_marker">Text-marking</a></li>
+        <li><a href="#api_decoration">Widget, gutter, and decoration</a></li>
+        <li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li>
+        <li><a href="#api_mode">Mode, state, and tokens</a></li>
+        <li><a href="#api_misc">Miscellaneous methods</a></li>
+        <li><a href="#api_static">Static properties</a></li>
+      </ul>
+    </li>
+    <li><a href="#addons">Addons</a></li>
+    <li><a href="#modeapi">Writing CodeMirror Modes</a></li>
+  </ul>
 </div>
 
-<div class="clear"><div class="leftbig blk">
+<article>
 
-    <h2 id="overview">Overview</h2>
+<section class=first id=overview>
+    <h2>User manual and reference guide</h2>
 
     <p>CodeMirror is a code-editor component that can be embedded in
     Web pages. The core library provides <em>only</em> the editor
@@ -50,8 +75,10 @@
     of modes (see the <a href="../mode/"><code>mode/</code></a>
     directory), and it isn't hard to <a href="#modeapi">write new
     ones</a> for other languages.</p>
+</section>
 
-    <h2 id="usage">Basic Usage</h2>
+<section id=usage>
+    <h2>Basic Usage</h2>
 
     <p>The easiest way to use CodeMirror is to simply load the script
     and style sheet found under <code>lib/</code> in the distribution,
@@ -107,7 +134,9 @@
     of a form) is submitted. See the <a href="#fromTextArea">API
     reference</a> for a full description of this method.</p>
 
-    <h2 id="config">Configuration</h2>
+</section>
+<section id=config>
+    <h2>Configuration</h2>
 
     <p>Both the <a href="#CodeMirror"><code>CodeMirror</code></a>
     function and its <code>fromTextArea</code> method take as second
@@ -372,8 +401,10 @@
       This <em>will</em> have bad effects on performance of big
       documents.</dd>
     </dl>
+</section>
 
-    <h2 id="events">Events</h2>
+<section id=events>
+    <h2>Events</h2>
 
     <p>Various CodeMirror-related objects emit events, which allow
     client code to react to various situations. Handlers for such
@@ -589,8 +620,10 @@
       or the line the widget is on require the widget to be
       redrawn.</dd>
     </dl>
+</section>
 
-    <h2 id="keymaps">Keymaps</h2>
+<section id=keymaps>
+    <h2>Keymaps</h2>
 
     <p>Keymaps are ways to associate keys with functionality. A keymap
     is an object mapping strings that identify the keys to functions
@@ -661,8 +694,10 @@
     to <code>true</code>, the default effect of inserting a character
     will be suppressed when the keymap is active as the top-level
     map.</p>
+</section>
 
-    <h2 id="styling">Customized Styling</h2>
+<section id=styling>
+    <h2>Customized Styling</h2>
 
     <p>Up to a certain extent, CodeMirror's look can be changed by
     modifying style sheet files. The style sheets supplied by modes
@@ -740,8 +775,10 @@
     <p>Themes are also simply CSS files, which define colors for
     various syntactic elements. See the files in
     the <a href="../theme/"><code>theme</code></a> directory.</p>
+</section>
 
-    <h2 id="api">Programming API</h2>
+<section id=api>
+    <h2>Programming API</h2>
 
     <p>A lot of CodeMirror features are only available through its
     API. Thus, you need to write code (or
@@ -1620,8 +1657,10 @@
       returned position will be the end of the changed
       range, <em>after</em> the change is applied.</dd>
     </dl>
+</section>
 
-    <h2 id="addons">Addons</h2>
+<section id=addons>
+    <h2>Addons</h2>
 
     <p>The <code>addon</code> directory in the distribution contains a
     number of reusable components that implement extra editor
@@ -2088,8 +2127,10 @@
       will highlight changes between the editable document and the
       original(s) (<a href="../demo/merge.html">demo</a>).</dd>
     </dl>
+</section>
 
-    <h2 id="modeapi">Writing CodeMirror Modes</h2>
+<section id=modeapi>
+    <h2>Writing CodeMirror Modes</h2>
 
     <p>Modes typically consist of a single JavaScript file. This file
     defines, in the simplest case, a lexer (tokenizer) for your
@@ -2318,43 +2359,8 @@
     specifies the properties that should be added. This is mostly
     useful to add utilities that can later be looked
     up through <a href="#getMode"><code>getMode</code></a>.</p>
+</section>
 
-</div><div class="rightsmall blk">
-
-    <h2>Contents</h2>
-
-    <ul>
-      <li><a href="#overview">Overview</a></li>
-      <li><a href="#usage">Basic Usage</a></li>
-      <li><a href="#config">Configuration</a></li>
-      <li><a href="#events">Events</a></li>
-      <li><a href="#keymaps">Keymaps</a></li>
-      <li><a href="#styling">Customized Styling</a></li>
-      <li><a href="#api">Programming API</a>
-        <ul>
-          <li><a href="#constructor">Constructor</a></li>
-          <li><a href="#api_content">Content manipulation</a></li>
-          <li><a href="#api_selection">Selection</a></li>
-          <li><a href="#api_configuration">Configuration</a></li>
-          <li><a href="#api_doc">Document management</a></li>
-          <li><a href="#api_history">History</a></li>
-          <li><a href="#api_marker">Text-marking</a></li>
-          <li><a href="#api_decoration">Widget, gutter, and decoration</a></li>
-          <li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li>
-          <li><a href="#api_mode">Mode, state, and tokens</a></li>
-          <li><a href="#api_misc">Miscellaneous methods</a></li>
-          <li><a href="#api_static">Static properties</a></li>
-        </ul>
-      </li>
-      <li><a href="#addons">Addons</a></li>
-      <li><a href="#modeapi">Writing CodeMirror Modes</a></li>
-    </ul>
-
-</div></div>
-
-<div style="height: 2em">&nbsp;</div>
+</article>
 
 <script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
-
-  </body>
-</html>
diff --git a/doc/modes.html b/doc/modes.html
deleted file mode 100644
index 82738f19..00000000
--- a/doc/modes.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Mode list</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Full list of
-   modes */
-</pre>
-</div>
-
-<p>Every mode in the distribution. The list on the front-page leaves
-out some of the more obscure ones.</p>
-
-<div style="-webkit-columns: 50px 3; -moz-columns: 50px 3; columns: 50px 3;">
-    <ul>
-      <li><a href="../mode/apl/index.html">APL</a></li>
-      <li><a href="../mode/asterisk/index.html">Asterisk dialplan</a></li>
-      <li><a href="../mode/clike/index.html">C, C++, C#</a></li>
-      <li><a href="../mode/clojure/index.html">Clojure</a></li>
-      <li><a href="../mode/cobol/index.html">COBOL</a></li>
-      <li><a href="../mode/coffeescript/index.html">CoffeeScript</a></li>
-      <li><a href="../mode/commonlisp/index.html">Common Lisp</a></li>
-      <li><a href="../mode/css/index.html">CSS</a></li>
-      <li><a href="../mode/python/index.html">Cython</a></li>
-      <li><a href="../mode/d/index.html">D</a></li>
-      <li><a href="../mode/diff/index.html">diff</a></li>
-      <li><a href="../mode/ecl/index.html">ECL</a></li>
-      <li><a href="../mode/erlang/index.html">Erlang</a></li>
-      <li><a href="../mode/gas/index.html">Gas</a> (AT&amp;T-style assembly)</li>
-      <li><a href="../mode/go/index.html">Go</a></li>
-      <li><a href="../mode/groovy/index.html">Groovy</a></li>
-      <li><a href="../mode/haml/index.html">HAML</a></li>
-      <li><a href="../mode/haskell/index.html">Haskell</a></li>
-      <li><a href="../mode/haxe/index.html">Haxe</a></li>
-      <li><a href="../mode/htmlembedded/index.html">HTML embedded scripts</a></li>
-      <li><a href="../mode/htmlmixed/index.html">HTML mixed-mode</a></li>
-      <li><a href="../mode/http/index.html">HTTP</a></li>
-      <li><a href="../mode/clike/index.html">Java</a></li>
-      <li><a href="../mode/jade/index.html">Jade</a></li>
-      <li><a href="../mode/javascript/index.html">JavaScript</a></li>
-      <li><a href="../mode/jinja2/index.html">Jinja2</a></li>
-      <li><a href="../mode/less/index.html">LESS</a></li>
-      <li><a href="../mode/livescript/index.html">LiveScript</a></li>
-      <li><a href="../mode/lua/index.html">Lua</a></li>
-      <li><a href="../mode/markdown/index.html">Markdown</a> (<a href="../mode/gfm/index.html">GitHub-flavour</a>)</li>
-      <li><a href="../mode/mirc/index.html">mIRC</a></li>
-      <li><a href="../mode/nginx/index.html">Nginx</a></li>
-      <li><a href="../mode/ntriples/index.html">NTriples</a></li>
-      <li><a href="../mode/ocaml/index.html">OCaml</a></li>
-      <li><a href="../mode/pascal/index.html">Pascal</a></li>
-      <li><a href="../mode/perl/index.html">Perl</a></li>
-      <li><a href="../mode/php/index.html">PHP</a></li>
-      <li><a href="../mode/pig/index.html">Pig Latin</a></li>
-      <li><a href="../mode/properties/index.html">Properties files</a></li>
-      <li><a href="../mode/python/index.html">Python</a></li>
-      <li><a href="../mode/q/index.html">Q</a></li>
-      <li><a href="../mode/r/index.html">R</a></li>
-      <li>RPM <a href="../mode/rpm/spec/index.html">spec</a> and <a href="../mode/rpm/changes/index.html">changelog</a></li>
-      <li><a href="../mode/rst/index.html">reStructuredText</a></li>
-      <li><a href="../mode/ruby/index.html">Ruby</a></li>
-      <li><a href="../mode/rust/index.html">Rust</a></li>
-      <li><a href="../mode/sass/index.html">Sass</a></li>
-      <li><a href="../mode/clike/scala.html">Scala</a></li>
-      <li><a href="../mode/scheme/index.html">Scheme</a></li>
-      <li><a href="../mode/css/scss.html">SCSS</a></li>
-      <li><a href="../mode/shell/index.html">Shell</a></li>
-      <li><a href="../mode/sieve/index.html">Sieve</a></li>
-      <li><a href="../mode/smalltalk/index.html">Smalltalk</a></li>
-      <li><a href="../mode/smarty/index.html">Smarty</a></li>
-      <li><a href="../mode/smartymixed/index.html">Smarty/HTML mixed</a></li>
-      <li><a href="../mode/sql/index.html">SQL</a> (several dialects)</li>
-      <li><a href="../mode/sparql/index.html">SPARQL</a></li>
-      <li><a href="../mode/stex/index.html">sTeX, LaTeX</a></li>
-      <li><a href="../mode/tcl/index.html">Tcl</a></li>
-      <li><a href="../mode/tiddlywiki/index.html">Tiddlywiki</a></li>
-      <li><a href="../mode/tiki/index.html">Tiki wiki</a></li>
-      <li><a href="../mode/turtle/index.html">Turtle</a></li>
-      <li><a href="../mode/vb/index.html">VB.NET</a></li>
-      <li><a href="../mode/vbscript/index.html">VBScript</a></li>
-      <li><a href="../mode/velocity/index.html">Velocity</a></li>
-      <li><a href="../mode/verilog/index.html">Verilog</a></li>
-      <li><a href="../mode/xml/index.html">XML/HTML</a></li>
-      <li><a href="../mode/xquery/index.html">XQuery</a></li>
-      <li><a href="../mode/yaml/index.html">YAML</a></li>
-      <li><a href="../mode/z80/index.html">Z80</a></li>
-    </ul>
-  </div>
-
-  </body>
-</html>
diff --git a/doc/realworld.html b/doc/realworld.html
index 36c95b3e..9b6d7386 100644
--- a/doc/realworld.html
+++ b/doc/realworld.html
@@ -1,23 +1,26 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Real-world uses</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-  </head>
-  <body>
 
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
+<title>CodeMirror: Real-world Uses</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
 
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Real world uses,
-   full list */
-</pre>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Real-world uses</a>
+  </ul>
 </div>
 
+<article>
+
+<h2>CodeMirror real-world uses</h2>
+
     <p><a href="mailto:marijnh@gmail.com">Contact me</a> if you'd like
     your project to be added to this list.</p>
 
@@ -117,5 +120,5 @@
       <li><a href="http://q42jaap.github.io/xsd2codemirror/">xsd2codemirror</a> (convert XSD to CM XML completion info)</li>
     </ul>
 
-  </body>
-</html>
+</article>
+
diff --git a/doc/oldrelease.html b/doc/releases.html
similarity index 70%
rename from doc/oldrelease.html
rename to doc/releases.html
index c72dc8f6..93650b8f 100644
--- a/doc/oldrelease.html
+++ b/doc/releases.html
@@ -1,24 +1,196 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-    <link rel="alternate" href="http://twitter.com/statuses/user_timeline/242283288.rss" type="application/rss+xml"/>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Old release
-   history */
-</pre>
+
+<title>CodeMirror: Release History</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
+<script src="activebookmark.js"></script>
+
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active data-default="true" href="#v3">Version 3.x</a>
+    <li><a href="#v2">Version 2.x</a>
+    <li><a href="#v1">Version 0.x</a>
+  </ul>
 </div>
 
+<article>
+
+<h2>Release notes and version history</h2>
+
+<section id=v3 class=first>
+
+  <h2>Version 3.x</h2>
+
+  <p class="rel">29-07-2013: <a href="http://codemirror.net/codemirror-3.15.zip">Version 3.15</a>:</p>
+
+  <ul class="rel-note">
+    <li>New modes: <a href="../mode/jade/index.html">Jade</a>, <a href="../mode/nginx/index.html">Nginx</a>.</li>
+    <li>New addons: <a href="../demo/tern.html">Tern</a>, <a href="manual.html#addon_matchtags">matchtags</a>, and <a href="manual.html#addon_foldgutter">foldgutter</a>.</li>
+    <li>Introduced <a href="manual.html#getHelper"><em>helper</em></a> concept (<a href="https://groups.google.com/forum/#!msg/codemirror/cOc0xvUUEUU/nLrX1-qnidgJ">context</a>).</li>
+    <li>New method: <a href="manual.html#getModeAt"><code>getModeAt</code></a>.</li>
+    <li>New themes: base16 <a href="../demo/theme.html?base16-dark">dark</a>/<a href="../demo/theme.html?base16-light">light</a>, 3024 <a href="../demo/theme.html?3024-night">dark</a>/<a href="../demo/theme.html?3024-day">light</a>, <a href="../demo/theme.html?tomorrow-night-eighties">tomorrow-night</a>.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/3.14.0...3.15.0">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">20-06-2013: <a href="http://codemirror.net/codemirror-3.14.zip">Version 3.14</a>:</p>
+
+  <ul class="rel-note">
+    <li>New
+    addons: <a href="manual.html#addon_trailingspace">trailing
+    space highlight</a>, <a href="manual.html#addon_xml-hint">XML
+    completion</a> (rewritten),
+    and <a href="manual.html#addon_merge">diff merging</a>.</li>
+    <li><a href="manual.html#markText"><code>markText</code></a>
+    and <a href="manual.html#addLineWidget"><code>addLineWidget</code></a>
+    now take a <code>handleMouseEvents</code> option.</li>
+    <li>New methods: <a href="manual.html#lineAtHeight"><code>lineAtHeight</code></a>,
+    <a href="manual.html#getTokenTypeAt"><code>getTokenTypeAt</code></a>.</li>
+    <li>More precise cleanness-tracking
+    using <a href="manual.html#changeGeneration"><code>changeGeneration</code></a>
+    and <a href="manual.html#isClean"><code>isClean</code></a>.</li>
+    <li>Many extensions to <a href="../demo/emacs.html">Emacs</a> mode
+    (prefixes, more navigation units, and more).</li>
+    <li>New
+    events <a href="manual.html#event_keyHandled"><code>"keyHandled"</code></a>
+    and <a href="manual.html#event_inputRead"><code>"inputRead"</code></a>.</li>
+    <li>Various improvements to <a href="../mode/ruby/index.html">Ruby</a>,
+    <a href="../mode/smarty/index.html">Smarty</a>, <a href="../mode/sql/index.html">SQL</a>,
+    and <a href="../demo/vim.html">Vim</a> modes.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/3.13.0...3.14.0">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">20-05-2013: <a href="http://codemirror.net/codemirror-3.13.zip">Version 3.13</a>:</p>
+
+  <ul class="rel-note">
+    <li>New modes: <a href="../mode/cobol/index.html">COBOL</a> and <a href="../mode/haml/index.html">HAML</a>.</li>
+    <li>New options: <a href="manual.html#option_cursorScrollMargin"><code>cursorScrollMargin</code></a> and <a href="manual.html#option_coverGutterNextToScrollbar"><code>coverGutterNextToScrollbar</code></a>.</li>
+    <li>New addon: <a href="manual.html#addon_comment">commenting</a>.</li>
+    <li>More features added to the <a href="../demo/vim.html">Vim keymap</a>.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.12...3.13.0">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">19-04-2013: <a href="http://codemirror.net/codemirror-3.12.zip">Version 3.12</a>:</p>
+
+  <ul class="rel-note">
+    <li>New mode: <a href="../mode/gas/index.html">GNU assembler</a>.</li>
+    <li>New
+    options: <a href="manual.html#option_maxHighlightLength"><code>maxHighlightLength</code></a>
+    and <a href="manual.html#option_historyEventDelay"><code>historyEventDelay</code></a>.</li>
+    <li>Added <a href="manual.html#mark_addToHistory"><code>addToHistory</code></a>
+    option for <code>markText</code>.</li>
+    <li>Various fixes to JavaScript tokenization and indentation corner cases.</li>
+    <li>Further improvements to the vim mode.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.11...v3.12">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">20-03-2013: <a href="http://codemirror.net/codemirror-3.11.zip">Version 3.11</a>:</p>
+
+  <ul class="rel-note">
+    <li><strong>Removed code:</strong> <code>collapserange</code>,
+    <code>formatting</code>, and <code>simple-hint</code>
+    addons. <code>plsql</code> and <code>mysql</code> modes
+    (use <a href="../mode/sql/index.html"><code>sql</code></a> mode).</li>
+    <li><strong>Moved code:</strong> the range-finding functions for folding now have <a href="../addon/fold/">their own files</a>.</li>
+    <li><strong>Changed interface:</strong>
+    the <a href="manual.html#addon_continuecomment"><code>continuecomment</code></a>
+    addon now exposes an option, rather than a command.</li>
+    <li>New
+    modes: <a href="../mode/css/scss.html">SCSS</a>, <a href="../mode/tcl/index.html">Tcl</a>, <a href="../mode/livescript/index.html">LiveScript</a>,
+    and <a href="../mode/mirc/index.html">mIRC</a>.</li>
+    <li>New addons: <a href="../demo/placeholder.html"><code>placeholder</code></a>, <a href="../demo/html5complete.html">HTML completion</a>.</li>
+    <li>New
+    methods: <a href="manual.html#hasFocus"><code>hasFocus</code></a>, <a href="manual.html#defaultCharWidth"><code>defaultCharWidth</code></a>.</li>
+    <li>New events: <a href="manual.html#event_beforeCursorEnter"><code>beforeCursorEnter</code></a>, <a href="manual.html#event_renderLine"><code>renderLine</code></a>.</li>
+    <li>Many improvements to the <a href="manual.html#addon_show-hint"><code>show-hint</code></a> completion
+    dialog addon.</li>
+    <li>Tweak behavior of by-word cursor motion.</li>
+    <li>Further improvements to the <a href="../demo/vim.html">vim mode</a>.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.1...v3.11">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">21-02-2013: <a href="http://codemirror.net/codemirror-3.1.zip">Version 3.1</a>:</p>
+
+  <ul class="rel-note">
+    <li><strong>Incompatible:</strong> key handlers may
+    now <em>return</em>, rather
+    than <em>throw</em> <code>CodeMirror.Pass</code> to signal they
+    didn't handle the key.</li>
+    <li>Make documents a <a href="manual.html#api_doc">first-class
+    construct</a>, support split views and subviews.</li>
+    <li>Add a <a href="manual.html#addon_show-hint">new module</a>
+    for showing completion hints.
+    Deprecate <code>simple-hint.js</code>.</li>
+    <li>Extend <a href="../mode/htmlmixed/index.html">htmlmixed mode</a>
+    to allow custom handling of script types.</li>
+    <li>Support an <code>insertLeft</code> option
+    to <a href="manual.html#setBookmark"><code>setBookmark</code></a>.</li>
+    <li>Add an <a href="manual.html#eachLine"><code>eachLine</code></a>
+    method to iterate over a document.</li>
+    <li>New addon modules: <a href="../demo/markselection.html">selection
+    marking</a>, <a href="../demo/lint.html">linting</a>,
+    and <a href="../demo/closebrackets.html">automatic bracket
+    closing</a>.</li>
+    <li>Add <a href="manual.html#event_beforeChange"><code>"beforeChange"</code></a>
+    and <a href="manual.html#event_beforeSelectionChange"><code>"beforeSelectionChange"</code></a>
+    events.</li>
+    <li>Add <a href="manual.html#event_hide"><code>"hide"</code></a>
+    and <a href="manual.html#event_unhide"><code>"unhide"</code></a>
+    events to marked ranges.</li>
+    <li>Fix <a href="manual.html#coordsChar"><code>coordsChar</code></a>'s
+    interpretation of its argument to match the documentation.</li>
+    <li>New modes: <a href="../mode/turtle/index.html">Turtle</a>
+    and <a href="../mode/q/index.html">Q</a>.</li>
+    <li>Further improvements to the <a href="../demo/vim.html">vim mode</a>.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.01...v3.1">list of patches</a>.</li>
+  </ul>
+  
+
+  <p class="rel">25-01-2013: <a href="http://codemirror.net/codemirror-3.02.zip">Version 3.02</a>:</p>
+
+  <p class="rel-note">Single-bugfix release. Fixes a problem that
+  prevents CodeMirror instances from being garbage-collected after
+  they become unused.</p>
+
+  <p class="rel">21-01-2013: <a href="http://codemirror.net/codemirror-3.01.zip">Version 3.01</a>:</p>
+
+  <ul class="rel-note">
+    <li>Move all add-ons into an organized directory structure
+    under <a href="../addon/"><code>/addon</code></a>. <strong>You might have to adjust your
+    paths.</strong></li>
+    <li>New
+    modes: <a href="../mode/d/index.html">D</a>, <a href="../mode/sass/index.html">Sass</a>, <a href="../mode/apl/index.html">APL</a>, <a href="../mode/sql/index.html">SQL</a>
+    (configurable), and <a href="../mode/asterisk/index.html">Asterisk</a>.</li>
+    <li>Several bugfixes in right-to-left text support.</li>
+    <li>Add <a href="manual.html#option_rtlMoveVisually"><code>rtlMoveVisually</code></a> option.</li>
+    <li>Improvements to vim keymap.</li>
+    <li>Add built-in (lightweight) <a href="manual.html#addOverlay">overlay mode</a> support.</li>
+    <li>Support <code>showIfHidden</code> option for <a href="manual.html#addLineWidget">line widgets</a>.</li>
+    <li>Add simple <a href="manual.html#addon_python-hint">Python hinter</a>.</li>
+    <li>Bring back the <a href="manual.html#option_fixedGutter"><code>fixedGutter</code></a> option.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0...v3.01">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">10-12-2012: <a href="http://codemirror.net/codemirror-3.0.zip">Version 3.0</a>:</p>
+
+  <p class="rel-note"><strong>New major version</strong>. Only
+  partially backwards-compatible. See
+  the <a href="upgrade_v3.html">upgrading guide</a> for more
+  information. Changes since release candidate 2:</p>
+
+  <ul class="rel-note">
+    <li>Rewritten VIM mode.</li>
+    <li>Fix a few minor scrolling and sizing issues.</li>
+    <li>Work around Safari segfault when dragging.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0rc2...v3.0">list of patches</a>.</li>
+  </ul>
+  
   <p class="rel">20-11-2012: <a href="http://codemirror.net/codemirror-3.0rc2.zip">Version 3.0, release candidate 2</a>:</p>
 
   <ul class="rel-note">
@@ -31,20 +203,6 @@
     <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0rc1...v3.0rc2">list of patches</a>.</li>
   </ul>
 
-  <p class="rel">20-11-2012: <a href="http://codemirror.net/codemirror-2.36.zip">Version 2.36</a>:</p>
-
-  <ul class="rel-note">
-    <li>New mode: <a href="../mode/z80/index.html">Z80 assembly</a>.</li>
-    <li>New theme: <a href="../demo/theme.html?twilight">Twilight</a>.</li>
-    <li>Add command-line compression helper.</li>
-    <li>Make <a href="manual.html#scrollIntoView"><code>scrollIntoView</code></a> public.</li>
-    <li>Add <a href="manual.html#defaultTextHeight"><code>defaultTextHeight</code></a> method.</li>
-    <li>Various extensions to the vim keymap.</li>
-    <li>Make <a href="../mode/php/index.html">PHP mode</a> build on <a href="../mode/htmlmixed/index.html">mixed HTML mode</a>.</li>
-    <li>Add <a href="manual.html#addon_continuecomment">comment-continuing</a> add-on.</li>
-    <li>Full <a href="../https://github.com/marijnh/CodeMirror/compare/v2.35...v2.36">list of patches</a>.</li>
-  </ul>
-
   <p class="rel">20-11-2012: <a href="http://codemirror.net/codemirror-3.0rc1.zip">Version 3.0, release candidate 1</a>:</p>
 
   <ul class="rel-note">
@@ -62,17 +220,6 @@
     <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0beta2...v3.0rc1">list of patches</a>.</li>
   </ul>
 
-  <p class="rel">22-10-2012: <a href="http://codemirror.net/codemirror-2.35.zip">Version 2.35</a>:</p>
-
-  <ul class="rel-note">
-    <li>New (sub) mode: <a href="../mode/javascript/typescript.html">TypeScript</a>.</li>
-    <li>Don't overwrite (insert key) when pasting.</li>
-    <li>Fix several bugs in <a href="manual.html#markText"><code>markText</code></a>/undo interaction.</li>
-    <li>Better indentation of JavaScript code without semicolons.</li>
-    <li>Add <a href="manual.html#defineInitHook"><code>defineInitHook</code></a> function.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v2.34...v2.35">list of patches</a>.</li>
-  </ul>
-
   <p class="rel">22-10-2012: <a href="http://codemirror.net/codemirror-3.0beta2.zip">Version 3.0, beta 2</a>:</p>
 
   <ul class="rel-note">
@@ -89,6 +236,63 @@
     <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0beta1...v3.0beta2">list of patches</a>.</li>
   </ul>
 
+  <p class="rel">19-09-2012: <a href="http://codemirror.net/codemirror-3.0beta1.zip">Version 3.0, beta 1</a>:</p>
+
+  <ul class="rel-note">
+    <li>Bi-directional text support.</li>
+    <li>More powerful gutter model.</li>
+    <li>Support for arbitrary text/widget height.</li>
+    <li>In-line widgets.</li>
+    <li>Generalized event handling.</li>
+  </ul>
+
+</section>
+
+<section id=v2>
+
+  <h2>Version 2.x</h2>
+
+  <p class="rel">21-01-2013: <a href="http://codemirror.net/codemirror-2.38.zip">Version 2.38</a>:</p>
+
+  <p class="rel-note">Integrate some bugfixes, enhancements to the vim keymap, and new
+  modes
+  (<a href="../mode/d/index.html">D</a>, <a href="../mode/sass/index.html">Sass</a>, <a href="../mode/apl/index.html">APL</a>)
+  from the v3 branch.</p>
+
+  <p class="rel">20-12-2012: <a href="http://codemirror.net/codemirror-2.37.zip">Version 2.37</a>:</p>
+
+  <ul class="rel-note">
+    <li>New mode: <a href="../mode/sql/index.html">SQL</a> (will replace <a href="../mode/plsql/index.html">plsql</a> and <a href="../mode/mysql/index.html">mysql</a> modes).</li>
+    <li>Further work on the new VIM mode.</li>
+    <li>Fix Cmd/Ctrl keys on recent Operas on OS X.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v2.36...v2.37">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">20-11-2012: <a href="http://codemirror.net/codemirror-2.36.zip">Version 2.36</a>:</p>
+
+  <ul class="rel-note">
+    <li>New mode: <a href="../mode/z80/index.html">Z80 assembly</a>.</li>
+    <li>New theme: <a href="../demo/theme.html?twilight">Twilight</a>.</li>
+    <li>Add command-line compression helper.</li>
+    <li>Make <a href="manual.html#scrollIntoView"><code>scrollIntoView</code></a> public.</li>
+    <li>Add <a href="manual.html#defaultTextHeight"><code>defaultTextHeight</code></a> method.</li>
+    <li>Various extensions to the vim keymap.</li>
+    <li>Make <a href="../mode/php/index.html">PHP mode</a> build on <a href="../mode/htmlmixed/index.html">mixed HTML mode</a>.</li>
+    <li>Add <a href="manual.html#addon_continuecomment">comment-continuing</a> add-on.</li>
+    <li>Full <a href="../https://github.com/marijnh/CodeMirror/compare/v2.35...v2.36">list of patches</a>.</li>
+  </ul>
+
+  <p class="rel">22-10-2012: <a href="http://codemirror.net/codemirror-2.35.zip">Version 2.35</a>:</p>
+
+  <ul class="rel-note">
+    <li>New (sub) mode: <a href="../mode/javascript/typescript.html">TypeScript</a>.</li>
+    <li>Don't overwrite (insert key) when pasting.</li>
+    <li>Fix several bugs in <a href="manual.html#markText"><code>markText</code></a>/undo interaction.</li>
+    <li>Better indentation of JavaScript code without semicolons.</li>
+    <li>Add <a href="manual.html#defineInitHook"><code>defineInitHook</code></a> function.</li>
+    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v2.34...v2.35">list of patches</a>.</li>
+  </ul>
+
   <p class="rel">19-09-2012: <a href="http://codemirror.net/codemirror-2.34.zip">Version 2.34</a>:</p>
 
   <ul class="rel-note">
@@ -102,16 +306,6 @@
     <li><a href="https://github.com/marijnh/CodeMirror/compare/v2.33...v2.34">Full list</a> of patches.</li>
   </ul>
 
-  <p class="rel">19-09-2012: <a href="http://codemirror.net/codemirror-3.0beta1.zip">Version 3.0, beta 1</a>:</p>
-
-  <ul class="rel-note">
-    <li>Bi-directional text support.</li>
-    <li>More powerful gutter model.</li>
-    <li>Support for arbitrary text/widget height.</li>
-    <li>In-line widgets.</li>
-    <li>Generalized event handling.</li>
-  </ul>
-
   <p class="rel">23-08-2012: <a href="http://codemirror.net/codemirror-2.33.zip">Version 2.33</a>:</p>
 
   <ul class="rel-note">
@@ -391,13 +585,6 @@
   and <a href="http://groups.google.com/group/codemirror/browse_thread/thread/5a8e894024a9f580">this</a>
   for more information.</p>
 
-  <p class="rel">28-03-2011: <a href="http://codemirror.net/codemirror-1.0.zip">Version 1.0</a>:</p>
-  <ul class="rel-note">
-    <li>Fix error when debug history overflows.</li>
-    <li>Refine handling of C# verbatim strings.</li>
-    <li>Fix some issues with JavaScript indentation.</li>
-  </ul>
-
   <p class="rel">22-02-2011: <a href="https://github.com/marijnh/codemirror/tree/beta2">Version 2.0 beta 2</a>:</p>
   <p class="rel-note">Somewhat more mature API, lots of bugs shaken out.</p>
 
@@ -422,6 +609,18 @@
     <li>Support use of CSS classes for highlighting brackets.</li>
     <li>Fix yet another hang with line-numbering in hidden editors.</li>
   </ul>
+</section>
+
+<section id=v1>
+
+  <h2>Version 0.x</h2>
+
+  <p class="rel">28-03-2011: <a href="http://codemirror.net/codemirror-1.0.zip">Version 1.0</a>:</p>
+  <ul class="rel-note">
+    <li>Fix error when debug history overflows.</li>
+    <li>Refine handling of C# verbatim strings.</li>
+    <li>Fix some issues with JavaScript indentation.</li>
+  </ul>
 
   <p class="rel">17-12-2010: <a href="http://codemirror.net/codemirror-0.92.zip">Version 0.92</a>:</p>
   <ul class="rel-note">
@@ -527,20 +726,17 @@
   parser. And, as usual, add workarounds for various newly discovered
   browser incompatibilities.</p>
 
-<p class="rel"><em>31-08-2009</em>: <a
-href="http://codemirror.net/codemirror-0.63.zip">Version
-0.63</a>:</p>
-<p class="rel-note"> Overhaul of paste-handling (less fragile), fixes for several
-serious IE8 issues (cursor jumping, end-of-document bugs) and a number
-of small problems.</p>
-
-<p class="rel"><em>30-05-2009</em>: <a
-href="http://codemirror.net/codemirror-0.62.zip">Version
-0.62</a>:</p>
-<p class="rel-note">Introduces <a href="contrib/python/index.html">Python</a>
-and <a href="contrib/lua/index.html">Lua</a> parsers. Add
-<code>setParser</code> (on-the-fly mode changing) and
-<code>clearHistory</code> methods. Make parsing passes time-based
-instead of lines-based (see the <code>passTime</code> option).</p>
-
-</body></html>
+  <p class="rel"><em>31-08-2009</em>: <a href="http://codemirror.net/codemirror-0.63.zip">Version 0.63</a>:</p>
+  <p class="rel-note"> Overhaul of paste-handling (less fragile), fixes for several
+  serious IE8 issues (cursor jumping, end-of-document bugs) and a number
+  of small problems.</p>
+
+  <p class="rel"><em>30-05-2009</em>: <a href="http://codemirror.net/codemirror-0.62.zip">Version 0.62</a>:</p>
+  <p class="rel-note">Introduces <a href="contrib/python/index.html">Python</a>
+  and <a href="contrib/lua/index.html">Lua</a> parsers. Add
+  <code>setParser</code> (on-the-fly mode changing) and
+  <code>clearHistory</code> methods. Make parsing passes time-based
+  instead of lines-based (see the <code>passTime</code> option).</p>
+
+</section>
+</article>
diff --git a/doc/reporting.html b/doc/reporting.html
index a6165125..47e37a55 100644
--- a/doc/reporting.html
+++ b/doc/reporting.html
@@ -1,24 +1,26 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Reporting Bugs</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-    <style>li { margin-top: 1em; }</style>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Reporting bugs
-   effectively */
-</pre>
+
+<title>CodeMirror: Reporting Bugs</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
+
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Reporting bugs</a>
+  </ul>
 </div>
 
+<article>
+
+<h2>Reporting bugs effectively</h2>
+
 <div class="left">
 
 <p>So you found a problem in CodeMirror. By all means, report it! Bug
@@ -56,5 +58,4 @@ CodeMirror. But first, please read over these points:</p>
 
 </div>
 
-  </body>
-</html>
+</article>
diff --git a/doc/upgrade_v2.2.html b/doc/upgrade_v2.2.html
index 7e4d8400..a2dddef7 100644
--- a/doc/upgrade_v2.2.html
+++ b/doc/upgrade_v2.2.html
@@ -1,36 +1,37 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Upgrading to v2.2</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Upgrading to
-   v2.2 */
-</pre>
+
+<title>CodeMirror: Version 2.2 upgrade guide</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
+
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">2.2 upgrade guide</a>
+  </ul>
 </div>
 
-<div class="left">
+<article>
+
+<h2>Upgrading to v2.2</h2>
 
 <p>There are a few things in the 2.2 release that require some care
 when upgrading.</p>
 
-<h2>No more default.css</h2>
+<h3>No more default.css</h3>
 
 <p>The default theme is now included
 in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>, so
 you do not have to included it separately anymore. (It was tiny, so
 even if you're not using it, the extra data overhead is negligible.)
 
-<h2>Different key customization</h2>
+<h3>Different key customization</h3>
 
 <p>CodeMirror has moved to a system
 where <a href="manual.html#option_keyMap">keymaps</a> are used to
@@ -81,7 +82,7 @@ and <code>"insertTab"</code> commands provided for alternate
 behaviors. Or you can write your own handler function to do something
 different altogether.</p>
 
-<h2>Tabs</h2>
+<h3>Tabs</h3>
 
 <p>Handling of tabs changed completely. The display width of tabs can
 now be set with the <code>tabSize</code> option, and tabs can
@@ -92,7 +93,4 @@ for the <code>cm-tab</code> class.</p>
 hard-wired into browsers. If you are relying on 8-space tabs, make
 sure you explicitly set <code>tabSize: 8</code> in your options.</p>
 
-</div>
-
-  </body>
-</html>
+</article>
diff --git a/doc/upgrade_v3.html b/doc/upgrade_v3.html
index 7e8a6b61..19757924 100644
--- a/doc/upgrade_v3.html
+++ b/doc/upgrade_v3.html
@@ -1,32 +1,44 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: Upgrading to v3</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-    <script src="../lib/codemirror.js"></script>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <script src="../addon/runmode/runmode.js"></script>
-    <script src="../addon/runmode/colorize.js"></script>
-    <script src="../mode/javascript/javascript.js"></script>
-    <script src="../mode/xml/xml.js"></script>
-    <script src="../mode/css/css.js"></script>
-    <script src="../mode/htmlmixed/htmlmixed.js"></script>
-  </head>
-  <body>
-
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* Upgrading to
-   version 3 */
-</pre>
+
+<title>CodeMirror: Version 3 upgrade guide</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="docs.css">
+<script src="../lib/codemirror.js"></script>
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../addon/runmode/runmode.js"></script>
+<script src="../addon/runmode/colorize.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../mode/css/css.js"></script>
+<script src="../mode/htmlmixed/htmlmixed.js"></script>
+<script src="activebookmark.js"></script>
+
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#upgrade">Upgrade guide</a>
+    <li><a href="#dom">DOM structure</a></li>
+    <li><a href="#gutters">Gutter model</a></li>
+    <li><a href="#events">Event handling</a></li>
+    <li><a href="#marktext">markText method arguments</a></li>
+    <li><a href="#folding">Line folding</a></li>
+    <li><a href="#lineclass">Line CSS classes</a></li>
+    <li><a href="#positions">Position properties</a></li>
+    <li><a href="#matchbrackets">Bracket matching</a></li>
+    <li><a href="#modes">Mode management</a></li>
+    <li><a href="#new">New features</a></li>
+  </ul>
 </div>
 
-<div class="clear"><div class="leftbig blk">
+<article>
+
+<h2 id=upgrade>Upgrading to version 3</h2>
 
 <p>Version 3 does not depart too much from 2.x API, and sites that use
 CodeMirror in a very simple way might be able to upgrade without
@@ -37,7 +49,8 @@ at least skim this text before upgrading.</p>
 Explorer 7</strong>. The editor will mostly work on that browser, but
 it'll be significantly glitchy.</p>
 
-<h2 id=dom>DOM structure</h2>
+<section id=dom>
+  <h2>DOM structure</h2>
 
 <p>This one is the most likely to cause problems. The internal
 structure of the editor has changed quite a lot, mostly to implement a
@@ -53,8 +66,9 @@ you'll have to re-test it and probably update it to work with v3.</p>
 
 <p>See the <a href="manual.html#styling">styling section</a> of the
 manual for more information.</p>
-
-<h2 id=gutters>Gutter model</h2>
+</section>
+<section id=gutters>
+  <h2>Gutter model</h2>
 
 <p>In CodeMirror 2.x, there was a single gutter, and line markers
 created with <code>setMarker</code> would have to somehow coexist with
@@ -87,8 +101,9 @@ only behavior).</p>
   cm.setGutterMarker(0, "note-gutter", document.createTextNode("hi"));
 &lt;/script>
 </pre>
-
-<h2 id=events>Event handling</h2>
+</section>
+<section id=events>
+  <h2>Event handling</h2>
 
 <p>Most of the <code>onXYZ</code> options have been removed. The same
 effect is now obtained by calling
@@ -107,8 +122,9 @@ cm.on("change", function(cm, change) {
   console.log("something changed! (" + change.origin + ")");
 });
 </pre>
-
-<h2 id=marktext>markText method arguments</h2>
+</section>
+<section id=marktext>
+  <h2>markText method arguments</h2>
 
 <p>The <a href="manual.html#markText"><code>markText</code></a> method
 (which has gained some interesting new features, such as creating
@@ -124,8 +140,9 @@ cm.markText({line: 0, ch: 0}, {line: 10, ch: 0}, {
   atomic: true
 });
 </pre>
-
-<h2 id=folding>Line folding</h2>
+</section>
+<section id=folding>
+  <h2>Line folding</h2>
 
 <p>The interface for hiding lines has been
 removed. <a href="manual.html#markText"><code>markText</code></a> can
@@ -146,8 +163,9 @@ CodeMirror.on(range, "clear", function() {
   console.log("boom");
 });
 </pre>
-
-<h2 id=lineclass>Line CSS classes</h2>
+</section>
+<section id=lineclass>
+  <h2>Line CSS classes</h2>
 
 <p>The <code>setLineClass</code> method has been replaced
 by <a href="manual.html#addLineClass"><code>addLineClass</code></a>
@@ -160,8 +178,9 @@ setTimeout(function() {
   cm.removeLineClass(marked, "background", "highlighted-line");
 });
 </pre>
-
-<h2 id=positions>Position properties</h2>
+</section>
+<section id=positions>
+  <h2>Position properties</h2>
 
 <p>All methods that take or return objects that represent screen
 positions now use <code>{left, top, bottom, right}</code> properties
@@ -171,14 +190,16 @@ by some methods in v2.x.</p>
 <p>Affected methods
 are <a href="manual.html#cursorCoords"><code>cursorCoords</code></a>, <a href="manual.html#charCoords"><code>charCoords</code></a>, <a href="manual.html#coordsChar"><code>coordsChar</code></a>,
 and <a href="manual.html#getScrollInfo"><code>getScrollInfo</code></a>.</p>
-
-<h2 id=matchbrackets>Bracket matching no longer in core</h2>
+</section>
+<section id=matchbrackets>
+  <h2>Bracket matching no longer in core</h2>
 
 <p>The <a href="manual.html#addon_matchbrackets"><code>matchBrackets</code></a>
 option is no longer defined in the core editor.
 Load <code>addon/edit/matchbrackets.js</code> to enable it.</p>
-
-<h2 id=modes>Mode management</h2>
+</section>
+<section id=modes>
+  <h2>Mode management</h2>
 
 <p>The <code>CodeMirror.listModes</code>
 and <code>CodeMirror.listMIMEs</code> functions, used for listing
@@ -186,8 +207,9 @@ defined modes, are gone. You are now encouraged to simply
 inspect <code>CodeMirror.modes</code> (mapping mode names to mode
 constructors) and <code>CodeMirror.mimeModes</code> (mapping MIME
 strings to mode specs).</p>
-
-<h2 id=new>New features</h2>
+</section>
+<section id=new>
+  <h2>New features</h2>
 
 <p>Some more reasons to upgrade to version 3.</p>
 
@@ -202,26 +224,7 @@ strings to mode specs).</p>
   <li>Defining custom options
   with <a href="manual.html#defineOption"><code>CodeMirror.defineOption</code></a>.</li>
 </ul>
-
-</div><div class="rightsmall blk">
-
-<h2>Contents</h2>
-
-<ul>
-  <li><a href="#dom">DOM structure</a></li>
-  <li><a href="#gutters">Gutter model</a></li>
-  <li><a href="#events">Event handling</a></li>
-  <li><a href="#folding">Line folding</a></li>
-  <li><a href="#marktext">markText method arguments</a></li>
-  <li><a href="#lineclass">Line CSS classes</a></li>
-  <li><a href="#positions">Position properties</a></li>
-  <li><a href="#matchbrackets">Bracket matching</a></li>
-  <li><a href="#modes">Mode management</a></li>
-  <li><a href="#new">New features</a></li>
-</ul>
-
-</div></div>
+</section>
+</article>
 
 <script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>
-  </body>
-</html>
diff --git a/index.html b/index.html
index 2f2ba050..3bd665e8 100644
--- a/index.html
+++ b/index.html
@@ -1,480 +1,186 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="doc/docs.css"/>
-    <link rel="alternate" href="https://groups.google.com/group/codemirror-announce/feed/atom_v1_0_topics.xml" type="application/atom+xml"/>
-  </head>
-  <body>
 
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
+<title>CodeMirror</title>
+<meta charset="utf-8"/>
 
-<div class="grey">
-<img src="doc/baboon.png" class="logo" alt="logo"/>
-<pre>
-/* In-browser code editing
-   made bearable */
-</pre>
-</div>
-
-<div class="clear"><div class="left blk">
-
-  <p style="margin-top: 0">CodeMirror is a JavaScript component that
-  provides a code editor in the browser. When a mode is available for
-  the language you are coding in, it will color your code, and
-  optionally help with indentation.</p>
-
-  <p>A <a href="doc/manual.html">rich programming API</a> and a CSS
-  theming system are available for customizing CodeMirror to fit your
-  application, and extending it with new functionality.</p>
-
-  <div class="clear"><div class="left1 blk">
-
-    <h2 style="margin-top: 0">Supported modes:</h2>
-
-    <ul>
-      <li><a href="mode/clike/index.html">C, C++, C#</a></li>
-      <li><a href="mode/clojure/index.html">Clojure</a></li>
-      <li><a href="mode/coffeescript/index.html">CoffeeScript</a></li>
-      <li><a href="mode/commonlisp/index.html">Common Lisp</a></li>
-      <li><a href="mode/css/index.html">CSS</a></li>
-      <li><a href="mode/python/index.html">Cython</a></li>
-      <li><a href="mode/d/index.html">D</a></li>
-      <li><a href="mode/diff/index.html">diff</a></li>
-      <li><a href="mode/ecl/index.html">ECL</a></li>
-      <li><a href="mode/erlang/index.html">Erlang</a></li>
-      <li><a href="mode/go/index.html">Go</a></li>
-      <li><a href="mode/groovy/index.html">Groovy</a></li>
-      <li><a href="mode/haskell/index.html">Haskell</a></li>
-      <li><a href="mode/haxe/index.html">Haxe</a></li>
-      <li><a href="mode/htmlmixed/index.html">HTML mixed-mode</a></li>
-      <li><a href="mode/http/index.html">HTTP</a></li>
-      <li><a href="mode/clike/index.html">Java</a></li>
-      <li><a href="mode/javascript/index.html">JavaScript</a></li>
-      <li><a href="mode/less/index.html">LESS</a></li>
-      <li><a href="mode/lua/index.html">Lua</a></li>
-      <li><a href="mode/markdown/index.html">Markdown</a> (<a href="mode/gfm/index.html">GitHub-flavour</a>)</li>
-      <li><a href="mode/ntriples/index.html">NTriples</a></li>
-      <li><a href="mode/ocaml/index.html">OCaml</a></li>
-      <li><a href="mode/pascal/index.html">Pascal</a></li>
-      <li><a href="mode/perl/index.html">Perl</a></li>
-      <li><a href="mode/php/index.html">PHP</a></li>
-      <li><a href="mode/properties/index.html">Properties files</a></li>
-      <li><a href="mode/python/index.html">Python</a></li>
-      <li><a href="mode/r/index.html">R</a></li>
-      <li><a href="mode/rst/index.html">reStructuredText</a></li>
-      <li><a href="mode/ruby/index.html">Ruby</a></li>
-      <li><a href="mode/rust/index.html">Rust</a></li>
-      <li><a href="mode/sass/index.html">Sass</a></li>
-      <li><a href="mode/clike/scala.html">Scala</a></li>
-      <li><a href="mode/scheme/index.html">Scheme</a></li>
-      <li><a href="mode/shell/index.html">Shell</a></li>
-      <li><a href="mode/smalltalk/index.html">Smalltalk</a></li>
-      <li><a href="mode/smarty/index.html">Smarty</a></li>
-      <li><a href="mode/sql/index.html">SQL</a> (several dialects)</li>
-      <li><a href="mode/sparql/index.html">SPARQL</a></li>
-      <li><a href="mode/stex/index.html">sTeX, LaTeX</a></li>
-      <li><a href="mode/tcl/index.html">Tcl</a></li>
-      <li><a href="mode/vb/index.html">VB.NET</a></li>
-      <li><a href="mode/vbscript/index.html">VBScript</a></li>
-      <li><a href="mode/velocity/index.html">Velocity</a></li>
-      <li><a href="mode/xml/index.html">XML/HTML</a></li>
-      <li><a href="mode/xquery/index.html">XQuery</a></li>
-      <li><a href="mode/yaml/index.html">YAML</a></li>
-      <li><a href="mode/z80/index.html">Z80</a></li>
-      <li><a href="doc/modes.html">Full list...</a></li>
-    </ul>
-
-  </div><div class="left2 blk">
-
-    <h2 style="margin-top: 0">Usage demos:</h2>
-
-    <ul>
-      <li><a href="demo/complete.html">Autocompletion</a> (<a href="demo/xmlcomplete.html">XML</a>)</li>
-      <li><a href="demo/search.html">Search/replace</a></li>
-      <li><a href="demo/folding.html">Code folding</a></li>
-      <li><a href="demo/bidi.html">Bi-directional text</a></li>
-      <li><a href="demo/widget.html">Line widgets</a> (via JSHint)</li>
-      <li><a href="demo/buffers.html">Split view</a></li>
-      <li><a href="demo/mustache.html">Mode overlays</a></li>
-      <li><a href="demo/multiplex.html">Mode multiplexer</a></li>
-      <li><a href="demo/preview.html">HTML editor with preview</a></li>
-      <li><a href="demo/resize.html">Auto-resizing editor</a></li>
-      <li><a href="demo/marker.html">Setting breakpoints</a></li>
-      <li><a href="demo/activeline.html">Highlighting the current line</a></li>
-      <li><a href="demo/matchhighlighter.html">Highlighting selection matches</a></li>
-      <li><a href="demo/theme.html">Theming</a></li>
-      <li><a href="demo/variableheight.html">Mixed font sizes</a></li>
-      <li><a href="demo/runmode.html">Stand-alone highlighting</a></li>
-      <li><a href="demo/fullscreen.html">Full-screen editing</a></li>
-      <li><a href="demo/changemode.html">Mode auto-changing</a></li>
-      <li><a href="demo/visibletabs.html">Visible tabs</a></li>
-      <li><a href="demo/emacs.html">Emacs keybindings</a></li>
-      <li><a href="demo/vim.html">Vim keybindings</a></li>
-      <li><a href="demo/closetag.html">Automatic xml tag closing</a></li>
-      <li><a href="demo/loadmode.html">Lazy mode loading</a></li>
-      <li><a href="demo/btree.html">Document tree visualization</a></li>
-    </ul>
-
-    <h2>Real-world uses:</h2>
-
-    <ul>
-      <li><a href="http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/">Light Table</a></li>
-      <li><a href="http://brackets.io">Adobe Brackets</a></li>
-      <li><a href="https://www.webkit.org/blog/2518/state-of-web-inspector/#source-code">WebKit Web inspector</a></li>
-      <li><a href="http://jsbin.com">jsbin.com</a></li>
-      <li><a href="http://jsfiddle.net">jsfiddle.net</a></li>
-      <li><a href="http://blog.bitbucket.org/2013/05/14/edit-your-code-in-the-cloud-with-bitbucket/">Bitbucket</a></li>
-      <li><a href="https://script.google.com/">Google Apps Script</a></li>
-      <li><a href="http://eloquentjavascript.net/chapter1.html">Eloquent JavaScript</a></li>
-      <li><a href="http://emmet.io">Emmet</a></li>
-      <li><a href="http://prose.io/">Prose.io</a></li>
-      <li><a href="https://upsource.jetbrains.com/#idea/view/923f30395f2603cd9f42a32bcafd13b6c28de0ff/plugins/groovy/src/org/jetbrains/plugins/groovy/intentions/style/ReplaceAbstractClassInstanceByMapIntention.java">Upsource</a></li>
-      <li><a href="http://paperjs.org/">Paper.js</a></li>
-      <li><a href="http://codev.it/">Codev</a></li>
-      <li><a href="http://enjalot.com/tributary/2636296/sinwaves.js">Tributary</a></li>
-      <li><a href="http://www.wescheme.org/">WeScheme</a></li>
-      <li><a href="http://www.mergely.com/">Mergely</a></li>
-      <li><a href="http://webglplayground.net/">WebGL playground</a></li>
-      <li><a href="https://thefiletree.com">The File Tree</a></li>
-      <li><a href="http://www.jshint.com/">JSHint</a></li>
-      <li><a href="http://sqlfiddle.com">SQLFiddle</a></li>
-      <li><a href="http://cssdeck.com/">CSSDeck</a></li>
-      <li><a href="http://www.sketchpatch.net/labs/livecodelabIntro.html">sketchPatch Livecodelab</a></li>
-      <li><a href="https://notex.ch">NoTex</a></li>
-      <li><a href="https://github.com/github/android">GitHub's Android app</a></li>
-      <li><a href="doc/realworld.html">More...</a></li>
-    </ul>
-
-  </div></div>
-
-  <h2 id="code">Getting the code</h2>
-
-  <p>All of CodeMirror is released under a <a
-  href="LICENSE">MIT-style</a> license. To get it, you can download
-  the <a href="http://codemirror.net/codemirror.zip">latest
-  release</a> or the current <a
-  href="http://codemirror.net/codemirror-latest.zip">development
-  snapshot</a> as zip files. To create a custom minified script file,
-  you can use the <a href="doc/compress.html">compression API</a>.</p>
-
-  <p>We use <a href="http://git-scm.com/">git</a> for version control.
-  The main repository can be fetched in this way:</p>
-
-  <pre class="code">git clone http://marijnhaverbeke.nl/git/codemirror</pre>
-
-  <p>CodeMirror can also be found on GitHub at <a
-  href="http://github.com/marijnh/CodeMirror">marijnh/CodeMirror</a>.
-  If you plan to hack on the code and contribute patches, the best way
-  to do it is to create a GitHub fork, and send pull requests.</p>
-
-  <h2 id="documention">Documentation</h2>
-
-  <p>The <a href="doc/manual.html">manual</a> is your first stop for
-  learning how to use this library. It starts with a quick explanation
-  of how to use the editor, and then describes the API in detail.</p>
+<link rel=stylesheet href="lib/codemirror.css">
+<link rel=stylesheet href="doc/docs.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>
+<script src="addon/edit/matchbrackets.js"></script>
 
-  <p>For those who want to learn more about the code, there is
-  a <a href="http://marijnhaverbeke.nl/blog/#cm-internals">series of
-  posts</a> on CodeMirror on my blog, and the
-  old <a href="doc/internals.html">overview of the editor
-  internals</a>.
-  The <a href="http://github.com/marijnh/CodeMirror">source code</a>
-  itself is, for the most part, also very readable.</p>
+<script src="doc/activebookmark.js"></script>
 
-  <h2 id="support">Support and bug reports</h2>
+<style>
+  .CodeMirror { height: auto; border: 1px solid #ddd; }
+  .CodeMirror-scroll { max-height: 200px; }
+  .CodeMirror pre { padding-left: 7px; line-height: 1.25; }
+</style>
 
-  <p>Community discussion, questions, and informal bug reporting is
-  done on
-  the <a href="http://groups.google.com/group/codemirror">CodeMirror
-  Google group</a>. There is a separate
-  group, <a href="http://groups.google.com/group/codemirror-announce">CodeMirror-announce</a>,
-  which is lower-volume, and is only used for major announcements—new
-  versions and such. These will be cross-posted to both groups, so you
-  don't need to subscribe to both.</p>
-
-  <p>Though bug reports through e-mail are responded to, the preferred
-  way to report bugs is to use
-  the <a href="http://github.com/marijnh/CodeMirror/issues">GitHub
-  issue tracker</a>. Before reporting a
-  bug, <a href="doc/reporting.html">read these pointers</a>. Also,
-  the issue tracker is for <em>bugs</em>, not requests for help.</p>
-
-  <p>When none of these seem fitting, you can
-  simply <a href="mailto:marijnh@gmail.com">e-mail the maintainer</a>
-  directly.</p>
-
-  <h2 id="supported">Supported browsers</h2>
-
-  <p>The following <em>desktop</em> browsers are able to run CodeMirror:</p>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="doc/logo.png"></a>
 
   <ul>
-    <li>Firefox 3 or higher</li>
-    <li>Chrome, any version</li>
-    <li>Safari 5.2 or higher</li>
-    <li>Opera 9 or higher (with some key-handling problems on OS X)</li>
-    <li>Internet Explorer 8 or higher<br>
-    <li>Internet Explorer 7 (standards mode) is usable, but buggy. It
-    has a <a href="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html">z-index
-    bug</a> that prevents CodeMirror from working properly.</li>
+    <li><a class=active data-default="true" href="#description">Home</a>
+    <li><a href="doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
   </ul>
-
-  <p>Note that CodeMirror is only supported in
-  <strong>standards</strong> mode. So not quirks mode,
-  but <em>also</em> not the quasi-standards mode that IE gives you
-  when you specify a transitional doctype. Simply using the
-  HTML5-style <code>&lt;!doctype html></code> is recommended.</li>
-
-  <p>Mobile browsers mostly kind of work, but, because of limitations
-  and their fundamentally different UI assumptions, show a lot of
-  quirks that are hard to work around.</p>
-
-  <h2 id="commercial">Commercial support</h2>
-
-  <p>CodeMirror is developed and maintained by me, Marijn Haverbeke,
-  in my own time. If your company is getting value out of CodeMirror,
-  please consider purchasing a support contract.</p>
-
   <ul>
-    <li>You'll be funding further work on CodeMirror.</li>
-    <li>You ensure that you get a quick response when you have a
-    problem, even when I am otherwise busy.</li>
+    <li><a href="#features">Features</a>
+    <li><a href="#community">Community</a>
+    <li><a href="#browsersupport">Browser support</a>
   </ul>
-
-  <p>CodeMirror support contracts exist in two
-  forms—<strong>basic</strong> at €100 per month,
-  and <strong>premium</strong> at €500 per
-  month. <a href="mailto:marijnh@gmail.com">Contact me</a> for further
-  information.</p>
-
 </div>
 
-<div class="right blk">
-
-  <a href="http://codemirror.net/codemirror.zip" class="download">Download the latest release</a>
-
-  <h2>Support CodeMirror</h2>
-
+<article>
+
+<section id=description class=first>
+  <p><strong>CodeMirror</strong> is a versatile text editor
+  implemented in JavaScript for the browser. It is specialized for
+  editing code, and comes with a number of language modes and addons
+  that implement more advanced editing functionaly.</p>
+
+  <p>A rich <a href="doc/manual.html#api">programming API</a> and a
+  CSS <a href="doc/manual.html#styling">theming</a> system are
+  available for customizing CodeMirror to fit your application, and
+  extending it with new functionality.</p>
+</section>
+
+<section id=demo>
+  <h2>This is CodeMirror</h2>
+  <form style="position: relative; margin-top: .5em;"><textarea id=demotext>
+<!-- Create a simple CodeMirror instance -->
+<link rel="stylesheet" href="lib/codemirror.css">
+<script src="lib/codemirror.js"></script>
+<script>
+  var editor = CodeMirror.fromTextArea(myTextarea, {
+    mode: "text/html"
+  });
+</script></textarea>
+  <select id="demolist" onchange="document.location = this.options[this.selectedIndex].value;">
+    <option value="#">Other demos...</option>
+    <option value="demo/complete.html">Autocompletion</option>
+    <option value="demo/folding.html">Code folding</option>
+    <option value="demo/theme.html">Themes</option>
+    <option value="demo/bidi.html">Bi-directional text</option>
+    <option value="demo/variableheight.html">Mixed font sizes</option>
+    <option value="demo/vim.html">Vim bindings</option>
+    <option value="demo/emacs.html">Emacs bindings</option>
+  </select></form>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
+      lineNumbers: true,
+      mode: "text/html",
+      matchBrackets: true
+    });
+  </script>
+  <div style="position: relative; margin: 1em 0;">
+    <a class="bigbutton left" href="http://codemirror.net/codemirror.zip">DOWNLOAD LATEST RELEASE</a>
+    <div><strong>version 3.15</strong> (<a href="doc/releases.html">Release notes</a>)</div>
+    <div>or use the <a href="doc/compress.html">minification helper</a></div>
+    <div style="position: absolute; top: 0; right: 0; text-align: right">
+      <span class="bigbutton right" onclick="document.getElementById('paypal').submit();">DONATE WITH PAYPAL</span>
+      <div style="position: relative">
+        or <span onclick="document.getElementById('bankinfo').style.display = 'block';" class=quasilink>Bank</span>,
+        <a href="https://www.gittip.com/marijnh">Gittip</a>,
+        <a href="https://flattr.com/profile/marijnh">Flattr</a><br>
+        <div id=bankinfo>
+          <span id=bankinfo_close onclick="document.getElementById('bankinfo').style.display = '';">×</span>
+          Bank: <i>Rabobank</i><br/>
+          Country: <i>Netherlands</i><br/>
+          SWIFT: <i>RABONL2U</i><br/>
+          Account: <i>147850770</i><br/>
+          Name: <i>Marijn Haverbeke</i><br/>
+          IBAN: <i>NL26 RABO 0147 8507 70</i>
+        </div>
+        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
+          <input type="hidden" name="cmd" value="_s-xclick"/>
+          <input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
+        </form>
+      </div>
+      <div>
+        Purchase <a href="http://codemirror.com">commercial support</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id=features>
+  <h2>Features</h2>
   <ul>
-    <li>Donate
-    (<span onclick="document.getElementById('paypal').submit();"
-    class="quasilink">Paypal</span>,
-    <span onclick="document.getElementById('bankinfo').style.display = 'block';"
-           class="quasilink">bank</span>,
-    <a href="https://www.gittip.com/marijnh">Gittip</a>, or
-    <a href="https://flattr.com/profile/marijnh">Flattr</a>)</li>
-    <li>Purchase <a href="#commercial">commercial support</a></li>
+    <li>Support for <a href="mode/index.html">over 60 languages</a> out of the box
+    <li><a href="doc/manual.html#addon_show-hint">Autocompletion</a> (<a href="demo/xmlcomplete.html">XML</a>)
+    <li><a href="doc/manual.html#addon_foldcode">Code folding</a>
+    <li><a href="doc/manual.html#option_extraKeys">Configurable</a> keybindings
+    <li><a href="demo/vim.html">Vim</a> and <a href="demo/emacs.html">Emacs</a> bindings
+    <li><a href="doc/manual.html#addon_search">Search and replace</a> interface
+    <li><a href="doc/manual.html#addon_matchbrackets">Bracket</a> and <a href="doc/manual.html#addon_matchtags">tag</a> matching
+    <li>Support for <a href="demo/buffers.html">split views</a>
+    <li><a href="doc/manual.html#addon_lint">Linter integration</a>
+    <li><a href="demo/variableheight.html">Mixing font sizes and styles</a>
+    <li><a href="demo/theme.html">Various themes</a>
+    <li>Able to <a href="demo/resize.html">resize to fit content</a>
+    <li><a href="doc/manual.html#mark_replacedWith">Inline</a> and <a href="doc/manual.html#setLineWidget">block</a> widgets
+    <li>Programmable <a href="demo/marker.html">gutters</a>
+    <li>Making ranges of text <a href="doc/manual.html#markText">styled, read-only, or atomic</a>
+    <li><a href="demo/bidi.html">Bi-directional text</a> support
+    <li>Many other <a href="doc/manual.html#api">methods</a> and <a href="doc/manual.html#addons">addons</a>...</a>
   </ul>
+</section>
+
+<section id=community>
+  <h2>Community</h2>
+
+  <p>CodeMirror is an open-source project shared under
+  an <a href="LICENSE">MIT license</a>. It is the editor used in
+  <a href="http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/">Light
+  Table</a>, <a href="http://brackets.io/">Adobe
+  Brackets</a>, <a href="https://script.google.com/">Google Apps
+  Script</a>, <a href="http://blog.bitbucket.org/2013/05/14/edit-your-code-in-the-cloud-with-bitbucket/">Bitbucket</a>,
+  and <a href="doc/realworld.html">many other projects</a>.</p>
+
+  <p>Development and bug tracking happens
+  on <a href="https://github.com/marijnh/CodeMirror/">github</a>
+  (<a href="http://marijnhaverbeke.nl/git/codemirror">alternate git
+  repository</a>).
+  Please <a href="http://codemirror.net/doc/reporting.html">read these
+  pointers</a> before submitting a bug. Use pull requests to submit
+  patches. All contributions must be released under the same MIT
+  license that CodeMirror uses.</p>
+
+  <p>Discussion around the project is done on
+  a <a href="groups.google.com/group/codemirror">mailing list</a>.
+  There is also
+  the <a href="groups.google.com/group/codemirror-announce">codemirror-announce</a>
+  list, which is only used for major announcements (such as new
+  versions). If needed, you can
+  contact <a href="mailto:marijnh@gmail.com">the maintainer</a>
+  directly.</p>
 
-  <p id="bankinfo" style="display: none;">
-    Bank: <i>Rabobank</i><br/>
-    Country: <i>Netherlands</i><br/>
-    SWIFT: <i>RABONL2U</i><br/>
-    Account: <i>147850770</i><br/>
-    Name: <i>Marijn Haverbeke</i><br/>
-    IBAN: <i>NL26 RABO 0147 8507 70</i>
-  </p>
-
-  <h2>Reading material</h2>
-
-  <ul>
-    <li><a href="doc/manual.html">User manual</a></li>
-    <li><a href="http://github.com/marijnh/CodeMirror">Browse the code</a></li>
-  </ul>
-
-  <h2 id=releases>Releases</h2>
-
-  <p class="rel">29-07-2013: <a href="http://codemirror.net/codemirror-3.15.zip">Version 3.15</a>:</p>
-
-  <ul class="rel-note">
-    <li>New modes: <a href="mode/jade/index.html">Jade</a>, <a href="mode/nginx/index.html">Nginx</a>.</li>
-    <li>New addons: <a href="demo/tern.html">Tern</a>, <a href="doc/manual.html#addon_matchtags">matchtags</a>, and <a href="doc/manual.html#addon_foldgutter">foldgutter</a>.</li>
-    <li>Introduced <a href="doc/manual.html#getHelper"><em>helper</em></a> concept (<a href="https://groups.google.com/forum/#!msg/codemirror/cOc0xvUUEUU/nLrX1-qnidgJ">context</a>).</li>
-    <li>New method: <a href="doc/manual.html#getModeAt"><code>getModeAt</code></a>.</li>
-    <li>New themes: base16 <a href="demo/theme.html?base16-dark">dark</a>/<a href="demo/theme.html?base16-light">light</a>, 3024 <a href="demo/theme.html?3024-night">dark</a>/<a href="demo/theme.html?3024-day">light</a>, <a href="demo/theme.html?tomorrow-night-eighties">tomorrow-night</a>.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/3.14.0...3.15.0">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">20-06-2013: <a href="http://codemirror.net/codemirror-3.14.zip">Version 3.14</a>:</p>
-
-  <ul class="rel-note">
-    <li>New
-    addons: <a href="doc/manual.html#addon_trailingspace">trailing
-    space highlight</a>, <a href="doc/manual.html#addon_xml-hint">XML
-    completion</a> (rewritten),
-    and <a href="doc/manual.html#addon_merge">diff merging</a>.</li>
-    <li><a href="doc/manual.html#markText"><code>markText</code></a>
-    and <a href="doc/manual.html#addLineWidget"><code>addLineWidget</code></a>
-    now take a <code>handleMouseEvents</code> option.</li>
-    <li>New methods: <a href="doc/manual.html#lineAtHeight"><code>lineAtHeight</code></a>,
-    <a href="doc/manual.html#getTokenTypeAt"><code>getTokenTypeAt</code></a>.</li>
-    <li>More precise cleanness-tracking
-    using <a href="doc/manual.html#changeGeneration"><code>changeGeneration</code></a>
-    and <a href="doc/manual.html#isClean"><code>isClean</code></a>.</li>
-    <li>Many extensions to <a href="demo/emacs.html">Emacs</a> mode
-    (prefixes, more navigation units, and more).</li>
-    <li>New
-    events <a href="doc/manual.html#event_keyHandled"><code>"keyHandled"</code></a>
-    and <a href="doc/manual.html#event_inputRead"><code>"inputRead"</code></a>.</li>
-    <li>Various improvements to <a href="mode/ruby/index.html">Ruby</a>,
-    <a href="mode/smarty/index.html">Smarty</a>, <a href="mode/sql/index.html">SQL</a>,
-    and <a href="demo/vim.html">Vim</a> modes.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/3.13.0...3.14.0">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">20-05-2013: <a href="http://codemirror.net/codemirror-3.13.zip">Version 3.13</a>:</p>
-
-  <ul class="rel-note">
-    <li>New modes: <a href="mode/cobol/index.html">COBOL</a> and <a href="mode/haml/index.html">HAML</a>.</li>
-    <li>New options: <a href="doc/manual.html#option_cursorScrollMargin"><code>cursorScrollMargin</code></a> and <a href="doc/manual.html#option_coverGutterNextToScrollbar"><code>coverGutterNextToScrollbar</code></a>.</li>
-    <li>New addon: <a href="doc/manual.html#addon_comment">commenting</a>.</li>
-    <li>More features added to the <a href="demo/vim.html">Vim keymap</a>.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.12...3.13.0">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">19-04-2013: <a href="http://codemirror.net/codemirror-3.12.zip">Version 3.12</a>:</p>
-
-  <ul class="rel-note">
-    <li>New mode: <a href="mode/gas/index.html">GNU assembler</a>.</li>
-    <li>New
-    options: <a href="doc/manual.html#option_maxHighlightLength"><code>maxHighlightLength</code></a>
-    and <a href="doc/manual.html#option_historyEventDelay"><code>historyEventDelay</code></a>.</li>
-    <li>Added <a href="doc/manual.html#mark_addToHistory"><code>addToHistory</code></a>
-    option for <code>markText</code>.</li>
-    <li>Various fixes to JavaScript tokenization and indentation corner cases.</li>
-    <li>Further improvements to the vim mode.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.11...v3.12">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">20-03-2013: <a href="http://codemirror.net/codemirror-3.11.zip">Version 3.11</a>:</p>
-
-  <ul class="rel-note">
-    <li><strong>Removed code:</strong> <code>collapserange</code>,
-    <code>formatting</code>, and <code>simple-hint</code>
-    addons. <code>plsql</code> and <code>mysql</code> modes
-    (use <a href="mode/sql/index.html"><code>sql</code></a> mode).</li>
-    <li><strong>Moved code:</strong> the range-finding functions for folding now have <a href="addon/fold/">their own files</a>.</li>
-    <li><strong>Changed interface:</strong>
-    the <a href="doc/manual.html#addon_continuecomment"><code>continuecomment</code></a>
-    addon now exposes an option, rather than a command.</li>
-    <li>New
-    modes: <a href="mode/css/scss.html">SCSS</a>, <a href="mode/tcl/index.html">Tcl</a>, <a href="mode/livescript/index.html">LiveScript</a>,
-    and <a href="mode/mirc/index.html">mIRC</a>.</li>
-    <li>New addons: <a href="demo/placeholder.html"><code>placeholder</code></a>, <a href="demo/html5complete.html">HTML completion</a>.</li>
-    <li>New
-    methods: <a href="doc/manual.html#hasFocus"><code>hasFocus</code></a>, <a href="doc/manual.html#defaultCharWidth"><code>defaultCharWidth</code></a>.</li>
-    <li>New events: <a href="doc/manual.html#event_beforeCursorEnter"><code>beforeCursorEnter</code></a>, <a href="doc/manual.html#event_renderLine"><code>renderLine</code></a>.</li>
-    <li>Many improvements to the <a href="doc/manual.html#addon_show-hint"><code>show-hint</code></a> completion
-    dialog addon.</li>
-    <li>Tweak behavior of by-word cursor motion.</li>
-    <li>Further improvements to the <a href="demo/vim.html">vim mode</a>.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.1...v3.11">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">21-02-2013: <a href="http://codemirror.net/codemirror-3.1.zip">Version 3.1</a>:</p>
-
-  <ul class="rel-note">
-    <li><strong>Incompatible:</strong> key handlers may
-    now <em>return</em>, rather
-    than <em>throw</em> <code>CodeMirror.Pass</code> to signal they
-    didn't handle the key.</li>
-    <li>Make documents a <a href="doc/manual.html#api_doc">first-class
-    construct</a>, support split views and subviews.</li>
-    <li>Add a <a href="doc/manual.html#addon_show-hint">new module</a>
-    for showing completion hints.
-    Deprecate <code>simple-hint.js</code>.</li>
-    <li>Extend <a href="mode/htmlmixed/index.html">htmlmixed mode</a>
-    to allow custom handling of script types.</li>
-    <li>Support an <code>insertLeft</code> option
-    to <a href="doc/manual.html#setBookmark"><code>setBookmark</code></a>.</li>
-    <li>Add an <a href="doc/manual.html#eachLine"><code>eachLine</code></a>
-    method to iterate over a document.</li>
-    <li>New addon modules: <a href="demo/markselection.html">selection
-    marking</a>, <a href="demo/lint.html">linting</a>,
-    and <a href="demo/closebrackets.html">automatic bracket
-    closing</a>.</li>
-    <li>Add <a href="doc/manual.html#event_beforeChange"><code>"beforeChange"</code></a>
-    and <a href="doc/manual.html#event_beforeSelectionChange"><code>"beforeSelectionChange"</code></a>
-    events.</li>
-    <li>Add <a href="doc/manual.html#event_hide"><code>"hide"</code></a>
-    and <a href="doc/manual.html#event_unhide"><code>"unhide"</code></a>
-    events to marked ranges.</li>
-    <li>Fix <a href="doc/manual.html#coordsChar"><code>coordsChar</code></a>'s
-    interpretation of its argument to match the documentation.</li>
-    <li>New modes: <a href="mode/turtle/index.html">Turtle</a>
-    and <a href="mode/q/index.html">Q</a>.</li>
-    <li>Further improvements to the <a href="demo/vim.html">vim mode</a>.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.01...v3.1">list of patches</a>.</li>
-  </ul>
-  
-
-  <p class="rel">25-01-2013: <a href="http://codemirror.net/codemirror-3.02.zip">Version 3.02</a>:</p>
-
-  <p class="rel-note">Single-bugfix release. Fixes a problem that
-  prevents CodeMirror instances from being garbage-collected after
-  they become unused.</p>
-
-  <p class="rel">21-01-2013: <a href="http://codemirror.net/codemirror-3.01.zip">Version 3.01</a>:</p>
-
-  <ul class="rel-note">
-    <li>Move all add-ons into an organized directory structure
-    under <a href="addon/"><code>/addon</code></a>. <strong>You might have to adjust your
-    paths.</strong></li>
-    <li>New
-    modes: <a href="mode/d/index.html">D</a>, <a href="mode/sass/index.html">Sass</a>, <a href="mode/apl/index.html">APL</a>, <a href="mode/sql/index.html">SQL</a>
-    (configurable), and <a href="mode/asterisk/index.html">Asterisk</a>.</li>
-    <li>Several bugfixes in right-to-left text support.</li>
-    <li>Add <a href="doc/manual.html#option_rtlMoveVisually"><code>rtlMoveVisually</code></a> option.</li>
-    <li>Improvements to vim keymap.</li>
-    <li>Add built-in (lightweight) <a href="doc/manual.html#addOverlay">overlay mode</a> support.</li>
-    <li>Support <code>showIfHidden</code> option for <a href="doc/manual.html#addLineWidget">line widgets</a>.</li>
-    <li>Add simple <a href="doc/manual.html#addon_python-hint">Python hinter</a>.</li>
-    <li>Bring back the <a href="doc/manual.html#option_fixedGutter"><code>fixedGutter</code></a> option.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0...v3.01">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">21-01-2013: <a href="http://codemirror.net/codemirror-2.38.zip">Version 2.38</a>:</p>
-
-  <p class="rel-note">Integrate some bugfixes, enhancements to the vim keymap, and new
-  modes
-  (<a href="mode/d/index.html">D</a>, <a href="mode/sass/index.html">Sass</a>, <a href="mode/apl/index.html">APL</a>)
-  from the v3 branch.</p>
-
-  <p class="rel">20-12-2012: <a href="http://codemirror.net/codemirror-2.37.zip">Version 2.37</a>:</p>
-
-  <ul class="rel-note">
-    <li>New mode: <a href="mode/sql/index.html">SQL</a> (will replace <a href="mode/plsql/index.html">plsql</a> and <a href="mode/mysql/index.html">mysql</a> modes).</li>
-    <li>Further work on the new VIM mode.</li>
-    <li>Fix Cmd/Ctrl keys on recent Operas on OS X.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v2.36...v2.37">list of patches</a>.</li>
-  </ul>
-
-  <p class="rel">10-12-2012: <a href="http://codemirror.net/codemirror-3.0.zip">Version 3.0</a>:</p>
-
-  <p class="rel-note"><strong>New major version</strong>. Only
-  partially backwards-compatible. See
-  the <a href="doc/upgrade_v3.html">upgrading guide</a> for more
-  information. Changes since release candidate 2:</p>
-
-  <ul class="rel-note">
-    <li>Rewritten VIM mode.</li>
-    <li>Fix a few minor scrolling and sizing issues.</li>
-    <li>Work around Safari segfault when dragging.</li>
-    <li>Full <a href="https://github.com/marijnh/CodeMirror/compare/v3.0rc2...v3.0">list of patches</a>.</li>
-  </ul>
-  
-  <p><a href="doc/oldrelease.html">Older releases...</a></p>
-
-</div></div>
-
-<div style="height: 2em">&nbsp;</div>
-
-  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
-    <input type="hidden" name="cmd" value="_s-xclick"/>
-    <input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
-  </form>
-
-  </body>
-</html>
+  <p>A list of CodeMirror-related software that is not part of the
+  main distribution is maintained
+  on <a href="https://github.com/marijnh/CodeMirror/wiki/CodeMirror-addons">our
+  wiki</a>. Feel free to add your project.</p>
+</section>
+
+<section id=browsersupport>
+  <h2>Browser support</h2>
+  <p>The <em>desktop</em> versions of the following browsers,
+  in <em>standards mode</em> (HTML5 <code>&lt;!doctype html></code>
+  recommended) are supported:</p>
+  <table style="margin-bottom: 1em">
+    <tr><th>Firefox</th><td>version 3 and up</td></tr>
+    <tr><th>Chrome</th><td>any version</td></tr>
+    <tr><th>Safari</th><td>version 5.2 and up</td></tr>
+    <tr><th style="padding-right: 1em;">Internet Explorer</th><td>version 8 and up</td></tr>
+    <tr><th>Opera</th><td>version 9 and up</td></tr>
+  </table>
+  <p>Modern mobile browsers tend to partly work. Bug reports and
+  patches for mobile support, but the maintainer does not have the
+  time budget to actually work on it himself.</p>
+</section>
+
+</article>
diff --git a/mode/apl/index.html b/mode/apl/index.html
index 119ff17f..f8282ac4 100644
--- a/mode/apl/index.html
+++ b/mode/apl/index.html
@@ -1,20 +1,32 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: APL mode</title>
-    <link rel="stylesheet" href="../../doc/docs.css"> 
-    <link rel="stylesheet" href="../../lib/codemirror.css"> 
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="./apl.js"></script>
-    <style>
+
+<title>CodeMirror: APL mode</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/matchbrackets.js"></script>
+<script src="./apl.js"></script>
+<style>
 	.CodeMirror { border: 2px inset #dee; }
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: APL mode</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">APL</a>
+  </ul>
+</div>
 
+<article>
+<h2>APL mode</h2>
 <form><textarea id="code" name="code">
 ⍝ Conway's game of life
 
@@ -57,5 +69,4 @@ gen ← {' #'[(life ⍣ ⍵) board]}
     have popups etc.</p>
 
     <p><strong>MIME types defined:</strong> <code>text/apl</code> (APL code)</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/asterisk/index.html b/mode/asterisk/index.html
index 0a796a01..6abdecb5 100644
--- a/mode/asterisk/index.html
+++ b/mode/asterisk/index.html
@@ -1,20 +1,33 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Asterisk dialplan mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="asterisk.js"></script>
-    <style>
+
+<title>CodeMirror: Asterisk dialplan mode</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="asterisk.js"></script>
+<style>
       .CodeMirror {border: 1px solid #999;}
       .cm-s-default span.cm-arrow { color: red; }
     </style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Asterisk dialplan mode</h1>
-    <form><textarea id="code" name="code">
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Asterisk dialplan</a>
+  </ul>
+</div>
+
+<article>
+<h2>Asterisk dialplan mode</h2>
+<form><textarea id="code" name="code">
 ; extensions.conf - the Asterisk dial plan
 ;
 
@@ -138,5 +151,4 @@ exten => 8500,n,Goto(s,6)
 
     <p><strong>MIME types defined:</strong> <code>text/x-asterisk</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/clike/index.html b/mode/clike/index.html
index 5f90394d..58ba24c3 100644
--- a/mode/clike/index.html
+++ b/mode/clike/index.html
@@ -1,18 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: C-like mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="clike.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border: 2px inset #dee;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: C-like mode</h1>
 
+<title>CodeMirror: C-like mode</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/matchbrackets.js"></script>
+<script src="clike.js"></script>
+<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">C-like</a>
+  </ul>
+</div>
+
+<article>
+<h2>C-like mode</h2>
 <form><textarea id="code" name="code">
 /* C demo code */
 
@@ -99,5 +111,4 @@ void* zmq_thread_init(void* zmq_context, int signal_fd) {
     (C code), <code>text/x-c++src</code> (C++
     code), <code>text/x-java</code> (Java
     code), <code>text/x-csharp</code> (C#).</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/clike/scala.html b/mode/clike/scala.html
index f3c7eea4..e9acc049 100644
--- a/mode/clike/scala.html
+++ b/mode/clike/scala.html
@@ -1,29 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: C-like mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <link rel="stylesheet" href="../../theme/ambiance.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="clike.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>
-      body
-      {
-        margin: 0;
-        padding: 0;
-        max-width:inherit;
-        height: 100%;
-      }
-      html, form, .CodeMirror, .CodeMirror-scroll
-      {
-        height: 100%;        
-      }
-    </style>
-  </head>
-  <body>
+
+<title>CodeMirror: Scala mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/ambiance.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="clike.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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Scala</a>
+  </ul>
+</div>
+
+<article>
+<h2>Scala mode</h2>
 <form>
 <textarea id="code" name="code">
 
@@ -763,5 +764,4 @@
         mode: "text/x-scala"
       });
     </script>
-  </body>
-</html>
+  </article>
diff --git a/mode/clojure/index.html b/mode/clojure/index.html
index bfe6fc95..5a50c566 100644
--- a/mode/clojure/index.html
+++ b/mode/clojure/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Clojure mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="clojure.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Clojure mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Clojure mode</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="clojure.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Clojure</a>
+  </ul>
+</div>
+
+<article>
+<h2>Clojure mode</h2>
+<form><textarea id="code" name="code">
 ; Conway's Game of Life, based on the work of:
 ;; Laurent Petit https://gist.github.com/1200343
 ;; Christophe Grand http://clj-me.cgrand.net/2011/08/19/conways-game-of-life
@@ -72,5 +85,4 @@
 
     <p><strong>MIME types defined:</strong> <code>text/x-clojure</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/cobol/index.html b/mode/cobol/index.html
index 71cc2fa1..326e398b 100644
--- a/mode/cobol/index.html
+++ b/mode/cobol/index.html
@@ -1,35 +1,36 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: COBOL mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="cobol.js"></script>
-    <link rel="stylesheet" href="../../theme/neat.css">
-    <link rel="stylesheet" href="../../theme/elegant.css">
-    <link rel="stylesheet" href="../../theme/erlang-dark.css">
-    <link rel="stylesheet" href="../../theme/night.css">
-    <link rel="stylesheet" href="../../theme/monokai.css">
-    <link rel="stylesheet" href="../../theme/cobalt.css">
-    <link rel="stylesheet" href="../../theme/eclipse.css">
-    <link rel="stylesheet" href="../../theme/rubyblue.css">
-    <link rel="stylesheet" href="../../theme/lesser-dark.css">
-    <link rel="stylesheet" href="../../theme/xq-dark.css">
-    <link rel="stylesheet" href="../../theme/xq-light.css">
-    <link rel="stylesheet" href="../../theme/ambiance.css">
-    <link rel="stylesheet" href="../../theme/blackboard.css">
-    <link rel="stylesheet" href="../../theme/vibrant-ink.css">
-    <link rel="stylesheet" href="../../theme/solarized.css">
-    <link rel="stylesheet" href="../../theme/twilight.css">
-    <link rel="stylesheet" href="../../theme/midnight.css">
-    <link rel="stylesheet" href="../../addon/dialog/dialog.css">
-    <script src="../../addon/selection/active-line.js"></script>
-    <script src="../../addon/search/search.js"></script>
-    <script src="../../addon/dialog/dialog.js"></script>
-    <script src="../../addon/search/searchcursor.js"></script>
-    <style>
+
+<title>CodeMirror: COBOL mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/neat.css">
+<link rel="stylesheet" href="../../theme/elegant.css">
+<link rel="stylesheet" href="../../theme/erlang-dark.css">
+<link rel="stylesheet" href="../../theme/night.css">
+<link rel="stylesheet" href="../../theme/monokai.css">
+<link rel="stylesheet" href="../../theme/cobalt.css">
+<link rel="stylesheet" href="../../theme/eclipse.css">
+<link rel="stylesheet" href="../../theme/rubyblue.css">
+<link rel="stylesheet" href="../../theme/lesser-dark.css">
+<link rel="stylesheet" href="../../theme/xq-dark.css">
+<link rel="stylesheet" href="../../theme/xq-light.css">
+<link rel="stylesheet" href="../../theme/ambiance.css">
+<link rel="stylesheet" href="../../theme/blackboard.css">
+<link rel="stylesheet" href="../../theme/vibrant-ink.css">
+<link rel="stylesheet" href="../../theme/solarized.css">
+<link rel="stylesheet" href="../../theme/twilight.css">
+<link rel="stylesheet" href="../../theme/midnight.css">
+<link rel="stylesheet" href="../../addon/dialog/dialog.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="cobol.js"></script>
+<script src="../../addon/selection/active-line.js"></script>
+<script src="../../addon/search/search.js"></script>
+<script src="../../addon/dialog/dialog.js"></script>
+<script src="../../addon/search/searchcursor.js"></script>
+<style>
         .CodeMirror {
           border: 1px solid #eee;
           font-size : 20px;
@@ -37,8 +38,23 @@
         }
         .CodeMirror-activeline-background {background: #555555 !important;}
     </style>
-  </head>
-  <body>
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">COBOL</a>
+  </ul>
+</div>
+
+<article>
+<h2>COBOL mode</h2>
+
     <p> Select Theme <select onchange="selectTheme()" id="selectTheme">
         <option>default</option>
         <option>ambiance</option>
@@ -191,5 +207,4 @@
         }
       }
     </script>
-  </body>
-</html>
+  </article>
diff --git a/mode/coffeescript/index.html b/mode/coffeescript/index.html
index ee72b8d2..6e6fde52 100644
--- a/mode/coffeescript/index.html
+++ b/mode/coffeescript/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: CoffeeScript mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="coffeescript.js"></script>
-    <style>.CodeMirror {border-top: 1px solid silver; border-bottom: 1px solid silver;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: CoffeeScript mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: CoffeeScript mode</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="coffeescript.js"></script>
+<style>.CodeMirror {border-top: 1px solid silver; border-bottom: 1px solid silver;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">CoffeeScript</a>
+  </ul>
+</div>
+
+<article>
+<h2>CoffeeScript mode</h2>
+<form><textarea id="code" name="code">
 # CoffeeScript mode for CodeMirror
 # Copyright (c) 2011 Jeff Pickhardt, released under
 # the MIT License.
@@ -724,5 +737,4 @@ wrapper::value = -> this._wrapped
 
     <p>The CoffeeScript mode was written by Jeff Pickhardt (<a href="LICENSE">license</a>).</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/commonlisp/index.html b/mode/commonlisp/index.html
index f9766a84..d48be8d2 100644
--- a/mode/commonlisp/index.html
+++ b/mode/commonlisp/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Common Lisp mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="commonlisp.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Common Lisp mode</h1>
-    <form><textarea id="code" name="code">(in-package :cl-postgres)
+
+<title>CodeMirror: Common Lisp mode</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="commonlisp.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Common Lisp</a>
+  </ul>
+</div>
+
+<article>
+<h2>Common Lisp mode</h2>
+<form><textarea id="code" name="code">(in-package :cl-postgres)
 
 ;; These are used to synthesize reader and writer names for integer
 ;; reading/writing functions when the amount of bytes and the
@@ -161,5 +174,4 @@ when UTF-8 support is enabled."
 
     <p><strong>MIME types defined:</strong> <code>text/x-common-lisp</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/css/index.html b/mode/css/index.html
index ae2c3bfc..1d1865e2 100644
--- a/mode/css/index.html
+++ b/mode/css/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: CSS mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="css.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: CSS mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: CSS mode</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="css.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">CSS</a>
+  </ul>
+</div>
+
+<article>
+<h2>CSS mode</h2>
+<form><textarea id="code" name="code">
 /* Some example CSS */
 
 @import url("something.css");
@@ -54,5 +67,4 @@ code {
 
     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#css_*">normal</a>,  <a href="../../test/index.html#verbose,css_*">verbose</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/css/scss.html b/mode/css/scss.html
index b90cbe87..72781c0d 100644
--- a/mode/css/scss.html
+++ b/mode/css/scss.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: SCSS mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="css.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: SCSS mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: SCSS mode</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="css.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">SCSS</a>
+  </ul>
+</div>
+
+<article>
+<h2>SCSS mode</h2>
+<form><textarea id="code" name="code">
 /* Some example SCSS */
 
 @import "compass/css3";
@@ -141,5 +154,4 @@ code {
 
     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>,  <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/d/index.html b/mode/d/index.html
index 13332727..8b25fcc5 100755
--- a/mode/d/index.html
+++ b/mode/d/index.html
@@ -1,18 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: D mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="d.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border: 2px inset #dee;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: D mode</h1>
 
+<title>CodeMirror: D mode</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/matchbrackets.js"></script>
+<script src="d.js"></script>
+<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">D</a>
+  </ul>
+</div>
+
+<article>
+<h2>D mode</h2>
 <form><textarea id="code" name="code">
 /* D demo code // copied from phobos/sd/metastrings.d */
 // Written in the D programming language.
@@ -258,5 +270,4 @@ deprecated alias parseUinteger ParseInteger;
 
     <p><strong>MIME types defined:</strong> <code>text/x-d</code>
     .</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/diff/index.html b/mode/diff/index.html
index 55602520..6ceae8b3 100644
--- a/mode/diff/index.html
+++ b/mode/diff/index.html
@@ -1,23 +1,36 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Diff mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="diff.js"></script>
-    <style>
+
+<title>CodeMirror: Diff mode</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="diff.js"></script>
+<style>
       .CodeMirror {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
       span.cm-meta {color: #a0b !important;}
       span.cm-error { background-color: black; opacity: 0.4;}
       span.cm-error.cm-string { background-color: red; }
       span.cm-error.cm-tag { background-color: #2b2; }
     </style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Diff mode</h1>
-    <form><textarea id="code" name="code">
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Diff</a>
+  </ul>
+</div>
+
+<article>
+<h2>Diff mode</h2>
+<form><textarea id="code" name="code">
 diff --git a/index.html b/index.html
 index c1d9156..7764744 100644
 --- a/index.html
@@ -101,5 +114,4 @@ index 04646a9..9a39cc7 100644
 
     <p><strong>MIME types defined:</strong> <code>text/x-diff</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/ecl/index.html b/mode/ecl/index.html
index 0ba88c39..f4b612d6 100644
--- a/mode/ecl/index.html
+++ b/mode/ecl/index.html
@@ -1,16 +1,30 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CodeMirror: ECL mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="ecl.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border: 1px solid black;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: ECL mode</h1>
-    <form><textarea id="code" name="code">
+<!doctype html>
+
+<title>CodeMirror: ECL mode</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="ecl.js"></script>
+<style>.CodeMirror {border: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">ECL</a>
+  </ul>
+</div>
+
+<article>
+<h2>ECL mode</h2>
+<form><textarea id="code" name="code">
 /*
 sample useless code to demonstrate ecl syntax highlighting
 this is a multiline comment!
@@ -35,5 +49,4 @@ output(d);
     <p>Based on CodeMirror's clike mode.  For more information see <a href="http://hpccsystems.com">HPCC Systems</a> web site.</p>
     <p><strong>MIME types defined:</strong> <code>text/x-ecl</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/erlang/index.html b/mode/erlang/index.html
index 5bb81f66..e63e2312 100644
--- a/mode/erlang/index.html
+++ b/mode/erlang/index.html
@@ -1,19 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Erlang mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="erlang.js"></script>
-    <link rel="stylesheet" href="../../theme/erlang-dark.css">
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Erlang mode</h1>
 
+<title>CodeMirror: Erlang mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/erlang-dark.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="erlang.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Erlang</a>
+  </ul>
+</div>
+
+<article>
+<h2>Erlang mode</h2>
 <form><textarea id="code" name="code">
 %% -*- mode: erlang; erlang-indent-level: 2 -*-
 %%% Created :  7 May 2012 by mats cronqvist <masse@klarna.com>
@@ -60,5 +72,4 @@ expand_recs(_,Term) ->
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-erlang</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/gas/index.html b/mode/gas/index.html
index 7684bc18..cd8a2ff5 100644
--- a/mode/gas/index.html
+++ b/mode/gas/index.html
@@ -1,18 +1,30 @@
 <!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>CodeMirror: Gas mode</title>
-        <link rel="stylesheet" href="../../lib/codemirror.css">
-        <script src="../../lib/codemirror.js"></script>
-        <script src="gas.js"></script>
-        <link rel="stylesheet" href="../../doc/docs.css">
-        <style>.CodeMirror {border: 2px inset #dee;}</style>
-    </head>
-    <body>
-        <h1>CodeMirror: Gas mode</h1>
-
-        <form>
+
+<title>CodeMirror: Gas mode</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="gas.js"></script>
+<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Gas</a>
+  </ul>
+</div>
+
+<article>
+<h2>Gas mode</h2>
+<form>
 <textarea id="code" name="code">
 .syntax unified
 .global main
@@ -53,5 +65,4 @@ message:
         directives for the supplied architecture.
 
         <p><strong>MIME types defined:</strong> <code>text/x-gas</code></p>
-    </body>
-</html>
+    </article>
diff --git a/mode/gfm/index.html b/mode/gfm/index.html
index 826a96d2..b71cd5c7 100644
--- a/mode/gfm/index.html
+++ b/mode/gfm/index.html
@@ -1,27 +1,36 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: GFM mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/mode/overlay.js"></script>
-    <script src="../xml/xml.js"></script>
-    <script src="../markdown/markdown.js"></script>
-    <script src="gfm.js"></script>
-    
-    <!-- Code block highlighting modes -->
-    <script src="../javascript/javascript.js"></script>
-    <script src="../css/css.js"></script>
-    <script src="../htmlmixed/htmlmixed.js"></script>
-    <script src="../clike/clike.js"></script>
-    
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: GFM mode</h1>
 
+<title>CodeMirror: GFM mode</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="../xml/xml.js"></script>
+<script src="../markdown/markdown.js"></script>
+<script src="gfm.js"></script>
+<script src="../javascript/javascript.js"></script>
+<script src="../css/css.js"></script>
+<script src="../htmlmixed/htmlmixed.js"></script>
+<script src="../clike/clike.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">GFM</a>
+  </ul>
+</div>
+
+<article>
+<h2>GFM mode</h2>
 <form><textarea id="code" name="code">
 GitHub Flavored Markdown
 ========================
@@ -70,5 +79,4 @@ See http://github.github.com/github-flavored-markdown/.
 
     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#gfm_*">normal</a>,  <a href="../../test/index.html#verbose,gfm_*">verbose</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/go/index.html b/mode/go/index.html
index 8a6aafca..3673fa0b 100644
--- a/mode/go/index.html
+++ b/mode/go/index.html
@@ -1,19 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Go mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <link rel="stylesheet" href="../../theme/elegant.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="go.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border:1px solid #999; background:#ffc}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: Go mode</h1>
 
+<title>CodeMirror: Go mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/elegant.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="go.js"></script>
+<style>.CodeMirror {border:1px solid #999; background:#ffc}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Go</a>
+  </ul>
+</div>
+
+<article>
+<h2>Go mode</h2>
 <form><textarea id="code" name="code">
 // Prime Sieve in Go.
 // Taken from the Go specification.
@@ -70,5 +82,4 @@ func main() {
     </script>
 
     <p><strong>MIME type:</strong> <code>text/x-go</code></p>
-  </body>
-</html>
+  </article>
diff --git a/mode/groovy/index.html b/mode/groovy/index.html
index 3d395957..f5efdf75 100644
--- a/mode/groovy/index.html
+++ b/mode/groovy/index.html
@@ -1,18 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Groovy mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="groovy.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border-top: 1px solid #500; border-bottom: 1px solid #500;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: Groovy mode</h1>
 
+<title>CodeMirror: Groovy mode</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/matchbrackets.js"></script>
+<script src="groovy.js"></script>
+<style>.CodeMirror {border-top: 1px solid #500; border-bottom: 1px solid #500;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Groovy</a>
+  </ul>
+</div>
+
+<article>
+<h2>Groovy mode</h2>
 <form><textarea id="code" name="code">
 //Pattern for groovy script
 def p = ~/.*\.groovy/
@@ -69,5 +81,4 @@ def change(currency, amount) {
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-groovy</code></p>
-  </body>
-</html>
+  </article>
diff --git a/mode/haml/index.html b/mode/haml/index.html
index 7da378fc..a7378755 100644
--- a/mode/haml/index.html
+++ b/mode/haml/index.html
@@ -1,21 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: HAML mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../xml/xml.js"></script>
-    <script src="../htmlmixed/htmlmixed.js"></script>
-    <script src="../javascript/javascript.js"></script>
-    <script src="../ruby/ruby.js"></script>
-    <script src="haml.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: HAML mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: HAML mode</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="../xml/xml.js"></script>
+<script src="../htmlmixed/htmlmixed.js"></script>
+<script src="../javascript/javascript.js"></script>
+<script src="../ruby/ruby.js"></script>
+<script src="haml.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">HAML</a>
+  </ul>
+</div>
+
+<article>
+<h2>HAML mode</h2>
+<form><textarea id="code" name="code">
 !!!
 #content
 .left.column(title="title"){:href => "/hello", :test => "#{hello}_#{world}"}
@@ -63,5 +76,4 @@
 
     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#haml_*">normal</a>,  <a href="../../test/index.html#verbose,haml_*">verbose</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/haskell/index.html b/mode/haskell/index.html
index 56307b8a..056b01d4 100644
--- a/mode/haskell/index.html
+++ b/mode/haskell/index.html
@@ -1,19 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Haskell mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="haskell.js"></script>
-    <link rel="stylesheet" href="../../theme/elegant.css">
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Haskell mode</h1>
 
+<title>CodeMirror: Haskell mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/elegant.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="haskell.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Haskell</a>
+  </ul>
+</div>
+
+<article>
+<h2>Haskell mode</h2>
 <form><textarea id="code" name="code">
 module UniquePerms (
     uniquePerms
@@ -58,5 +70,4 @@ permBag bs = concatMap (\(f,cs) -> map (f:) $ permBag cs) . oneOfEach $ bs
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-haskell</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/haxe/index.html b/mode/haxe/index.html
index 1125741a..ec3b8e0e 100644
--- a/mode/haxe/index.html
+++ b/mode/haxe/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Haxe mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="haxe.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: Haxe mode</h1>
+
+<title>CodeMirror: Haxe mode</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="haxe.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Haxe</a>
+  </ul>
+</div>
+
+<article>
+<h2>Haxe mode</h2>
+
 
 <div><textarea id="code" name="code">
 import one.two.Three;
@@ -86,5 +100,4 @@ enum Color
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-haxe</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/htmlembedded/index.html b/mode/htmlembedded/index.html
index 5a37dd63..4ab90f7d 100644
--- a/mode/htmlembedded/index.html
+++ b/mode/htmlembedded/index.html
@@ -1,21 +1,33 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Html Embedded Scripts mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../xml/xml.js"></script>
-    <script src="../javascript/javascript.js"></script>
-    <script src="../css/css.js"></script>
-    <script src="../htmlmixed/htmlmixed.js"></script>
-    <script src="htmlembedded.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Html Embedded Scripts mode</h1>
 
+<title>CodeMirror: Html Embedded Scripts mode</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="../xml/xml.js"></script>
+<script src="../javascript/javascript.js"></script>
+<script src="../css/css.js"></script>
+<script src="../htmlmixed/htmlmixed.js"></script>
+<script src="htmlembedded.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Html Embedded Scripts</a>
+  </ul>
+</div>
+
+<article>
+<h2>Html Embedded Scripts mode</h2>
 <form><textarea id="code" name="code">
 <%
 function hello(who) {
@@ -45,5 +57,4 @@ This is an example of EJS (embedded javascript)
 
     <p><strong>MIME types defined:</strong> <code>application/x-aspx</code> (ASP.NET), 
     <code>application/x-ejs</code> (Embedded Javascript), <code>application/x-jsp</code> (JavaServer Pages)</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/htmlmixed/index.html b/mode/htmlmixed/index.html
index c56559e5..b4617435 100644
--- a/mode/htmlmixed/index.html
+++ b/mode/htmlmixed/index.html
@@ -1,21 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: HTML mixed mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../xml/xml.js"></script>
-    <script src="../javascript/javascript.js"></script>
-    <script src="../css/css.js"></script>
-    <script src="../vbscript/vbscript.js"></script>
-    <script src="htmlmixed.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: HTML mixed mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: HTML mixed mode</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="../xml/xml.js"></script>
+<script src="../javascript/javascript.js"></script>
+<script src="../css/css.js"></script>
+<script src="../vbscript/vbscript.js"></script>
+<script src="htmlmixed.js"></script>
+<style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">HTML mixed</a>
+  </ul>
+</div>
+
+<article>
+<h2>HTML mixed mode</h2>
+<form><textarea id="code" name="code">
 <html style="color: green">
   <!-- this is a comment -->
   <head>
@@ -69,5 +82,4 @@
     (redefined, only takes effect if you load this parser after the
     XML parser).</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/http/index.html b/mode/http/index.html
index 124eb84f..705085e2 100644
--- a/mode/http/index.html
+++ b/mode/http/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: HTTP mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="http.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: HTTP mode</h1>
+
+<title>CodeMirror: HTTP mode</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="http.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">HTTP</a>
+  </ul>
+</div>
+
+<article>
+<h2>HTTP mode</h2>
+
 
 <div><textarea id="code" name="code">
 POST /somewhere HTTP/1.1
@@ -28,5 +42,4 @@ This is the request body!
     </script>
 
     <p><strong>MIME types defined:</strong> <code>message/http</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/index.html b/mode/index.html
new file mode 100644
index 00000000..e228c343
--- /dev/null
+++ b/mode/index.html
@@ -0,0 +1,106 @@
+<!doctype html>
+
+<title>CodeMirror: Language Modes</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="#">Language modes</a>
+  </ul>
+</div>
+
+<article>
+
+<h2>Language modes</h2>
+
+<p>This is a list of every mode in the distribution. Each mode lives
+in a subdirectory of the <code>mode/</code> directory, and typically
+defines a single JavaScript file that implements the mode. Loading
+such file will make the language available to CodeMirror, through
+the <a href="manual.html#option_mode"><code>mode</code></a>
+option.</p>
+
+<div style="-webkit-columns: 100px 2; -moz-columns: 100px 2; columns: 100px 2;">
+    <ul>
+      <li><a href="apl/index.html">APL</a></li>
+      <li><a href="asterisk/index.html">Asterisk dialplan</a></li>
+      <li><a href="clike/index.html">C, C++, C#</a></li>
+      <li><a href="clojure/index.html">Clojure</a></li>
+      <li><a href="cobol/index.html">COBOL</a></li>
+      <li><a href="coffeescript/index.html">CoffeeScript</a></li>
+      <li><a href="commonlisp/index.html">Common Lisp</a></li>
+      <li><a href="css/index.html">CSS</a></li>
+      <li><a href="python/index.html">Cython</a></li>
+      <li><a href="d/index.html">D</a></li>
+      <li><a href="diff/index.html">diff</a></li>
+      <li><a href="ecl/index.html">ECL</a></li>
+      <li><a href="erlang/index.html">Erlang</a></li>
+      <li><a href="gas/index.html">Gas</a> (AT&amp;T-style assembly)</li>
+      <li><a href="go/index.html">Go</a></li>
+      <li><a href="groovy/index.html">Groovy</a></li>
+      <li><a href="haml/index.html">HAML</a></li>
+      <li><a href="haskell/index.html">Haskell</a></li>
+      <li><a href="haxe/index.html">Haxe</a></li>
+      <li><a href="htmlembedded/index.html">HTML embedded scripts</a></li>
+      <li><a href="htmlmixed/index.html">HTML mixed-mode</a></li>
+      <li><a href="http/index.html">HTTP</a></li>
+      <li><a href="clike/index.html">Java</a></li>
+      <li><a href="jade/index.html">Jade</a></li>
+      <li><a href="javascript/index.html">JavaScript</a></li>
+      <li><a href="jinja2/index.html">Jinja2</a></li>
+      <li><a href="less/index.html">LESS</a></li>
+      <li><a href="livescript/index.html">LiveScript</a></li>
+      <li><a href="lua/index.html">Lua</a></li>
+      <li><a href="markdown/index.html">Markdown</a> (<a href="gfm/index.html">GitHub-flavour</a>)</li>
+      <li><a href="mirc/index.html">mIRC</a></li>
+      <li><a href="nginx/index.html">Nginx</a></li>
+      <li><a href="ntriples/index.html">NTriples</a></li>
+      <li><a href="ocaml/index.html">OCaml</a></li>
+      <li><a href="pascal/index.html">Pascal</a></li>
+      <li><a href="perl/index.html">Perl</a></li>
+      <li><a href="php/index.html">PHP</a></li>
+      <li><a href="pig/index.html">Pig Latin</a></li>
+      <li><a href="properties/index.html">Properties files</a></li>
+      <li><a href="python/index.html">Python</a></li>
+      <li><a href="q/index.html">Q</a></li>
+      <li><a href="r/index.html">R</a></li>
+      <li>RPM <a href="rpm/spec/index.html">spec</a> and <a href="rpm/changes/index.html">changelog</a></li>
+      <li><a href="rst/index.html">reStructuredText</a></li>
+      <li><a href="ruby/index.html">Ruby</a></li>
+      <li><a href="rust/index.html">Rust</a></li>
+      <li><a href="sass/index.html">Sass</a></li>
+      <li><a href="clike/scala.html">Scala</a></li>
+      <li><a href="scheme/index.html">Scheme</a></li>
+      <li><a href="css/scss.html">SCSS</a></li>
+      <li><a href="shell/index.html">Shell</a></li>
+      <li><a href="sieve/index.html">Sieve</a></li>
+      <li><a href="smalltalk/index.html">Smalltalk</a></li>
+      <li><a href="smarty/index.html">Smarty</a></li>
+      <li><a href="smartymixed/index.html">Smarty/HTML mixed</a></li>
+      <li><a href="sql/index.html">SQL</a> (several dialects)</li>
+      <li><a href="sparql/index.html">SPARQL</a></li>
+      <li><a href="stex/index.html">sTeX, LaTeX</a></li>
+      <li><a href="tcl/index.html">Tcl</a></li>
+      <li><a href="tiddlywiki/index.html">Tiddlywiki</a></li>
+      <li><a href="tiki/index.html">Tiki wiki</a></li>
+      <li><a href="turtle/index.html">Turtle</a></li>
+      <li><a href="vb/index.html">VB.NET</a></li>
+      <li><a href="vbscript/index.html">VBScript</a></li>
+      <li><a href="velocity/index.html">Velocity</a></li>
+      <li><a href="verilog/index.html">Verilog</a></li>
+      <li><a href="xml/index.html">XML/HTML</a></li>
+      <li><a href="xquery/index.html">XQuery</a></li>
+      <li><a href="yaml/index.html">YAML</a></li>
+      <li><a href="z80/index.html">Z80</a></li>
+    </ul>
+  </div>
+
+</article>
diff --git a/mode/jade/index.html b/mode/jade/index.html
index 0e68ba8a..e22b15e6 100644
--- a/mode/jade/index.html
+++ b/mode/jade/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Jade Templating Mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="jade.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Jade Templating Mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Jade Templating Mode</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="jade.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Jade Templating Mode</a>
+  </ul>
+</div>
+
+<article>
+<h2>Jade Templating Mode</h2>
+<form><textarea id="code" name="code">
 doctype 5
   html
     head
@@ -50,5 +63,4 @@ doctype 5
     <h3>The Jade Templating Mode</h3>
       <p> Created by Drew Bratcher. Managed as part of an Adobe Brackets extension at <a href="https://github.com/dbratcher/brackets-jade">https://github.com/dbratcher/brackets-jade</a>.</p>
     <p><strong>MIME type defined:</strong> <code>text/x-jade</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/javascript/index.html b/mode/javascript/index.html
index 0db35219..45d70ffd 100644
--- a/mode/javascript/index.html
+++ b/mode/javascript/index.html
@@ -1,19 +1,33 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: JavaScript mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="../../addon/comment/continuecomment.js"></script>
-    <script src="../../addon/comment/comment.js"></script>
-    <script src="javascript.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: JavaScript mode</h1>
+
+<title>CodeMirror: JavaScript mode</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/matchbrackets.js"></script>
+<script src="../../addon/comment/continuecomment.js"></script>
+<script src="../../addon/comment/comment.js"></script>
+<script src="javascript.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">JavaScript</a>
+  </ul>
+</div>
+
+<article>
+<h2>JavaScript mode</h2>
+
 
 <div><textarea id="code" name="code">
 // Demo code (the actual new parser character stream implementation)
@@ -90,5 +104,4 @@ StringStream.prototype = {
     </p>
 
     <p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/javascript/typescript.html b/mode/javascript/typescript.html
index 58315e7a..9cc5f493 100644
--- a/mode/javascript/typescript.html
+++ b/mode/javascript/typescript.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: TypeScript mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="javascript.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: TypeScript mode</h1>
+
+<title>CodeMirror: TypeScript mode</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="javascript.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">TypeScript</a>
+  </ul>
+</div>
+
+<article>
+<h2>TypeScript mode</h2>
+
 
 <div><textarea id="code" name="code">
 class Greeter {
@@ -44,5 +58,4 @@ document.body.appendChild(button)
     </script>
 
     <p>This is a specialization of the <a href="index.html">JavaScript mode</a>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/jinja2/index.html b/mode/jinja2/index.html
index 7cd1da23..66bf2ec6 100644
--- a/mode/jinja2/index.html
+++ b/mode/jinja2/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Jinja2 mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="jinja2.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Jinja2 mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Jinja2 mode</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="jinja2.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Jinja2</a>
+  </ul>
+</div>
+
+<article>
+<h2>Jinja2 mode</h2>
+<form><textarea id="code" name="code">
 &lt;html style="color: green"&gt;
   &lt;!-- this is a comment --&gt;
   &lt;head&gt;
@@ -34,5 +47,4 @@
       CodeMirror.fromTextArea(document.getElementById("code"), {mode:
         {name: "jinja2", htmlMode: true}});
     </script>
-  </body>
-</html>
+  </article>
diff --git a/mode/less/index.html b/mode/less/index.html
index 78c1e530..7239143c 100644
--- a/mode/less/index.html
+++ b/mode/less/index.html
@@ -1,19 +1,32 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: LESS mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="less.js"></script>
-    <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd; font-size:12px; height: 400px}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <link rel="stylesheet" href="../../theme/lesser-dark.css">
-  </head>
-  <body>
-    <h1>CodeMirror: LESS mode</h1>
-    <form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
+
+<title>CodeMirror: LESS mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/lesser-dark.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="less.js"></script>
+<style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd; font-size:12px; height: 400px}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">LESS</a>
+  </ul>
+</div>
+
+<article>
+<h2>LESS mode</h2>
+<form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
 @media screen and (device-aspect-ratio: 32/18) { … }
 @media screen and (device-aspect-ratio: 1280/720) { … }
 @media screen and (device-aspect-ratio: 2560/1440) { … }
@@ -737,5 +750,4 @@ td {
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-less</code>, <code>text/css</code> (if not previously defined).</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/livescript/index.html b/mode/livescript/index.html
index 3054e35b..b5944697 100644
--- a/mode/livescript/index.html
+++ b/mode/livescript/index.html
@@ -1,17 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <title>CodeMirror: LiveScript mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="livescript.js"></script>
-    <style>.CodeMirror {font-size: 80%;border-top: 1px solid silver; border-bottom: 1px solid silver;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <link rel="stylesheet" href="../../theme/solarized.css">
-  </head>
-  <body>
-    <h1>CodeMirror: LiveScript mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: LiveScript mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/solarized.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="livescript.js"></script>
+<style>.CodeMirror {font-size: 80%;border-top: 1px solid silver; border-bottom: 1px solid silver;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">LiveScript</a>
+  </ul>
+</div>
+
+<article>
+<h2>LiveScript mode</h2>
+<form><textarea id="code" name="code">
 # LiveScript mode for CodeMirror
 # The following script, prelude.ls, is used to
 # demonstrate LiveScript mode for CodeMirror.
@@ -442,5 +456,4 @@ export prelude = out$
 
     <p>The LiveScript mode was written by Kenneth Bentley (<a href="LICENSE">license</a>).</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/lua/index.html b/mode/lua/index.html
index a0a42d91..69433e44 100644
--- a/mode/lua/index.html
+++ b/mode/lua/index.html
@@ -1,19 +1,32 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Lua mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="../../lib/codemirror.js"></script>
-    <script src="lua.js"></script>
-    <link rel="stylesheet" href="../../theme/neat.css">
-    <style>.CodeMirror {border: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Lua mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Lua mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/neat.css">
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="../../lib/codemirror.js"></script>
+<script src="lua.js"></script>
+<style>.CodeMirror {border: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Lua</a>
+  </ul>
+</div>
+
+<article>
+<h2>Lua mode</h2>
+<form><textarea id="code" name="code">
 --[[
 example useless code to show lua syntax highlighting
 this is multiline comment
@@ -70,5 +83,4 @@ end
     the <code>lua-special</code> style.</p>
     <p><strong>MIME types defined:</strong> <code>text/x-lua</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/markdown/index.html b/mode/markdown/index.html
index bb785b13..a6b541e2 100644
--- a/mode/markdown/index.html
+++ b/mode/markdown/index.html
@@ -1,25 +1,36 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Markdown mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/continuelist.js"></script>
-    <script src="../xml/xml.js"></script>
-    <script src="markdown.js"></script>
-    <style type="text/css">
+
+<title>CodeMirror: Markdown mode</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/continuelist.js"></script>
+<script src="../xml/xml.js"></script>
+<script src="markdown.js"></script>
+<style type="text/css">
       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
       .cm-s-default .cm-trailing-space-a:before,
       .cm-s-default .cm-trailing-space-b:before {position: absolute; content: "\00B7"; color: #777;}
       .cm-s-default .cm-trailing-space-new-line:before {position: absolute; content: "\21B5"; color: #777;}
     </style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Markdown mode</h1>
-
-<!-- source: http://daringfireball.net/projects/markdown/basics.text -->
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Markdown</a>
+  </ul>
+</div>
+
+<article>
+<h2>Markdown mode</h2>
 <form><textarea id="code" name="code">
 Markdown: Basics
 ================
@@ -345,5 +356,4 @@ Output:
 
     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#markdown_*">normal</a>,  <a href="../../test/index.html#verbose,markdown_*">verbose</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/mirc/index.html b/mode/mirc/index.html
index 0ff5ec9a..dbd7a06d 100644
--- a/mode/mirc/index.html
+++ b/mode/mirc/index.html
@@ -1,18 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: mIRC mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="mirc.js"></script>
-    <link rel="stylesheet" href="../../theme/twilight.css">
-    <style>.CodeMirror {border: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: mIRC mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: mIRC mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/twilight.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="mirc.js"></script>
+<style>.CodeMirror {border: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">mIRC</a>
+  </ul>
+</div>
+
+<article>
+<h2>mIRC mode</h2>
+<form><textarea id="code" name="code">
 ;AKA Nick Tracker by Ford_Lawnmower irc.GeekShed.net #Script-Help
 ;*****************************************************************************;
 ;**Start Setup
@@ -145,5 +158,4 @@ Raw 315:*: {
 
     <p><strong>MIME types defined:</strong> <code>text/mirc</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/nginx/index.html b/mode/nginx/index.html
index aa712e1e..16be1eb6 100644
--- a/mode/nginx/index.html
+++ b/mode/nginx/index.html
@@ -1,11 +1,13 @@
 <!doctype html>
-<html>
-  <head>
-    <title>CodeMirror: NGINX mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="nginx.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
+
+<title>CodeMirror: NGINX mode</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="nginx.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</style>
     <link rel="stylesheet" href="../../doc/docs.css">
   </head>
 
@@ -18,10 +20,23 @@
       height: 600px;
     }
   </style>
-
-  <body>
-    <h1>CodeMirror: NGINX mode</h1>
-    <form><textarea id="code" name="code" style="height: 800px;">
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">NGINX</a>
+  </ul>
+</div>
+
+<article>
+<h2>NGINX mode</h2>
+<form><textarea id="code" name="code" style="height: 800px;">
 server {
   listen 173.255.219.235:80;
   server_name website.com.au;
@@ -163,5 +178,4 @@ server {
 
     <p><strong>MIME types defined:</strong> <code>text/nginx</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/ntriples/index.html b/mode/ntriples/index.html
index 052a53d8..c8a67916 100644
--- a/mode/ntriples/index.html
+++ b/mode/ntriples/index.html
@@ -1,20 +1,33 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: NTriples mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="ntriples.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style type="text/css">
+
+<title>CodeMirror: NTriples mode</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="ntriples.js"></script>
+<style type="text/css">
       .CodeMirror {
         border: 1px solid #eee;
       }
-    </style>   
-  </head>
-  <body>
-    <h1>CodeMirror: NTriples mode</h1>
+    </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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">NTriples</a>
+  </ul>
+</div>
+
+<article>
+<h2>NTriples mode</h2>
 <form>
 <textarea id="ntriples" name="ntriples">    
 <http://Sub1>     <http://pred1>     <http://obj> .
@@ -29,5 +42,4 @@ _:bnode5          <http://pred5>     "literal 3"^^<http://type> .
       var editor = CodeMirror.fromTextArea(document.getElementById("ntriples"), {});
     </script>
     <p><strong>MIME types defined:</strong> <code>text/n-triples</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/ocaml/index.html b/mode/ocaml/index.html
index c10a84fa..5d39fadd 100644
--- a/mode/ocaml/index.html
+++ b/mode/ocaml/index.html
@@ -1,19 +1,33 @@
 <!doctype html>
-<meta charset=utf-8>
+
 <title>CodeMirror: OCaml mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
 
 <link rel=stylesheet href=../../lib/codemirror.css>
-<link rel=stylesheet href=../../doc/docs.css>
-
+<script src=../../lib/codemirror.js></script>
+<script src=../../addon/edit/matchbrackets.js></script>
+<script src=ocaml.js></script>
 <style type=text/css>
   .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
 </style>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../../doc/logo.png"></a>
 
-<script src=../../lib/codemirror.js></script>
-<script src=../../addon/edit/matchbrackets.js></script>
-<script src=ocaml.js></script>
+  <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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">OCaml</a>
+  </ul>
+</div>
+
+<article>
+<h2>OCaml mode</h2>
 
-<h1>CodeMirror: OCaml mode</h1>
 
 <textarea id=code>
 (* Summing a list of integers *)
@@ -129,3 +143,4 @@ let () =
 </script>
 
 <p><strong>MIME types defined:</strong> <code>text/x-ocaml</code>.</p>
+</article>
diff --git a/mode/pascal/index.html b/mode/pascal/index.html
index b3016afb..bf8ff0d6 100644
--- a/mode/pascal/index.html
+++ b/mode/pascal/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Pascal mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="pascal.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: Pascal mode</h1>
+
+<title>CodeMirror: Pascal mode</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="pascal.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Pascal</a>
+  </ul>
+</div>
+
+<article>
+<h2>Pascal mode</h2>
+
 
 <div><textarea id="code" name="code">
 (* Example Pascal code *)
@@ -44,5 +58,4 @@ end;
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-pascal</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/perl/index.html b/mode/perl/index.html
index 13c7af64..2b7578ef 100644
--- a/mode/perl/index.html
+++ b/mode/perl/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Perl mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="perl.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: Perl mode</h1>
+
+<title>CodeMirror: Perl mode</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="perl.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Perl</a>
+  </ul>
+</div>
+
+<article>
+<h2>Perl mode</h2>
+
 
 <div><textarea id="code" name="code">
 #!/usr/bin/perl
@@ -58,5 +72,4 @@ something...
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-perl</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/php/index.html b/mode/php/index.html
index 3d4c336c..aaf51c0f 100644
--- a/mode/php/index.html
+++ b/mode/php/index.html
@@ -1,23 +1,35 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: PHP mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="../htmlmixed/htmlmixed.js"></script>
-    <script src="../xml/xml.js"></script>
-    <script src="../javascript/javascript.js"></script>
-    <script src="../css/css.js"></script>
-    <script src="../clike/clike.js"></script>
-    <script src="php.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: PHP mode</h1>
 
+<title>CodeMirror: PHP mode</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/matchbrackets.js"></script>
+<script src="../htmlmixed/htmlmixed.js"></script>
+<script src="../xml/xml.js"></script>
+<script src="../javascript/javascript.js"></script>
+<script src="../css/css.js"></script>
+<script src="../clike/clike.js"></script>
+<script src="php.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">PHP</a>
+  </ul>
+</div>
+
+<article>
+<h2>PHP mode</h2>
 <form><textarea id="code" name="code">
 <?php
 function hello($who) {
@@ -47,5 +59,4 @@ function hello($who) {
     JavaScript, CSS, HTMLMixed, and C-like modes.</p>
 
     <p><strong>MIME types defined:</strong> <code>application/x-httpd-php</code> (HTML with PHP code), <code>text/x-php</code> (plain, non-wrapped PHP code).</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/pig/index.html b/mode/pig/index.html
index 1b0c6026..93744ae2 100644
--- a/mode/pig/index.html
+++ b/mode/pig/index.html
@@ -1,17 +1,29 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Pig Latin mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="pig.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border: 2px inset #dee;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: Pig Latin mode</h1>
 
+<title>CodeMirror: Pig Latin mode</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="pig.js"></script>
+<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Pig Latin</a>
+  </ul>
+</div>
+
+<article>
+<h2>Pig Latin mode</h2>
 <form><textarea id="code" name="code">
 -- Apache Pig (Pig Latin Language) Demo
 /* 
@@ -40,3 +52,4 @@ STORE c INTO "\path\to\output";
     <p><strong>MIME type defined:</strong> <code>text/x-pig</code>
     (PIG code)
 </html>
+</article>
diff --git a/mode/properties/index.html b/mode/properties/index.html
index e21e02ab..40ee1a37 100644
--- a/mode/properties/index.html
+++ b/mode/properties/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Properties files mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="properties.js"></script>
-    <style>.CodeMirror {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Properties files mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Properties files mode</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="properties.js"></script>
+<style>.CodeMirror {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Properties files</a>
+  </ul>
+</div>
+
+<article>
+<h2>Properties files mode</h2>
+<form><textarea id="code" name="code">
 # This is a properties file
 a.key = A value
 another.key = http://example.com
@@ -37,5 +50,4 @@ spaces\ in\ keys=Not very common...
     <p><strong>MIME types defined:</strong> <code>text/x-properties</code>,
     <code>text/x-ini</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/python/index.html b/mode/python/index.html
index 1229a8bf..49773492 100644
--- a/mode/python/index.html
+++ b/mode/python/index.html
@@ -1,18 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Python mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="python.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: Python mode</h1>
-    <h2>Python mode</h2>
+
+<title>CodeMirror: Python mode</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/matchbrackets.js"></script>
+<script src="python.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Python</a>
+  </ul>
+</div>
+
+<article>
+<h2>Python mode</h2>
+
     <div><textarea id="code" name="code">
 # Literals
 1234
@@ -171,5 +184,4 @@ def pairwise_cython(double[:, ::1] X):
 
 
     <p><strong>MIME types defined:</strong> <code>text/x-python</code> and <code>text/x-cython</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/q/index.html b/mode/q/index.html
index 303ec1d3..78ed3d88 100644
--- a/mode/q/index.html
+++ b/mode/q/index.html
@@ -1,17 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Q mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="q.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: Q mode</h1>
+
+<title>CodeMirror: Q mode</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/matchbrackets.js"></script>
+<script src="q.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Q</a>
+  </ul>
+</div>
+
+<article>
+<h2>Q mode</h2>
+
 
 <div><textarea id="code" name="code">
 / utilities to quickly load a csv file - for more exhaustive analysis of the csv contents see csvguess.q
@@ -127,5 +141,4 @@ bulkload:{[file;info]
     </script>
 
     <p><strong>MIME type defined:</strong> <code>text/x-q</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/r/index.html b/mode/r/index.html
index 12819553..f73e13d6 100644
--- a/mode/r/index.html
+++ b/mode/r/index.html
@@ -1,23 +1,36 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: R mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="r.js"></script>
-    <style>
+
+<title>CodeMirror: R mode</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="r.js"></script>
+<style>
       .CodeMirror { border-top: 1px solid silver; border-bottom: 1px solid silver; }
       .cm-s-default span.cm-semi { color: blue; font-weight: bold; }
       .cm-s-default span.cm-dollar { color: orange; font-weight: bold; }
       .cm-s-default span.cm-arrow { color: brown; }
       .cm-s-default span.cm-arg-is { color: brown; }
     </style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: R mode</h1>
-    <form><textarea id="code" name="code">
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">R</a>
+  </ul>
+</div>
+
+<article>
+<h2>R mode</h2>
+<form><textarea id="code" name="code">
 # Code from http://www.mayin.org/ajayshah/KB/R/
 
 # FIRST LEARN ABOUT LISTS --
@@ -70,5 +83,4 @@ powerful <- function(x) {list(x2=x*x, x3=x*x*x, x4=x*x*x*x)}
     by <a href="http://ubalo.com/">Ubalo</a>, who hold
     the <a href="LICENSE">license</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/rpm/changes/index.html b/mode/rpm/changes/index.html
index e0e2d877..18fe7ab7 100644
--- a/mode/rpm/changes/index.html
+++ b/mode/rpm/changes/index.html
@@ -1,17 +1,32 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: RPM changes mode</title>
+
+<title>CodeMirror: RPM changes mode</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="changes.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: RPM changes mode</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 href="../../index.html">Language modes</a>
+    <li><a class=active href="#">RPM changes</a>
+  </ul>
+</div>
+
+<article>
+<h2>RPM changes mode</h2>
+
     <div><textarea id="code" name="code">
 -------------------------------------------------------------------
 Tue Oct 18 13:58:40 UTC 2011 - misterx@example.com
@@ -49,5 +64,4 @@ Wed Oct  5 14:34:10 UTC 2011 - misterx@example.com
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-rpm-changes</code>.</p>
-  </body>
-</html>
+</article>
diff --git a/mode/rpm/spec/index.html b/mode/rpm/spec/index.html
index 8be98b63..127b72ee 100644
--- a/mode/rpm/spec/index.html
+++ b/mode/rpm/spec/index.html
@@ -1,17 +1,32 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: RPM spec mode</title>
+
+<title>CodeMirror: RPM spec mode</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="spec.js"></script>
     <link rel="stylesheet" href="spec.css">
     <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: RPM spec mode</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 href="../../index.html">Language modes</a>
+    <li><a class=active href="#">RPM spec</a>
+  </ul>
+</div>
+
+<article>
+<h2>RPM spec mode</h2>
     
     <div><textarea id="code" name="code">
 #
@@ -95,5 +110,5 @@ find %{buildroot} -type f -name '*.la' -exec rm -f {} ';'
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-rpm-spec</code>.</p>
-  </body>
-</html>
+
+</article>
diff --git a/mode/rst/index.html b/mode/rst/index.html
index b3ab64b8..78030ebe 100644
--- a/mode/rst/index.html
+++ b/mode/rst/index.html
@@ -1,17 +1,29 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: reStructuredText mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="rst.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: reStructuredText mode</h1>
 
+<title>CodeMirror: reStructuredText mode</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="rst.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">reStructuredText</a>
+  </ul>
+</div>
+
+<article>
+<h2>reStructuredText mode</h2>
 <form><textarea id="code" name="code">
 .. This is an excerpt from Sphinx documentation: http://sphinx.pocoo.org/_sources/rest.txt
 
@@ -519,6 +531,4 @@ There are some problems one commonly runs into while authoring reST documents:
     </p>
 
     <p><strong>MIME types defined:</strong> <code>text/x-rst</code>.</p>
-  </body>
-</html>
-
+  </article>
diff --git a/mode/ruby/index.html b/mode/ruby/index.html
index 64cfe5ef..2b3e1a3e 100644
--- a/mode/ruby/index.html
+++ b/mode/ruby/index.html
@@ -1,21 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Ruby mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="ruby.js"></script>
-    <style>
+
+<title>CodeMirror: Ruby mode</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/matchbrackets.js"></script>
+<script src="ruby.js"></script>
+<style>
       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
       .cm-s-default span.cm-arrow { color: red; }
     </style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Ruby mode</h1>
-    <form><textarea id="code" name="code">
+<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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Ruby</a>
+  </ul>
+</div>
+
+<article>
+<h2>Ruby mode</h2>
+<form><textarea id="code" name="code">
 # Code from http://sandbox.mc.edu/~bennet/ruby/code/poly_rb.html
 #
 # This program evaluates polynomials.  It first asks for the coefficients
@@ -169,5 +182,4 @@ end
     by <a href="http://ubalo.com/">Ubalo</a>, who hold
     the <a href="LICENSE">license</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/rust/index.html b/mode/rust/index.html
index a6d47fe8..b0b4c241 100644
--- a/mode/rust/index.html
+++ b/mode/rust/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Rust mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="rust.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: Rust mode</h1>
+
+<title>CodeMirror: Rust mode</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="rust.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Rust</a>
+  </ul>
+</div>
+
+<article>
+<h2>Rust mode</h2>
+
 
 <div><textarea id="code" name="code">
 // Demo code.
@@ -44,5 +58,4 @@ fn check_crate(x: int) {
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-rustsrc</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/sass/index.html b/mode/sass/index.html
index 3af7bff9..66d46778 100644
--- a/mode/sass/index.html
+++ b/mode/sass/index.html
@@ -1,18 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Sass mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="sass.js"></script>
-    <style>.CodeMirror {border: 1px solid #ddd; font-size:12px; height: 400px}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Sass mode</h1>
-    <form><textarea id="code" name="code">// Variable Definitions
+
+<title>CodeMirror: Sass mode</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/matchbrackets.js"></script>
+<script src="sass.js"></script>
+<style>.CodeMirror {border: 1px solid #ddd; font-size:12px; height: 400px}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Sass</a>
+  </ul>
+</div>
+
+<article>
+<h2>Sass mode</h2>
+<form><textarea id="code" name="code">// Variable Definitions
 
 $page-width:    800px
 $sidebar-width: 200px
@@ -50,5 +63,4 @@ body
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/x-sass</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/scheme/index.html b/mode/scheme/index.html
index 5936a024..164d5da6 100644
--- a/mode/scheme/index.html
+++ b/mode/scheme/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Scheme mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="scheme.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Scheme mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Scheme mode</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="scheme.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Scheme</a>
+  </ul>
+</div>
+
+<article>
+<h2>Scheme mode</h2>
+<form><textarea id="code" name="code">
 ; See if the input starts with a given symbol.
 (define (match-symbol input pattern)
   (cond ((null? (remain input)) #f)
@@ -61,5 +74,4 @@
 
     <p><strong>MIME types defined:</strong> <code>text/x-scheme</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/shell/index.html b/mode/shell/index.html
index 9a2ef7c4..cf415e83 100644
--- a/mode/shell/index.html
+++ b/mode/shell/index.html
@@ -1,19 +1,33 @@
 <!doctype html>
-<meta charset=utf-8>
+
 <title>CodeMirror: Shell mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
 
 <link rel=stylesheet href=../../lib/codemirror.css>
-<link rel=stylesheet href=../../doc/docs.css>
-
+<script src=../../lib/codemirror.js></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src=shell.js></script>
 <style type=text/css>
   .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
 </style>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../../doc/logo.png"></a>
 
-<script src=../../lib/codemirror.js></script>
-<script src="../../addon/edit/matchbrackets.js"></script>
-<script src=shell.js></script>
+  <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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Shell</a>
+  </ul>
+</div>
+
+<article>
+<h2>Shell mode</h2>
 
-<h1>CodeMirror: Shell mode</h1>
 
 <textarea id=code>
 #!/bin/bash
@@ -49,3 +63,4 @@ exit 0</textarea>
 </script>
 
 <p><strong>MIME types defined:</strong> <code>text/x-sh</code>.</p>
+</article>
diff --git a/mode/sieve/index.html b/mode/sieve/index.html
index 8b549815..9d814a9d 100644
--- a/mode/sieve/index.html
+++ b/mode/sieve/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Sieve (RFC5228) mode</title>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="sieve.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: Sieve (RFC5228) mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Sieve (RFC5228) mode</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="sieve.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Sieve (RFC5228)</a>
+  </ul>
+</div>
+
+<article>
+<h2>Sieve (RFC5228) mode</h2>
+<form><textarea id="code" name="code">
 #
 # Example Sieve Filter
 # Declare any optional features or extension used by the script
@@ -77,5 +90,4 @@ else
 
     <p><strong>MIME types defined:</strong> <code>application/sieve</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/smalltalk/index.html b/mode/smalltalk/index.html
index b7aebdb7..0d2b172e 100644
--- a/mode/smalltalk/index.html
+++ b/mode/smalltalk/index.html
@@ -1,22 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Smalltalk mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="smalltalk.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>
+
+<title>CodeMirror: Smalltalk mode</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/matchbrackets.js"></script>
+<script src="smalltalk.js"></script>
+<style>
       .CodeMirror {border: 2px solid #dee; border-right-width: 10px;}
       .CodeMirror-gutter {border: none; background: #dee;}
       .CodeMirror-gutter pre {color: white; font-weight: bold;}
     </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Smalltalk mode</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Smalltalk</a>
+  </ul>
+</div>
 
+<article>
+<h2>Smalltalk mode</h2>
 <form><textarea id="code" name="code">
 " 
     This is a test of the Smalltalk code
@@ -53,5 +65,4 @@ MyCounter registerAsApplication: 'mycounter'
     <p>Simple Smalltalk mode.</p>
 
     <p><strong>MIME types defined:</strong> <code>text/x-stsrc</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/smarty/index.html b/mode/smarty/index.html
index 9e417338..d458aef0 100644
--- a/mode/smarty/index.html
+++ b/mode/smarty/index.html
@@ -1,19 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Smarty mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="smarty.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Smarty mode</h1>
-
-	<h3>Default settings (Smarty 2, <b>{</b> and <b>}</b> delimiters)</h3>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Smarty mode</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="smarty.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Smarty</a>
+  </ul>
+</div>
+
+<article>
+<h2>Smarty mode</h2>
+<form><textarea id="code" name="code">
 {extends file="parent.tpl"}
 {include file="template.tpl"}
 
@@ -122,5 +133,4 @@ Smarty "dot" syntax (note: embedded {} are used to address ambiguities):
     <p>A plain text/Smarty version 2 or 3 mode, which allows for custom delimiter tags.</p>
 
     <p><strong>MIME types defined:</strong> <code>text/x-smarty</code></p>
-  </body>
-</html>
+  </article>
diff --git a/mode/smartymixed/index.html b/mode/smartymixed/index.html
index 6567b27d..3de94777 100644
--- a/mode/smartymixed/index.html
+++ b/mode/smartymixed/index.html
@@ -1,25 +1,34 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Smarty mixed mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
 
-    <!-- smartymixed dependencies -->
-    <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>
-    <script src="../../mode/smarty/smarty.js"></script>
+<title>CodeMirror: Smarty mixed mode</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>
+<script src="../../mode/smarty/smarty.js"></script>
+<script src="../../mode/smartymixed/smartymixed.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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Smarty mixed</a>
+  </ul>
+</div>
 
-    <!-- smartymixed -->
-    <script src="../../mode/smartymixed/smartymixed.js"></script>
-  </head>
-  <body>
-    <h1>CodeMirror: Smarty mixed mode</h1>
-    <form><textarea id="code" name="code">
+<article>
+<h2>Smarty mixed mode</h2>
+<form><textarea id="code" name="code">
 {**
 * @brief Smarty mixed mode
 * @author Ruslan Osmanov
@@ -102,6 +111,4 @@
     <p>It takes the same options, as Smarty and HTML mixed modes.</p>
 
     <p><strong>MIME types defined:</strong> <code>text/x-smarty</code>.</p>
-  </body>
-</html>
-<!-- vim: set ft=html ts=2 sts=2 sw=2 et: -->
+  </article>
diff --git a/mode/sparql/index.html b/mode/sparql/index.html
index e7433871..7c41e17b 100644
--- a/mode/sparql/index.html
+++ b/mode/sparql/index.html
@@ -1,18 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: SPARQL mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="sparql.js"></script>
-    <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: SPARQL mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: SPARQL mode</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/matchbrackets.js"></script>
+<script src="sparql.js"></script>
+<style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">SPARQL</a>
+  </ul>
+</div>
+
+<article>
+<h2>SPARQL mode</h2>
+<form><textarea id="code" name="code">
 PREFIX a: &lt;http://www.w3.org/2000/10/annotation-ns#>
 PREFIX dc: &lt;http://purl.org/dc/elements/1.1/>
 PREFIX foaf: &lt;http://xmlns.com/foaf/0.1/>
@@ -38,5 +51,4 @@ WHERE {
 
     <p><strong>MIME types defined:</strong> <code>application/x-sparql-query</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/sql/index.html b/mode/sql/index.html
index acf60b88..550e7495 100644
--- a/mode/sql/index.html
+++ b/mode/sql/index.html
@@ -1,41 +1,35 @@
 <!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>SQL Mode for CodeMirror</title>
-        <link rel="stylesheet" href="../../lib/codemirror.css" />
-        <script src="../../lib/codemirror.js"></script>
-        <script src="sql.js"></script>
-        <style>
+
+<title>CodeMirror: SQL Mode for CodeMirror</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="sql.js"></script>
+<style>
 .CodeMirror {
     border-top: 1px solid black;
     border-bottom: 1px solid black;
 }
         </style>
-        <link rel="stylesheet" href="../../doc/docs.css">
-        <script>
-var init = function() {
-    var mime = 'text/x-mariadb';
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../../doc/logo.png"></a>
 
-    // get mime type
-    if (window.location.href.indexOf('mime=') > -1) {
-        mime = window.location.href.substr(window.location.href.indexOf('mime=') + 5);
-    }
+  <ul>
+    <li><a href="../../index.html">Home</a>
+    <li><a href="../../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a href="../index.html">Language modes</a>
+    <li><a class=active href="#">SQL Mode for CodeMirror</a>
+  </ul>
+</div>
 
-    window.editor = CodeMirror.fromTextArea(document.getElementById('code'), {
-        mode: mime,
-        indentWithTabs: true,
-        smartIndent: true,
-        lineNumbers: true,
-        matchBrackets : true,
-        autofocus: true
-    });
-};
-        </script>
-    </head>
-    <body onload="init();">
-        <h1>SQL Mode for CodeMirror</h1>
-        <form>
+<article>
+<h2>SQL Mode for CodeMirror</h2>
+<form>
             <textarea id="code" name="code">-- SQL Mode for CodeMirror
 SELECT SQL_NO_CACHE DISTINCT
 		@var1 AS `val1`, @'val2', @global.'sql_mode',
@@ -64,5 +58,4 @@ SELECT SQL_NO_CACHE DISTINCT
             <a href="../../test/index.html#sql_*">normal</a>,
             <a href="../../test/index.html#verbose,sql_*">verbose</a>.
         </p>
-    </body>
-</html>
+    </article>
diff --git a/mode/stex/index.html b/mode/stex/index.html
index 2dafe698..28b8f64b 100644
--- a/mode/stex/index.html
+++ b/mode/stex/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: sTeX mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="stex.js"></script>
-    <style>.CodeMirror {background: #f8f8f8;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: sTeX mode</h1>
-     <form><textarea id="code" name="code">
+
+<title>CodeMirror: sTeX mode</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="stex.js"></script>
+<style>.CodeMirror {background: #f8f8f8;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">sTeX</a>
+  </ul>
+</div>
+
+<article>
+<h2>sTeX mode</h2>
+<form><textarea id="code" name="code">
 \begin{module}[id=bbt-size]
 \importmodule[balanced-binary-trees]{balanced-binary-trees}
 \importmodule[\KWARCslides{dmath/en/cardinality}]{cardinality}
@@ -94,5 +107,4 @@
 
     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#stex_*">normal</a>,  <a href="../../test/index.html#verbose,stex_*">verbose</a>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/tcl/index.html b/mode/tcl/index.html
index afdf1278..2c0d1a2d 100644
--- a/mode/tcl/index.html
+++ b/mode/tcl/index.html
@@ -1,18 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Tcl mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="tcl.js"></script>
-    <script src="../../addon/scroll/scrollpastend.js"></script>
-    <link rel="stylesheet" href="../../theme/night.css">
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Tcl mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Tcl mode</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="tcl.js"></script>
+<script src="../../addon/scroll/scrollpastend.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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Tcl</a>
+  </ul>
+</div>
+
+<article>
+<h2>Tcl mode</h2>
+<form><textarea id="code" name="code">
 ##############################################################################################
 ##  ##     whois.tcl for eggdrop by Ford_Lawnmower irc.geekshed.net #Script-Help        ##  ##
 ##############################################################################################
@@ -127,5 +140,4 @@ Ford_Lawnmower irc.GeekShed.net #Script-Help"
 
     <p><strong>MIME types defined:</strong> <code>text/x-tcl</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/tiddlywiki/index.html b/mode/tiddlywiki/index.html
index 848f33a5..fc8f5d39 100644
--- a/mode/tiddlywiki/index.html
+++ b/mode/tiddlywiki/index.html
@@ -1,18 +1,32 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: TiddlyWiki mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="../../addon/edit/matchbrackets.js"></script>
-    <script src="tiddlywiki.js"></script>
-    <link rel="stylesheet" href="tiddlywiki.css">
-    <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: TiddlyWiki mode</h1>
+
+<title>CodeMirror: TiddlyWiki mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="tiddlywiki.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="../../addon/edit/matchbrackets.js"></script>
+<script src="tiddlywiki.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">TiddlyWiki</a>
+  </ul>
+</div>
+
+<article>
+<h2>TiddlyWiki mode</h2>
+
 
 <div><textarea id="code" name="code">
 !TiddlyWiki Formatting
@@ -138,5 +152,4 @@ cf. [[TiddlyWiki.com|http://www.tiddlywiki.com/#EmbeddedImages]]
     <p>TiddlyWiki mode supports a single configuration.</p>
 
     <p><strong>MIME types defined:</strong> <code>text/x-tiddlywiki</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/tiki/index.html b/mode/tiki/index.html
index 7b85a44a..5315dbfc 100644
--- a/mode/tiki/index.html
+++ b/mode/tiki/index.html
@@ -1,16 +1,31 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Tiki wiki mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="tiki.js"></script>
-    <link rel="stylesheet" href="tiki.css">
-    <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 style="padding: 20px;">
-    <h1>CodeMirror: Tiki wiki mode</h1>
+<!doctype html>
+
+<title>CodeMirror: Tiki wiki mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="tiki.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="tiki.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Tiki wiki</a>
+  </ul>
+</div>
+
+<article>
+<h2>Tiki wiki mode</h2>
+
 
 <div><textarea id="code" name="code">
 Headings
@@ -77,5 +92,4 @@ Plugin (inline):
     });
 </script>
 
-</body>
-</html>
+</article>
diff --git a/mode/turtle/index.html b/mode/turtle/index.html
index 5e56e575..74b5f896 100644
--- a/mode/turtle/index.html
+++ b/mode/turtle/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Turtle mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="turtle.js"></script>
-    <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Turtle mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Turtle mode</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="turtle.js"></script>
+<style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Turtle</a>
+  </ul>
+</div>
+
+<article>
+<h2>Turtle mode</h2>
+<form><textarea id="code" name="code">
 @prefix foaf: <http://xmlns.com/foaf/0.1/> .
 @prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> .
 @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@@ -35,5 +48,4 @@
 
     <p><strong>MIME types defined:</strong> <code>text/turtle</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/vb/index.html b/mode/vb/index.html
index 74dd5e81..42c3e526 100644
--- a/mode/vb/index.html
+++ b/mode/vb/index.html
@@ -1,21 +1,36 @@
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: VB.NET mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="vb.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
-    <style>
+<!doctype html>
+
+<title>CodeMirror: VB.NET mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
+<script src="../../lib/codemirror.js"></script>
+<script src="vb.js"></script>
+<script type="text/javascript" src="../../addon/runmode/runmode.js"></script>
+<style>
       .CodeMirror {border: 1px solid #aaa; height:210px; height: auto;}
       .CodeMirror-scroll { overflow-x: auto; overflow-y: hidden;}
       .CodeMirror pre { font-family: Inconsolata; font-size: 14px}
-    </style> 
-    <script type="text/javascript" src="../../addon/runmode/runmode.js"></script>
-  </head>
-  <body onload="init()">
-    <h1>CodeMirror: VB.NET mode</h1>
+    </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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">VB.NET</a>
+  </ul>
+</div>
+
+<article>
+<h2>VB.NET mode</h2>
+
 <script type="text/javascript">
 function test(golden, text) {
   var ok = true;
@@ -76,13 +91,13 @@ function runTest() {
   initText(editor);
 	
 }
+document.body.onload = init;
 </script>
 
-
   <div id="edit">
   <textarea style="width:95%;height:200px;padding:5px;" name="solution" id="solution" ></textarea>
   </div>
   <pre id="testresult"></pre>
   <p>MIME type defined: <code>text/x-vb</code>.</p>
 
-</body></html>
+</article>
diff --git a/mode/vbscript/index.html b/mode/vbscript/index.html
index 9ae46676..9b506b79 100644
--- a/mode/vbscript/index.html
+++ b/mode/vbscript/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: VBScript mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="vbscript.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: VBScript mode</h1>
+
+<title>CodeMirror: VBScript mode</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="vbscript.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">VBScript</a>
+  </ul>
+</div>
+
+<article>
+<h2>VBScript mode</h2>
+
 
 <div><textarea id="code" name="code">
 ' Pete Guhl
@@ -38,6 +52,4 @@ End If
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/vbscript</code>.</p>
-  </body>
-</html>
-
+  </article>
diff --git a/mode/velocity/index.html b/mode/velocity/index.html
index 96df4c88..023542d1 100644
--- a/mode/velocity/index.html
+++ b/mode/velocity/index.html
@@ -1,18 +1,31 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Velocity mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="velocity.js"></script>
-    <link rel="stylesheet" href="../../theme/night.css">
-    <style>.CodeMirror {border: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: Velocity mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: Velocity mode</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="velocity.js"></script>
+<style>.CodeMirror {border: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Velocity</a>
+  </ul>
+</div>
+
+<article>
+<h2>Velocity mode</h2>
+<form><textarea id="code" name="code">
 ## Velocity Code Demo
 #*
    based on PL/SQL mode by Peter Raganitsch, adapted to Velocity by Steve O'Hara ( http://www.pivotal-solutions.co.uk )
@@ -103,5 +116,4 @@ Addition: #set( $value = $foo + 1 )
 
     <p><strong>MIME types defined:</strong> <code>text/velocity</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/verilog/index.html b/mode/verilog/index.html
index f7c88c62..cc710564 100644
--- a/mode/verilog/index.html
+++ b/mode/verilog/index.html
@@ -1,17 +1,29 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Verilog mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="verilog.js"></script>
-    <link rel="stylesheet" href="../../doc/docs.css">
-    <style>.CodeMirror {border: 2px inset #dee;}</style>
-  </head>
-  <body>
-    <h1>CodeMirror: Verilog mode</h1>
 
+<title>CodeMirror: Verilog mode</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="verilog.js"></script>
+<style>.CodeMirror {border: 2px inset #dee;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Verilog</a>
+  </ul>
+</div>
+
+<article>
+<h2>Verilog mode</h2>
 <form><textarea id="code" name="code">
 /* Verilog demo code */
 
@@ -117,5 +129,4 @@ endmodule
     object whose property names are the keywords in the language.</p>
 
     <p><strong>MIME types defined:</strong> <code>text/x-verilog</code> (Verilog code).</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/xml/index.html b/mode/xml/index.html
index 9628d954..873099aa 100644
--- a/mode/xml/index.html
+++ b/mode/xml/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: XML mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="xml.js"></script>
-    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: XML mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: XML mode</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="xml.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">XML</a>
+  </ul>
+</div>
+
+<article>
+<h2>XML mode</h2>
+<form><textarea id="code" name="code">
 &lt;html style="color: green"&gt;
   &lt;!-- this is a comment --&gt;
   &lt;head&gt;
@@ -41,5 +54,4 @@
     </dl>
 
     <p><strong>MIME types defined:</strong> <code>application/xml</code>, <code>text/html</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/mode/xquery/index.html b/mode/xquery/index.html
index 27acb897..3baf5e3e 100644
--- a/mode/xquery/index.html
+++ b/mode/xquery/index.html
@@ -1,46 +1,36 @@
-<!doctype html> 
-<html> 
-<!--
-/*
-Copyright (C) 2011 by MarkLogic Corporation
-Author: Mike Brevoort <mike@brevoort.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
--->
-  <head> 
-    <meta charset="utf-8">
-    <title>CodeMirror: XQuery mode</title> 
-    <link rel="stylesheet" href="../../lib/codemirror.css"> 
-    <script src="../../lib/codemirror.js"></script> 
-    <script src="xquery.js"></script> 
-    <link rel="stylesheet" href="../../doc/docs.css"> 
-    <link rel="stylesheet" href="../../theme/xq-dark.css"> 
-    <style type="text/css">
+<!doctype html>
+
+<title>CodeMirror: XQuery mode</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../../doc/docs.css">
+
+<link rel="stylesheet" href="../../lib/codemirror.css">
+<link rel="stylesheet" href="../../theme/xq-dark.css">
+<script src="../../lib/codemirror.js"></script>
+<script src="xquery.js"></script>
+<style type="text/css">
 	.CodeMirror {
 	  border-top: 1px solid black; border-bottom: 1px solid black;
 	  height:400px;
 	}
-    </style> 
-  </head> 
-  <body> 
-    <h1>CodeMirror: XQuery mode</h1> 
+    </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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">XQuery</a>
+  </ul>
+</div>
+
+<article>
+<h2>XQuery mode</h2>
+ 
  
 <div class="cm-s-default"> 
 	<textarea id="code" name="code"> 
@@ -217,5 +207,4 @@ declare function json:serialize($x as element())  as xs:string {
       <a href="https://twitter.com/mbrevoort">Mike Brevoort</a>.
     </p>
  
-  </body> 
-</html>
+  </article>
diff --git a/mode/yaml/index.html b/mode/yaml/index.html
index 65e1ea73..bbb40a3c 100644
--- a/mode/yaml/index.html
+++ b/mode/yaml/index.html
@@ -1,17 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: YAML mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="yaml.js"></script>
-    <style>.CodeMirror { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }</style>
-    <link rel="stylesheet" href="../../doc/docs.css">
-  </head>
-  <body>
-    <h1>CodeMirror: YAML mode</h1>
-    <form><textarea id="code" name="code">
+
+<title>CodeMirror: YAML mode</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="yaml.js"></script>
+<style>.CodeMirror { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">YAML</a>
+  </ul>
+</div>
+
+<article>
+<h2>YAML mode</h2>
+<form><textarea id="code" name="code">
 --- # Favorite movies
 - Casablanca
 - North by Northwest
@@ -64,5 +77,4 @@ specialDelivery:  >
 
     <p><strong>MIME types defined:</strong> <code>text/x-yaml</code>.</p>
 
-  </body>
-</html>
+  </article>
diff --git a/mode/z80/index.html b/mode/z80/index.html
index 133c870e..b63c9621 100644
--- a/mode/z80/index.html
+++ b/mode/z80/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Z80 assembly mode</title>
-    <link rel="stylesheet" href="../../lib/codemirror.css">
-    <script src="../../lib/codemirror.js"></script>
-    <script src="z80.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: Z80 assembly mode</h1>
+
+<title>CodeMirror: Z80 assembly mode</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="z80.js"></script>
+<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</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 href="../index.html">Language modes</a>
+    <li><a class=active href="#">Z80 assembly</a>
+  </ul>
+</div>
+
+<article>
+<h2>Z80 assembly mode</h2>
+
 
 <div><textarea id="code" name="code">
 #include    "ti83plus.inc"
@@ -35,5 +49,4 @@ Message:
     </script>
 
     <p><strong>MIME type defined:</strong> <code>text/x-z80</code>.</p>
-  </body>
-</html>
+  </article>
diff --git a/test/index.html b/test/index.html
index 5ead383a..8e45b6d0 100644
--- a/test/index.html
+++ b/test/index.html
@@ -1,49 +1,62 @@
 <!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CodeMirror: Test Suite</title>
-    <link rel="stylesheet" href="../lib/codemirror.css">
-    <link rel="stylesheet" href="../doc/docs.css">
-    <link rel="stylesheet" href="mode_test.css">
-    <script src="../lib/codemirror.js"></script>
-    <script src="../addon/mode/overlay.js"></script>
-    <script src="../addon/mode/multiplex.js"></script>
-    <script src="../addon/search/searchcursor.js"></script>
-    <script src="../addon/dialog/dialog.js"></script>
-    <script src="../addon/edit/matchbrackets.js"></script>
-    <script src="../addon/comment/comment.js"></script>
-    <script src="../mode/javascript/javascript.js"></script>
-    <script src="../mode/xml/xml.js"></script>
-    <script src="../keymap/vim.js"></script>
-    <script src="../keymap/emacs.js"></script>
 
-    <style type="text/css">
-      .ok {color: #090;}
-      .fail {color: #e00;}
-      .error {color: #c90;}
-      .done {font-weight: bold;}
-      #progress {
-        background: #45d;
-        color: white;
-        text-shadow: 0 0 1px #45d, 0 0 2px #45d, 0 0 3px #45d;
-        font-weight: bold;
-        white-space: pre;
-      }
-      #testground {
-        visibility: hidden;
-      }
-      #testground.offscreen {
-        visibility: visible;
-        position: absolute;
-        left: -10000px;
-        top: -10000px;
-      }
-      .CodeMirror { border: 1px solid black; }
-    </style>
-  </head>
-  <body>
-    <h1>CodeMirror: Test Suite</h1>
+<title>CodeMirror: Test Suite</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="mode_test.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/mode/overlay.js"></script>
+<script src="../addon/mode/multiplex.js"></script>
+<script src="../addon/search/searchcursor.js"></script>
+<script src="../addon/dialog/dialog.js"></script>
+<script src="../addon/edit/matchbrackets.js"></script>
+<script src="../addon/comment/comment.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<script src="../keymap/vim.js"></script>
+<script src="../keymap/emacs.js"></script>
+
+<style type="text/css">
+  .ok {color: #090;}
+  .fail {color: #e00;}
+  .error {color: #c90;}
+  .done {font-weight: bold;}
+  #progress {
+  background: #45d;
+  color: white;
+  text-shadow: 0 0 1px #45d, 0 0 2px #45d, 0 0 3px #45d;
+  font-weight: bold;
+  white-space: pre;
+  }
+  #testground {
+  visibility: hidden;
+  }
+  #testground.offscreen {
+  visibility: visible;
+  position: absolute;
+  left: -10000px;
+  top: -10000px;
+  }
+  .CodeMirror { border: 1px solid black; }
+</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="#">Test suite</a>
+  </ul>
+</div>
+
+<article>
+  <h2>Test Suite</h2>
 
     <p>A limited set of programmatic sanity tests for CodeMirror.</p>
 
@@ -192,5 +205,5 @@
         }
       }
     </script>
-  </body>
-</html>
+
+</article>
-- 
GitLab