Add variable-height demo

Closes #768

Add variable-height demo
874d14bd · Marijn Haverbeke · cb456e05 · 874d14bd · 874d14bd
Commit 874d14bd authored 12 years ago by Marijn Haverbeke
--- a/demo/variableheight.html
+++ b/demo/variableheight.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CodeMirror: Variable Height Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/markdown/markdown.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid silver; border-width: 1px 2px; }
+      .cm-header { font-size: 150%; font-family: arial; }
+      .cm-strong { font-size: 140%; }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Variable Height Demo</h1>
+
+    <p></p>
+    <form><textarea id="code" name="code">### A First Level Header
+
+**Bold** text in a normal-size paragraph.
+
+And a very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long, wrapped line with a piece of **big** text inside of it.
+
+## A Second Level Header
+
+Now is the time for all good men to come to
+the aid of their country. This is just a
+regular paragraph.
+
+The quick brown fox jumped over the lazy
+dog's back.
+
+### Header 3
+
+> This is a blockquote.
+> 
+> This is the second paragraph in the blockquote.
+>
+> ## This is an H2 in a blockquote       
+</textarea></form>
+    <script id="script">
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        lineWrapping: true,
+        mode: "markdown"
+      });
+    </script>
+  </body>
+</html>
--- a/index.html
+++ b/index.html
@@ -101,6 +101,7 @@
      <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>