Sorta kinda working JS parser before I rework it completely

.gitignore

@@ -0,0 +1 @@
+.DS_Store

js/markdown.js

@@ -0,0 +1,400 @@
+class MDState {
+	/** @var {object} */
+	abbreviations = {};
+
+	/** @var {object} */
+	footnotes = {};
+}
+
+class MDConfig {
+
+}
+
+class MDBlock {
+	/**
+	 * @returns {String} HTML
+	 */
+	toHTML(config, state) {
+		throw new Error("toHTML not implemented");
+	}
+}
+
+class MDHTMLBlock extends MDBlock {
+	/** @var {String} html */
+	html;
+
+	/**
+	 * @param {String} html
+	 */
+	constructor(html) {
+		super();
+		this.html = html;
+	}
+
+	toHTML = (config, state) => this.html;
+}
+
+class MDHTMLWrappedBlock extends MDBlock {
+	/** @var {String} */
+	#beforeHTML;
+	/** @var {MDBlock} */
+	#content;
+	/** @var {String} */
+	#afterHTML;
+
+	/**
+	 * @param {String} beforeHTML
+	 * @param {MDBlock} content
+	 * @param {String} afterHTML
+	 */
+	constructor(beforeHTML, content, afterHTML) {
+		super();
+		if (!(content instanceof MDBlock)) {
+			throw new Error("content is of type " + typeof(content) + " instead of MDBlock");
+		}
+		this.#beforeHTML = beforeHTML;
+		this.#content = content;
+		this.#afterHTML = afterHTML;
+	}
+
+	toHTML(config, state) {
+		return this.#beforeHTML + this.#content.toHTML() + this.#afterHTML;
+	}
+}
+
+class MDInlineBlock extends MDBlock {
+	/** @var {String} */
+	#html;
+
+	/**
+	 * @param {String} line
+	 */
+	constructor(line) {
+		super();
+		this.#html = line;
+	}
+
+	toHTML = (config, state) => "inline:" + this.#html;
+}
+
+class MDUnprocessedLinesBlock extends MDBlock {
+	/** @var {MDBlock[]} */
+	#blocks = [];
+
+	/**
+	 * @param {String[]} lines
+	 */
+	constructor(lines) {
+		super();
+		// Find markers that always start a new block
+		let blockQuoteBlocks = MDUnprocessedLinesBlock.findBlockQuote(lines);
+		if (blockQuoteBlocks) {
+			this.#blocks = blockQuoteBlocks;
+			return;
+		}
+		let headerBlocks = MDUnprocessedLinesBlock.findHeader(lines);
+		if (headerBlocks) {
+			this.#blocks = headerBlocks;
+			return;
+		}
+		let codeLines = MDUnprocessedLinesBlock.findTickCodeBlock(lines);
+		if (codeLines) {
+			this.#blocks = codeLines;
+			return;
+		}
+		let codeLines0 = MDUnprocessedLinesBlock.findIndentCodeBlock(lines);
+		if (codeLines0) {
+			this.#blocks = codeLines0;
+			return;
+		}
+		// Find runs of contiguous non-blank lines
+		var contiguousLines = [];
+		let blankRegex = /^\s*$/;
+		for (const line of lines) {
+			if (blankRegex.exec(line)) {
+				if (contiguousLines.length > 0) {
+					this.#blocks.push(new MDContiguousUnprocessedLinesBlock(contiguousLines));
+				}
+				contiguousLines = [];
+			} else {
+				contiguousLines.push(line);
+			}
+		}
+		if (contiguousLines.length > 0) {
+			this.#blocks.push(new MDContiguousUnprocessedLinesBlock(contiguousLines));
+		}
+	}
+
+	/**
+	 * @param {String[]} lines
+	 * @returns {MDBlock[]} up to 3 blocks for the unprocessed lines and the blockquoted content, or null if not found
+	 */
+	static findBlockQuote(lines) {
+		var portion = 0;
+		var beforeLines = [];
+		var blockQuoteLines = [];
+		var afterLines = [];
+		for (const line of lines) {
+			switch (portion) {
+				case 0:
+					if (line.startsWith(">")) {
+						blockQuoteLines.push(line.substring(1));
+						portion = 1;
+					} else {
+						beforeLines.push(line);
+					}
+					break;
+				case 1:
+					if (line.startsWith(">")) {
+						blockQuoteLines.push(line.substring(1));
+					} else {
+						afterLines.push(line);
+						portion = 2;
+					}
+					break;
+				case 2:
+					afterLines.push(line);
+					break;
+			}
+		}
+		if (blockQuoteLines.length == 0) {
+			return null;
+		}
+		var blocks = [];
+		if (beforeLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(beforeLines));
+		}
+		blocks.push(new MDHTMLWrappedBlock(
+			"<blockquote>\n",
+			new MDUnprocessedLinesBlock(Markdown.trimEvenly(blockQuoteLines)),
+			"</blockquote>\n"));
+		if (afterLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(afterLines));
+		}
+		return blocks;
+	}
+
+	/**
+	 * @param {String[]} lines
+	 * @returns {MDBlock[]} up to 3 blocks for the unprocessed lines and the header content, or null if not found
+	 */
+	static findHeader(lines) {
+		var portion = 0;
+		var beforeLines = [];
+		var headerBlock = null;
+		var afterLines = [];
+		for (const line of lines) {
+			let hashMatch = /^\s*(#{1,6})\s*(.*)$/.exec(line);
+			let dashMatch = /^(-+|=+)$/.exec(line);
+			switch (portion) {
+				case 0:
+					if (hashMatch) {
+						let headerLevel = hashMatch[1].length;
+						let contentMarkdown = hashMatch[2];
+						headerBlock = new MDHTMLWrappedBlock('<h' + headerLevel + '>', new MDInlineBlock(contentMarkdown), '</h' + headerLevel + ">\n");
+						portion = 1;
+					} else if (dashMatch && beforeLines.length > 1) {
+						let contentMarkdown = beforeLines.pop();
+						let headerLevel = dashMatch[1].startsWith("=") ? 1 : 2;
+						headerBlock = new MDHTMLWrappedBlock('<h' + headerLevel + '>', new MDInlineBlock(contentMarkdown), '</h' + headerLevel + ">\n");
+						portion = 1;
+					} else {
+						beforeLines.push(line);
+					}
+					break;
+				case 1:
+					afterLines.push(line);
+					break;
+			}
+		}
+		if (headerBlock == null) {
+			return null;
+		}
+		var blocks = [];
+		if (beforeLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(beforeLines));
+		}
+		blocks.push(headerBlock);
+		if (afterLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(afterLines));
+		}
+		return blocks;
+	}
+
+	/**
+	 * @param {String[]} lines
+	 * @returns {MDBlock[]} up to 3 blocks for the unprocessed lines and the code content, or null if not found
+	 */
+	static findTickCodeBlock(lines) {
+		var portion = 0;
+		var beforeLines = [];
+		var codeLines = [];
+		var afterLines = [];
+		for (const line of lines) {
+			switch (portion) {
+				case 0:
+					if (/^\s*```\s*$/.exec(line)) {
+						portion = 1;
+					} else {
+						beforeLines.push(line);
+					}
+					break;
+				case 1:
+					if (/^\s*```\s*$/.exec(line)) {
+						portion = 2;
+					} else {
+						codeLines.push(line);
+					}
+					break;
+				case 2:
+					afterLines.push(line);
+					break;
+			}
+		}
+		if (codeLines.length == 0) return null;
+		var blocks = [];
+		if (beforeLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(beforeLines));
+		}
+		blocks.push(new MDHTMLWrappedBlock("<pre>", MDHTMLBlock(codeLines.join("\n")), "</pre>\n"));
+		if (afterLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(afterLines));
+		}
+		return blocks;
+	}
+
+	/**
+	 * @param {String[]} lines
+	 * @returns {MDBlock[]} up to 3 blocks for the unprocessed lines and the code content, or null if not found
+	 */
+	static findIndentCodeBlock(lines) {
+		var portion = 0;
+		var beforeLines = [];
+		var codeLines = [];
+		var afterLines = [];
+		let regex = /^(\s{4,})(.*)$/;
+		var minIndent = 999999;
+		for (const line of lines) {
+			let indentMatch = regex.exec(line);
+			switch (portion) {
+				case 0:
+					if (indentMatch) {
+						minIndent = Math.min(minIndent, indentMatch[1].length);
+						codeLines.push(line);
+						portion = 1;
+					} else {
+						beforeLines.push(line);
+					}
+					break;
+				case 1:
+					if (indentMatch) {
+						minIndent = Math.min(minIndent, indentMatch[1].length);
+						codeLines.push(line);
+					} else {
+						afterLines.push(line);
+						portion = 2;
+					}
+					break;
+				case 2:
+					afterLines.push(line);
+					break;
+			}
+		}
+		if (codeLines.length == 0) return null;
+		var blocks = [];
+		if (beforeLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(beforeLines));
+		}
+		blocks.push(new MDHTMLWrappedBlock("<pre>", new MDHTMLBlock(codeLines.map((l) => l.substring(minIndent)).join("\n")), "</pre>\n"));
+		if (afterLines.length > 0) {
+			blocks.push(new MDUnprocessedLinesBlock(afterLines));
+		}
+		return blocks;
+	}
+
+	toHTML(config, state) {
+		var html = "";
+		for (const block of this.#blocks) {
+			html += block.toHTML() + "\n";
+		}
+		return html;
+	}
+}
+
+class MDContiguousUnprocessedLinesBlock extends MDBlock {
+	/** @var {MDBlock[]} */
+	#blocks;
+
+	/**
+	 * @param {String[]} lines
+	 */
+	constructor(lines) {
+		super();
+		this.#blocks = [ new MDHTMLWrappedBlock('<p>contiguous: ', new MDInlineBlock(lines.join(' ')), "</p>\n\n") ];
+	}
+
+	toHTML(config, state) {
+		var html = "";
+		for (const block of this.#blocks) {
+			html += block.toHTML() + "\n";
+		}
+		return html;
+	}
+}
+
+class Markdown {
+	/**
+	 * @param  {String} markdown
+	 * @returns {String} HTML
+	 */
+	static toHTML(markdown, config=new MDConfig()) {
+		// Blocks that immediately start a new block
+		// - Headers
+		// - Blockquote
+		// - Code block   ```\ncode\n```
+		// Blocks that need blank line first
+		// - HR   ---   - - -   ***   * * * * * *
+		// - Lists
+		// - Table
+		// - Code block   [4+spaces]code
+		// - Definition list   term\n: definition\n: alternate def
+		// Unknown blocks
+		// - Footnotes   some text[^1]   [^1]: first footnote content
+		// - Abbreviations   *[HTML]: Hyper Text
+		// Inline styles
+		// - Links
+		// - Italic
+		// - Bold
+		// - `code`
+		// - Strikethrough
+		// - Images   ![alt text](url){.cssclass}
+		// - Literals   \*
+
+		let state = new MDState();
+		let lines = markdown.trim().replace("\r", "").split("\n");
+		return new MDUnprocessedLinesBlock(lines).toHTML(config, state);
+	}
+
+	/**
+	 * @param {String[]} lines
+	 * @returns {String[]}
+	 */
+	static trimEvenly(lines) {
+		var minIndent = 999999;
+		let regex = /^(\s*)($|\S.*$)/;
+		for (const line of lines) {
+			let groups = regex.exec(line);
+			let indent = groups[1].length;
+			if (groups[2].trim().length > 0 && indent < 4) {
+				minIndent = Math.min(minIndent, indent);
+			}
+		}
+		if (minIndent == 0) return lines;
+		var trimmed = [];
+		let trimRegex = new RegExp(`^\s{${minIndent}}`);
+		for (const line of lines) {
+			trimmed.push(line.replace(trimRegex, ''));
+		}
+		return trimmed;
+	}
+}

