Adding footnotes, definitions, abbreviations

js/markdown.js

 // TODO: Linked image not parsed correctly.  [![](image.jpg)](link.html)
-
-// Blocks
-// - Paragraph
-// - Header 1-6   # ## ### #### ##### ######  or   ===  ---
-// - Blockquote (nestable)   >
-// - Unordered list (nestable)   *_
-// - Ordered list (nestable)    1._
-// - Code block   ```\ncode\n```  or  4 spaces/tab indent
-// - Horizontal rule   ---    - - -    * * *  etc
-// - Table   -|-
-// - Definition list     term\n: definition\n: alternate definition
-// - Footnote (bottom)   citation[^1]
-// - Abbreviation (definition)   *[ABC]: Abbrev Blah Cat
-// Inline
-// - Link   [text](https://url)
-// - Emphasis   *emphasized*
-// - Strong   **bold**
-// - Inline code   `code`
-// - Strikethrough   ~strike~
-// - Image   ![alt text](https://image){.cssclass}
-// - Footnote (inline)   [^1]: footnote text
-// - Abbreviation (inline)
+// TODO: {.class #cssid lang=fr}
+//     # Header {.class}
+//     Header {.class}
+//     ---
+//     [link](url){.class}
+//     ``` {.class}
+// FIXME: Nested lists not working right
+// FIXME: Nested blockquotes require blank line
+// FIXME: Ordered list should start with first number
 
 class _MDHAlign {
 	static Left = new _MDHAlign('Left');
 
 
 class _MDSpan {
-	toHTML(config) {
+	/**
+	 * @param {_MDState} state
+	 * @returns {String} HTML
+	 */
+	toHTML(state) {
 		throw new Error(self.constructor.name + ".toHTML not implemented");
 	}
 
 	/**
 	 * @param {_MDSpan[]} spans
-	 * @param {_MDConfig} config
+	 * @param {_MDState} state
 	 */
-	static toHTML(spans, config) {
-		return spans.map((span) => span.toHTML(config)).join("");
+	static toHTML(spans, state) {
+		return spans.map((span) => span.toHTML(state)).join("");
 	}
 }
 class _MDMultiSpan extends _MDSpan {
 		super();
 		this.content = content;
 	}
-	toHTML() {
-		return _MDSpan.toHTML(this.content);
+	toHTML(state) {
+		return _MDSpan.toHTML(this.content, state);
 	}
 }
 class _MDTextSpan extends _MDSpan {
 		super();
 		this.text = text;
 	}
-	toHTML(config) {
-		return this.text.replace('<', '&lt;');
+	toHTML(state) {
+		let html = this.text.replace('<', '&lt;');
+		let abbrevs = state.abbreviations;
+		let regexes = state.abbreviationRegexes;
+		for (const abbrev in abbrevs) {
+			let def = abbrevs[abbrev];
+			let regex = regexes[abbrev];
+			let escapedDef = def.replace('"', '&quot;');
+			html = html.replace(regex, `<abbr title="${escapedDef}">$1</abbr>`);
+		}
+		return html;
 	}
 }
 class _MDHTMLSpan extends _MDSpan {
 		super();
 		this.html = html;
 	}
-	toHTML(config) {
+	toHTML(state) {
 		return this.html;
 	}
 }
 		this.content = content;
 	}
 
-	toHTML(config) {
+	toHTML(state) {
 		let escapedLink = this.link.replace('"', '&quot;');
 		var html = `<a href="${escapedLink}"`;
 		if (target) {
 			let escapedTarget = this.target.replace('"', '&quot;');
 			html += ` target="${escapedTarget}"`;
 		}
-		html += '>' + this.content.toHTML(config) + '</a>';
+		html += '>' + this.content.toHTML(state) + '</a>';
 		return html;
 	}
 }
 		super(null, content);
 		this.id = id;
 	}
-	toHTML(config) {
+	toHTML(state) {
 		if (this.link) {
-			return super.toHTML(config);
+			return super.toHTML(state);
 		} else {
-			let contentHTML = this.content.toHTML(config);
+			let contentHTML = this.content.toHTML(state);
 			return `[${contentHTML}][${this.id}]`;
 		}
 	}
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		return `<em>${contentHTML}</em>`;
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		return `<strong>${contentHTML}</strong>`;
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		return `<strike>${contentHTML}</strike>`;
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		return `<code>${contentHTML}</code>`;
 	}
 }
 	source;
 	/** @var {String|null} */
 	alt;
