markedjs · joshbruce · Mar 26, 2018 · Mar 25, 2018 · Mar 25, 2018 · Mar 25, 2018
diff --git a/README.md b/README.md
@@ -7,6 +7,12 @@ Marked is
 3. light-weight while implementing all markdown features from the supported flavors & specifications.
 4. available as a command line interface (CLI) and running in client- or server-side JavaScript projects.
 
+## Demo
+
+Checkout the [demo page](https://marked.js.org/demo.html) to see marked in action ⛹️
+
+Our [documentation pages](https://marked.js.org) are also rendered using marked 💯
+
 ## Installation
 
 **CLI:** `npm install -g marked`
@@ -33,10 +39,10 @@ $ cat hello.html
 <head>
   <meta charset="utf-8"/>
   <title>Marked in the browser</title>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>
   <div id="content"></div>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
     document.getElementById('content').innerHTML =
       marked('# Marked in the browser\n\nRendered by **marked**.');
@@ -45,8 +51,6 @@ $ cat hello.html
 </html>
 ```
 
-
-
 ## License
 
 Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)

diff --git a/docs/README.md b/docs/README.md
@@ -1,5 +1,6 @@
 <ul>
   <li><a href="#marked">About</a></li>
+  <li><a href="#demo">Demo</a></li>
   <li><a href="#installation">Installation</a></li>
   <li><a href="#usage">Usage</a></li>
   <li><a href="#specifications">Supported Markdown specifications</a></li>
@@ -22,6 +23,14 @@ Marked is
 <small><sup>**</sup> As few dependencies as possible.</small><br>
 <small><sup>***</sup> Strict compliance could result in slower processing when running comparative benchmarking.</small></p>
 
+
+<h2 id="demo">Demo</h2>
+
+Checkout the [demo page](https://marked.js.org/demo.html) to see marked in action ⛹️
+
+These documentation pages are also rendered using marked 💯
+
+
 <h2 id="installation">Installation</h2>
 
 **CLI:** `npm install -g marked`
@@ -48,10 +57,10 @@ $ cat hello.html
 <head>
   <meta charset="utf-8"/>
   <title>Marked in the browser</title>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>
   <div id="content"></div>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
     document.getElementById('content').innerHTML =
       marked('# Marked in browser\n\nRendered by **marked**.');

diff --git a/www/demo.css → docs/demo.css b/www/demo.css → docs/demo.css
@@ -1,44 +1,35 @@
 html, body {
 	margin: 0;
 	padding: 0;
-	font-family: Helvetica, Arial, Verdana, sans-serif;
-	background-color: #DDF;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	color: #333;
+	background-color: #fbfbfb;
 	height: 100%;
 }
 
 textarea {
-	font-family: monospace;
+	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+	font-size: 12px;
 }
 
 #header {
-	margin: 0;
-	padding: 0.4em 0 0 0;
+	margin-top: 1em;
 	text-align: center;
-	color: #002;
-}
-
-#header h1 {
-	font-size: 2em;
 }
 
-#header * {
-	margin: 0;
-	padding: 0;
-	line-height: 1em;
-	font-weight: 100;
+#header > h1 {
+	margin-top: 0;
 }
 
-#header a {
-	color: #005;
-	position: relative;
-	z-index: 20;
+#header img {
+	float: left;
 }
 
 #bothContainers {
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	margin-top: 2.4em;
+	margin-top: 5em;
 	width: 100%;
 }
 
@@ -66,38 +57,15 @@ textarea {
 }
 
 .label {
-	margin: 0;
-	padding: 0;
-	position: relative;
-	width: 100%;
-	display: block;
-}
-
-.label * {
-	position: relative;
-	font-weight: 900;
-}
-
-.label span {
-	color: #444;
-}
-
-#outputType {
-	display: block;
-	margin-left: auto;
-	font-weight: 900;
-	font-family: Arial, Verdana, sans-serif;
-	background-color: #dacccc;
-	color: #444;
-	border: 1px solid #999;
+	float: none !important;
 }
 
 .pane {
 	margin: 1.6em 0em 0.2em;
 	padding: 0.6em;
-	background-color: #eee;
 	display: block;
-	border: 1px solid #000;
+	border: 1px solid #ccc;
+	border-radius: 2px;
 	top: 0;
 	bottom: 0;
 	left: 0;
@@ -151,3 +119,10 @@ textarea {
 	font-size: 1.3em;
 }
 
+.github-ribbon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 0;
+	z-index: 1000;
+}
diff --git a/www/demo.html → docs/demo.html b/www/demo.html → docs/demo.html
@@ -1,14 +1,19 @@
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!doctype html>
+<html lang="en">
 <head>
-	<title>Marked Demo Page</title>
-	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-	<script type="text/javascript" src="../lib/marked.js"></script>
-	<script type="text/javascript" src="demo.js"></script>
+	<title>Marked Demo</title>
 	<link rel="stylesheet" href="demo.css" type="text/css" />
 </head>
 <body>
+    <a href="https://github.com/markedjs/marked">
+        <img class="github-ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
+    </a>
+
 	<div id="header">
-		<h1>Demo Page for <a href="https://github.com/chjj/marked/">Marked</a></h1>
+        <a href="/">
+            <img src="img/logo-black.svg" height="64px" width="64px" />
+        </a>
+		<h1>Marked Demo</h1>
 	</div>
 
 	<div id="bothContainers">
@@ -50,7 +55,7 @@ <h1>Demo Page for <a href="https://github.com/chjj/marked/">Marked</a></h1>
 Ready to start writing?  Either start changing stuff on the left or
 [clear everything](?blank=1) with a simple click.
 
-[Marked]: https://github.com/chjj/marked/
+[Marked]: https://github.com/markedjs/marked/
 [Markdown]: http://daringfireball.net/projects/markdown/
 </textarea>
 		</div>
@@ -239,6 +244,8 @@ <h1>Demo Page for <a href="https://github.com/chjj/marked/">Marked</a></h1>
     It is a pity, but markdown does **not** work in here for most markdown parsers.  [Marked] handles it pretty well.
 </div>
 </textarea></div>
-		</div>
+        </div>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+	    <script type="text/javascript" src="demo.js"></script>
 	</body>
 </html>
diff --git a/docs/demo.js b/docs/demo.js
@@ -0,0 +1,107 @@
+(function () {
+	var $inputElem = document.querySelector('#input');
+	var $outputTypeElem = document.querySelector('#outputType');
+	var $previewElem = document.querySelector('#preview');
+	var $htmlElem = document.querySelector('#html');
+	var $lexerElem = document.querySelector('#lexer');
+	var $syntaxElem = document.querySelector('#syntax');
+	var $pane = document.querySelector('#rightContainer .pane');
+	var inputDirty = true;
+	var $activeElem = null;
+
+	if (top.document.location.href.match(/\?blank=1$/)) {
+		$inputElem.value = '';
+	}
+
+	var handleChange = function () {
+		var panes = document.querySelectorAll('#rightContainer .pane');
+		for (var i = 0; i < panes.length; i++) {
+			panes[i].style.display = 'none';
+		}
+		$activeElem = document.querySelector('#' + $outputTypeElem.value);
+		$activeElem.style.display = 'block';
+	};
+
+	$outputTypeElem.addEventListener('change', handleChange, false);
+	handleChange();
+
+
+	var handleInput = function () {
+		inputDirty = true;
+	};
+
+	$inputElem.addEventListener('change', handleInput, false);
+	$inputElem.addEventListener('keyup', handleInput, false);
+	$inputElem.addEventListener('keypress', handleInput, false);
+	$inputElem.addEventListener('keydown', handleInput, false);
+
+	var jsonString = function (input) {
+		var output = (input + '').
+			replace(/\n/g, '\\n').
+			replace(/\r/g, '\\r').
+			replace(/\t/g, '\\t').
+			replace(/\f/g, '\\f').
+			replace(/[\\"']/g, '\\$&').
+			replace(/\u0000/g, '\\0');
+		return '"' + output + '"';
+	};
+
+	var getScrollSize = function () {
+		var e = $activeElem;
+
+		return e.scrollHeight - e.clientHeight;
+	};
+	var getScrollPercent = function () {
+		var size = getScrollSize();
+
+		if (size <= 0) {
+			return 1;
+		}
+
+		return $activeElem.scrollTop / size;
+	};
+	var setScrollPercent = function (percent) {
+		$activeElem.scrollTop = percent * getScrollSize();
+	};
+
+	var delayTime = 1;
+	var checkForChanges = function () {
+		if (inputDirty) {
+			inputDirty = false;
+			var startTime = new Date();
+
+			var scrollPercent = getScrollPercent();
+
+			var lexed = marked.lexer($inputElem.value);
+
+			var lexedList = [];
+
+			for (var i = 0; i < lexed.length; i ++) {
+				var lexedLine = [];
+				for (var j in lexed[i]) {
+					lexedLine.push(j + ':' + jsonString(lexed[i][j]));
+				}
+				lexedList.push('{' + lexedLine.join(', ') + '}');
+			}
+
+			var parsed = marked.parser(lexed);
+
+			$previewElem.innerHTML = (parsed);
+			$htmlElem.value = (parsed);
+			$lexerElem.value = (lexedList.join('\n'));
+
+			setScrollPercent(scrollPercent);
+
+			var endTime = new Date();
+			delayTime = endTime - startTime;
+			if (delayTime < 50) {
+				delayTime = 50;
+			} else if (delayTime > 500) {
+				delayTime = 1000;
+			}
+		}
+		window.setTimeout(checkForChanges, delayTime);
+	};
+	checkForChanges();
+	setScrollPercent(0);
+})();