markdownjs.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<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);
+			}
+			function onMarkdownChange() {
+				let markdown = document.getElementById('markdowninput').value;
+				let html = Markdown.toHTML(markdown);
+				document.getElementById('preview').innerHTML = html;
+			}
+
+			document.addEventListener('DOMContentLoaded', onDocumentLoad);
+		</script>
+		<style>
+			:root, body {
+				width: 100%;
+				height: 100%;
+				padding: 0;
+				margin: 0;
+			}
+			.previewhalf {
+				position: relative;
+				width: 100%;
+				height: 50%;
+				background-color: white;
+				overflow-y: auto;
+			}
+			.inputhalf {
+				position: relative;
+				width: 100%;
+				height: 50%;
+				background-color: #0000aa;
+				color: white;
+			}
+			#preview {
+				padding: 1em;
+				margin: 0 auto;
+				max-width: 600px;
+			}
+			#markdowninput {
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0.5em;
+				border: 0;
+				background-color: #0000aa;
+				color: white;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div class="previewhalf half">
+			<div id="preview">
+				<p>Preview here</p>
+			</div>
+		</div>
+		<div class="inputhalf half">
+			<textarea id="markdowninput">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis vel metus ut tempor. Morbi dictum, velit quis venenatis consequat, ante leo dignissim magna, quis efficitur ex magna nec ex. In egestas aliquet tortor, vitae posuere dui lobortis ac. Pellentesque quis hendrerit lorem. In maximus ut sapien vel tristique. Pellentesque ut tincidunt orci. Phasellus dignissim massa sit amet tellus placerat finibus. Ut elementum tortor ex, non aliquam libero semper eu.
+
+Duis gravida convallis nisi ullamcorper tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum varius arcu non molestie. Ut cursus, lorem nec pellentesque interdum, augue risus pellentesque ligula, at vehicula turpis mi vitae nisi. Vivamus pulvinar eget lorem non lacinia. Pellentesque pretium ex at metus elementum semper. Donec tincidunt metus ac ex aliquam, ac iaculis purus facilisis. Phasellus iaculis scelerisque nisl, eu molestie dui sollicitudin sed. Suspendisse ut felis porttitor, sollicitudin urna in, venenatis neque. Donec nec mi ultrices, molestie quam quis, iaculis libero.
+
+Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue consequat vestibulum. Etiam luctus, leo placerat ullamcorper venenatis, nunc metus fringilla sapien, id elementum tellus nulla eu nunc. Integer pulvinar egestas scelerisque. Sed accumsan libero eget pretium sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium egestas elit id cursus. Morbi euismod elementum eros ut eleifend. Praesent velit sem, faucibus sed sapien sit amet, pellentesque fermentum nibh. Nulla consequat turpis nec lacus consequat, sed congue magna consectetur. Nam id urna rhoncus, consectetur eros ac, tempor nisl.
+
+Curabitur fermentum nunc sed dapibus feugiat. Etiam volutpat viverra eros sit amet tristique. Suspendisse cursus venenatis accumsan. Suspendisse venenatis vehicula lectus, sed venenatis augue pretium eu. Cras dui eros, iaculis in dictum hendrerit, tincidunt ut sapien. Ut nec nulla ut mauris cursus tincidunt. Suspendisse interdum pulvinar elit sit amet auctor. Donec id lacus tincidunt, varius elit non, tempor felis.
+
+Quisque posuere, libero ac elementum maximus, lacus nulla lobortis nibh, id aliquam tortor lacus vel quam. Nunc eget dolor non nunc sagittis varius. Proin viverra vestibulum placerat. Fusce placerat interdum diam quis sollicitudin. Praesent sed tincidunt orci. Suspendisse lectus lorem, porta vel quam sit amet, pharetra interdum purus. Suspendisse ac lacus consequat, dapibus nunc in, porttitor purus. Nam dictum elit eget massa tincidunt tempus. Vestibulum blandit, lorem et accumsan tristique, orci dolor vulputate magna, et posuere lorem sapien non sapien. Vivamus nulla justo, eleifend et metus sit amet, gravida iaculis erat. Fusce lacinia cursus accumsan. 
+			</textarea>
+		</div>
+	</body>
+</html>