+	/** @var {String|null} */
+	title;
 	/**
 	 * @param {String} source
 	 */
-	constructor(source, alt) {
+	constructor(source, alt, title=null) {
 		super();
 		this.source = source;
 		this.alt = alt;
+		this.title = title;
 	}
-	toHTML(config) {
+	toHTML(state) {
 		let escapedSource = this.source.replace('"', '&quot;');
 		let html = `<img src="${escapedSource}"`;
 		if (this.alt) {
 			let altEscaped = this.alt.replace('"', '&quot');
 			html += ` alt="${altEscaped}"`;
 		}
+		if (this.title) {
+			let titleEscaped = this.title.replace('"', '&quot;');
+			html += ` title="${titleEscaped}"`;
+		}
 		html += '>';
 		return html;
 	}
 		super(null, alt);
 		this.id = id;
 	}
-	toHTML(config) {
+	toHTML(state) {
 		if (this.source) {
-			return super.toHTML(config);
+			return super.toHTML(state);
 		} else {
 			let altEscaped = this.alt.replace('"', '&quot;');
 			let idEscaped = this.id.replace('"', '&quot;');
 class _MDFootnoteReferenceSpan extends _MDSpan {
 	/** @var {String} */
 	symbol;
-	/** @var {Number} */
-	differentiator = 0;
 	/**
 	 * @param {String} symbol
 	 */
 		super();
 		this.symbol = symbol;
 	}
-	toHTML(config) {
-		return `<sup id="fnref-${this.symbol}-${this.differentiator}"><a href="#fndef-${this.symbol}">${this.symbol}</a></sup>`;
+	toHTML(state) {
+		return `<!--FNREF:{${this.symbol}}-->`
 	}
 }
 class _MDAbbreviationSpan extends _MDSpan {
 		this.abbreviation = abbreviation;
 		this.definition = definition;
 	}
-	toHTML(config) {
+	toHTML(state) {
 		let definitionEscaped = this.definition.replace('"', '&quot;');
 		return `<abbr title="${definitionEscaped}">${this.abbreviation}</em>`;
 	}
 
 
 class _MDBlock {
-	toHTML(config) {
+	/**
+	 * @param {_MDState} state
+	 */
+	toHTML(state) {
 		throw new Error(self.constructor.name + ".toHTML not implemented");
 	}
 
 	/**
 	 * @param {_MDBlock[]} blocks
+	 * @param {_MDState} state
 	 * @returns {String}
 	 */
-	static toHTML(blocks, config) {
-		return blocks.map((block) => block.toHTML(config)).join("\n");
+	static toHTML(blocks, state) {
+		return blocks.map((block) => block.toHTML(state)).join("\n");
 	}
 }
 
 		super();
 		this.#blocks = blocks;
 	}
-	toHTML(config) {
-		return _MDBlock.toHTML(this.#blocks, config);
+	toHTML(state) {
+		return _MDBlock.toHTML(this.#blocks, state);
 	}
 }
 
 		this.content = content;
 	}
 
-	toHTML(config) {
-		let contentHTML = this.content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.content.toHTML(state);
 		return `<p>${contentHTML}</p>\n`;
 	}
 }
 		this.content = content;
 	}
 
-	toHTML(config) {
-		let contentHTML = this.content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.content.toHTML(state);
 		return `<h${this.level}>${contentHTML}</h${this.level}>\n`;
 	}
 }
 		super();
 		this.content = content;
 	}
-	toHTML(config) {
-		let contentHTML = _MDBlock.toHTML(this.content, config);
+	toHTML(state) {
+		let contentHTML = _MDBlock.toHTML(this.content, state);
 		return `<blockquote>\n${contentHTML}\n</blockquote>`;
 	}
 }
 		super();
 		this.items = items;
 	}
-	toHTML(config) {
-		let contentHTML = _MDBlock.toHTML(this.items);
+	toHTML(state) {
+		let contentHTML = _MDBlock.toHTML(this.items, state);
 		return `<ul>\n${contentHTML}\n</ul>`;
 	}
 }
 		super();
 		this.items = items;
 	}
-	toHTML(config) {
-		let contentHTML = _MDBlock.toHTML(this.items);
+	toHTML(state) {
+		let contentHTML = _MDBlock.toHTML(this.items, state);
 		return `<ol>\n${contentHTML}\n</ol>`;
 	}
 }
 		this.content = content;
 	}
 
-	toHTML(config) {
-		let contentHTML = this.content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.content.toHTML(state);
 		return `<li>${contentHTML}</li>`;
 	}
 }
 		super();
 		this.#code = code;
 	}
-	toHTML(config) {
+	toHTML(state) {
 		return `<pre><code>${this.#code}</code></pre>`;
 	}
 }
 
 class _MDHorizontalRuleBlock extends _MDBlock {
-	toHTML(config) {
+	toHTML(state) {
 		return "<hr>\n";
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		let alignAttribute = _MDHAlign.toHTMLAttribute(this.align);
 		return `<td${alignAttribute}>${contentHTML}</td>`;
 	}
 }
 
 class _MDTableHeaderCellBlock extends _MDTableCellBlock {
-	toHTML(config) {
-		let html = super.toHTML(config);
+	toHTML(state) {
+		let html = super.toHTML(state);
 		let groups = /^<td(.*)td>$/.exec(html);
 		return `<th${groups[1]}th>`;
 	}
 			cell.align = align;
 		}
 	}
-	toHTML(config) {
-		let cellsHTML = _MDBlock.toHTML(this.#cells, config);
+	toHTML(state) {
+		let cellsHTML = _MDBlock.toHTML(this.#cells, state);
 		return `<tr>\n${cellsHTML}\n</tr>`;
 	}
 }
 		this.#headerRow = headerRow;
 		this.#bodyRows = bodyRows;
 	}
-	toHTML(config) {
-		let headerRowHTML = this.#headerRow.toHTML(config);
-		let bodyRowsHTML = _MDBlock.toHTML(this.#bodyRows);
+	toHTML(state) {
+		let headerRowHTML = this.#headerRow.toHTML(state);
+		let bodyRowsHTML = _MDBlock.toHTML(this.#bodyRows, state);
 		return `<table>\n<thead>\n${headerRowHTML}\n</thead>\n<tbody>\n${bodyRowsHTML}\n</tbody>\n</table>`;
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = _MDBlock.toHTML(this.#content);
+	toHTML(state) {
+		let contentHTML = _MDBlock.toHTML(this.#content, state);
 		return `<dl>\n${contentHTML}\n</dl>`;
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		return `<dt>${contentHTML}</dt>`;
 	}
 }
 		super();
 		this.#content = content;
 	}
-	toHTML(config) {
-		let contentHTML = this.#content.toHTML(config);
+	toHTML(state) {
+		let contentHTML = this.#content.toHTML(state);
 		return `<dd>${contentHTML}</dd>`;
 	}
 }
 
-class _MDFootnoteBlock extends _MDBlock {
-	/** @var {String} */
-	#id;
-	/** @var {_MDBlock} */
-	#content;
-	/**
-	 * @param {String} id
-	 * @param {_MDBlock} content
-	 */
-	constructor(id, content) {
-		super();
-		this.#id = id;
-		this.#content = content;
-	}
-	toHTML(config) {
-		// TODO: Forward and back links
-		// TODO: Deferring footnotes to end of document
-		//<ol>
-		//<li id="fn:1" role="doc-endnote">
-		//<p>Footnote&nbsp;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
-		//</li>
-		//</ol>
-		return '';
-	}
-}
-
 class _MDInlineBlock extends _MDBlock {
 	/** @var {_MDSpan[]} */
 	#content;
 		this.#content = content;
 	}
 
-	toHTML(config) {
-		return _MDSpan.toHTML(this.#content);
+	toHTML(state) {
+		return _MDSpan.toHTML(this.#content, state);
 	}
 }
 
 	#abbreviations = {};
 
 	/** @var {Object} */
+	#abbreviationRegexes = {};
+
+	/** @var {Object} */
 	#footnotes = {};
 
 	/** @var {number} */
 	#parent = null;
 
 	/** @var {Object} */
-	get abbreviations() { (this.#parent) ? this.#parent.abbreviations : this.#abbreviations; }
+	get abbreviations() {
+		return (this.#parent) ? this.#parent.abbreviations : this.#abbreviations;
+	}
 
 	/** @var {Object} */
-	get footnotes() { (this.#parent) ? this.#parent.footnotes : this.#footnotes; }
+	get abbreviationRegexes() {
+		return (this.#parent) ? this.#parent.abbreviationRegexes : this.#abbreviationRegexes;
+	}
+
+	/** @var {Object} */
+	get footnotes() {
+		return (this.#parent) ? this.#parent.footnotes : this.#footnotes;
+	}
 
 	/**
 	 * @param {String[]} lines
 	defineAbbreviation(abbreviation, definition) {
 		if (this.#parent) {
 			this.#parent.defineAbbreviation(abbreviation, definition);
-		} else {
-			this.#abbreviations[abbreviation] = definition;
+			return;
 		}
+		this.#abbreviations[abbreviation] = definition;
+		let regex = new RegExp("\\b(" + abbreviation + ")\\b", "ig");
+		this.#abbreviationRegexes[abbreviation] = regex;
 	}
 
 	/**
 	 */
 	static #readNextBlock(state) {
 		while (state.hasLines(1) && state.lines[state.p].trim().length == 0) {
-			console.info("Skipping blank line " + state.p);
 			state.p++;
 		}
 		var block;
 		block = this.#readIndentedCodeBlock(state); if (block) return block;
 		block = this.#readHorizontalRule(state); if (block) return block;
 		block = this.#readTable(state); if (block) return block;
-		block = this.#readDefinitionList(state); if (block) return block;
 		block = this.#readFootnoteDef(state); if (block) return block;
 		block = this.#readAbbreviationDef(state); if (block) return block;
+		block = this.#readDefinitionList(state); if (block) return block;
 		block = this.#readParagraph(state); if (block) return block;
 		return null;
 	}
 	// Modified from https://emailregex.com/ to remove capture groups.
 	static #baseEmailRegex = /(?:(?:[^<>()\[\]\\.,;:\s@"]+(?:\.[^<>()\[\]\\.,;:\s@"]+)*)|(?:".+"))@(?:(?:\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(?:(?:[a-z\-0-9]+\.)+[a-z]{2,}))/i;
 
-	static #footnoteWithTitleRegex = /^\[\^\s*([^\]"]+?)\s+"(.*?)"\s*\]/;  // 1=symbol, 2=title
-	static #footnoteRegex = /^\[\^\s*([^\]]+?)\s*\]/;  // 1=symbol
+	static #footnoteWithTitleRegex = /^\[\^(\d+?)\s+"(.*?)"\]/;  // 1=symbol, 2=title
+	static #footnoteRegex = /^\[\^(\d+?)\]/;  // 1=symbol
 	static #labelRegex = /^\[(.*?)\]/;  // 1=content
-	static #urlWithTitleRegex = /^\((\S+?)\s+"(.*?)"\)/i;
+	static #urlWithTitleRegex = /^\((\S+?)\s+"(.*?)"\)/i;  // 1=URL, 2=title
 	static #urlRegex = /^\((\S+?)\)/i;  // 1=URL
 	static #emailWithTitleRegex = new RegExp("^\\(\\s*(" + this.#baseEmailRegex.source + ")\\s+\"(.*?)\"\\s*\\)", "i");  // 1=email, 2=title
 	static #emailRegex = new RegExp("^\\(\\s*(" + this.#baseEmailRegex.source + ")\\s*\\)", "i");  // 1=email
 			} else if (groups = this.#emailWithTitleRegex.exec(remainder)) {
 				// Email address with title   (user@example.com  "Foo")
 				endText();
-				tokens.push(new _MDToken(groups[0], _MDTokenType.Email, groups[1]));
+				tokens.push(new _MDToken(groups[0], _MDTokenType.Email, groups[1], groups[2]));
 				p += groups[0].length - 1;
 			} else if (groups = this.#urlRegex.exec(remainder)) {
 				// URL   (https://example.com)
 			])) !== null) {
 				let alt = spans[index + 1];
 				let url = spans[index + 2];
-				spans.splice(index, 3, new _MDImageSpan(url.content, alt.content));
+				spans.splice(index, 3, new _MDImageSpan(url.content, alt.content, url.extra));
 				anyChanges = true;
 			}
 			
 	 * @returns {_MDBlock}
 	 */
 	static #readInteriorContent(state, firstLineStartPos, stopRegex, inList=false) {
-		// FIXME: When reading <li> content need to detect nested list without
-		// a blank line
 		var p = state.p;
 		var seenBlankLine = false;
 		var needsBlocks = false;
 		return null;
 	}
 
-	static #hashHeaderRegex = /^(#{1,6})\s*([^#].*)\s*$/;  // 1=hashes, 2=content
+	static #hashHeaderRegex = /^(#{1,6})\s*([^#].*?)\s*\#*\s*$/;  // 1=hashes, 2=content
 
 	/**
 	 * @param {_MDState} state
 	 * @returns {_MDBlock|null}
 	 */
 	static #readFencedCodeBlock(state) {
+		if (!state.hasLines(2)) return null;
 		var p = state.p;
 		if (state.lines[p++].trim() != '```') return null;
 		var codeLines = [];
 	 * @returns {_MDBlock|null}
 	 */
 	static #readDefinitionList(state) {
-		// TODO: Definition list
-		return null;
+		var p = state.p;
+		var groups;
+		var termCount = 0;
+		var definitionCount = 0;
+		var defLines = [];
+		while (state.hasLines(1, p)) {
+			let line = state.lines[p++];
+			if (line.trim().length == 0) {
+				p--;
+				break;
+			}
+			if (/^\s+/.exec(line)) {
+				if (defLines.length == 0) return null;
+				defLines[defLines.length - 1] += "\n" + line;
+			} else if (/^:\s+/.exec(line)) {
+				defLines.push(line);
+				definitionCount++;
+			} else {
+				defLines.push(line);
+				termCount++;
+			}
+		}
+		if (termCount == 0 || definitionCount == 0) return null;
+		let blocks = defLines.map(function(line) {
+			if (groups = /^:\s+(.*)$/.exec(line)) {
+				return new _MDDefinitionDefinitionBlock(Markdown.#readInline(state, groups[1]));
+			} else {
+				return new _MDDefinitionTermBlock(Markdown.#readInline(state, line));
+			}
+		});
+		state.p = p;
+		return new _MDDefinitionListBlock(blocks);
 	}
 
 	/**
 	 * @returns {_MDBlock|null}
 	 */
 	static #readFootnoteDef(state) {
-		// TODO: Footnote definition
-		return null;
+		var p = state.p;
+		let groups = /^\s*\[\^\s*([^\]]+)\s*\]:\s+(.*)\s*$/.exec(state.lines[p++]);
+		if (groups === null) return null;
+		let symbol = groups[1];
+		let def = groups[2];
+		while (state.hasLines(1, p)) {
+			let line = state.lines[p++];
+			if (/^\s+/.exec(line)) {
+				def += "\n" + line;
+			} else {
+				p--;
+				break;
+			}
+		}
+		state.p = p;
+		let content = this.#readInline(state, def);
+		state.defineFootnote(symbol, content);
+		state.p = p;
+		return new _MDMultiBlock([]);
 	}
 
 	/**
 	 * @returns {_MDBlock|null}
 	 */
 	static #readAbbreviationDef(state) {
-		// TODO: Abbreviation definition
-		return null;
+		var p = state.p;
+		let line = state.lines[p++];
+		let groups = /^\s*\*\[([^\]]+?)\]:\s+(.*?)\s*$/.exec(line);
+		if (groups === null) return null;
+		let abbrev = groups[1];
+		let def = groups[2];
+		state.defineAbbreviation(abbrev, def);
+		state.p = p;
+		return new _MDMultiBlock([]);
 	}
 
 	/**
 	}
 
 	/**
+	 * @param {String} html
+	 * @param {_MDState} state
+	 * @returns {String}
+	 */
+	static #postProcessFootnotes(html, state) {
+		let footnotes = state.footnotes;
+		if (Object.keys(footnotes).length == 0) return html;
+		var symbolOrder = [];
+		var footnoteOccurrences = {};
+		var footnoteIndex = 0;
+		html = html.replace(/<!--FNREF:{(\d+)}-->/g, function(match, symbol) {
+			footnoteIndex++;
+			symbol = symbol.toLowerCase();
+			if (!symbolOrder.includes(symbol)) {
+				symbolOrder.push(symbol);
+			}
+			var occurrences = footnoteOccurrences[symbol] || [];
+			occurrences.push(footnoteIndex);
+			footnoteOccurrences[symbol] = occurrences;
+			return `<sup id="footnoteref_${footnoteIndex}"><a href="#footnote_${symbol}">${symbol}</a></sup>`;
+		});
+		if (footnoteIndex == 0) return html;
+		html += '<div class="footnotes"><hr/>';
+		html += '<ol>';
+		for (const symbol of symbolOrder) {
+			let content = state.footnotes[symbol];
+			if (!content) continue;
+			html += `<li value="${symbol}" id="footnote_${symbol}">${content.toHTML(state)}`;
+			for (const ref of footnoteOccurrences[symbol]) {
+				html += ` <a href="#footnoteref_${ref}" class="footnote-backref" role="doc-backlink">↩︎</a>`;
+			}
+			html += `</li>\n`;
+		}
+		html += '</ol>';
+		html += '</div>';
+		// <!--FNREF:{symbol}-->
+		return html;
+	}
+
+	/**
 	 * @param  {String} markdown
 	 * @returns {String} HTML
 	 */
 		let lines = markdown.split(/(?:\n|\r|\r\n)/);
 		state.lines = lines;
 		let blocks = this.#readBlocks(state);
-		let html = _MDBlock.toHTML(blocks);
+		let html = _MDBlock.toHTML(blocks, state);
+		html = this.#postProcessFootnotes(html, state);
 		return html;
 	}
 }

markdownjs.html

 	<head>
 		<meta charset="utf-8">
 		<title>Markdown Test</title>
-		<script src="js/markdown.js"></script>
-		<script>
-			function onDocumentLoad() {
-				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);
-				setTimeout(onMarkdownChange, 0);
-			}
-			function onMarkdownChange() {
-				let markdown = document.getElementById('markdowninput').value;
-				let html = Markdown.toHTML(markdown);
-				document.getElementById('preview').innerHTML = html;
-			}
-
-			document.addEventListener('DOMContentLoaded', onDocumentLoad);
-		</script>
-		<style>
+		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
+		<style type="text/css">
 			:root, body {
 				width: 100%;
 				height: 100%;
 				padding: 0.2em 0.5em;
 			}
 		</style>
+		<script src="js/markdown.js"></script>
+		<script>
+			function onDocumentLoad() {
+				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);
+				setTimeout(onMarkdownChange, 0);
+			}
+			function onMarkdownChange() {
+				let markdown = document.getElementById('markdowninput').value;
+				let html = Markdown.toHTML(markdown);
+				document.getElementById('preview').innerHTML = html;
+			}
+
+			document.addEventListener('DOMContentLoaded', onDocumentLoad);
+		</script>
 	</head>
 
 	<body>