CSS modifiers for many block elements supported. Dark mode on test page.

js/markdown.js

@@ -1,14 +1,11 @@
-// FIXME: Nested lists not working right
 // FIXME: Nested blockquotes require blank line
 // TODO: HTML tags probably need better handling. Consider whether interior of matched tags should be interpreted as markdown.
 // TODO: {.class #cssid lang=fr}
-//     # Header {.class}
-//     Header {.class}
-//     ---
 //     [link](url){.class}
-//     ``` {.class}
 // TODO: Test broken/incomplete syntax thoroughly
 // TODO: Sanity checks on loops/recursion?
+// TODO: Tolerate whitespace between tokens (e.g. [click here] [urlref])
+// TODO: Spreadsheet functions in tables
 
 class _MDHAlign {
 	static Left = new _MDHAlign('Left');
@@ -53,6 +50,7 @@ class _MDTokenType {
 	static SimpleLink = new _MDTokenType('SimpleLink'); // content=URL
 	static SimpleEmail = new _MDTokenType('SimpleEmail'); // content=email address
 	static Footnote = new _MDTokenType('Footnote'); // content=symbol
+	static Class = new _MDTokenType('Class'); // content
 
 	static HTMLTag = new _MDTokenType('HTMLTag'); // content=tag string, tag=_MDHTMLTag
 
@@ -917,6 +915,85 @@ class _MDState {
 	}
 }
 
+class _MDTagModifier {
+	/** @var {String} */
+	original;
+	/** @var {String[]} */
+	cssClasses = [];
+	/** @var {String|null} */
+	id = null;
+	/** @var {Object} */
+	attributes = {};
+
+	static #baseClassRegex = /\.([a-z_\-][a-z0-9_\-]*)/i;
+	static #baseIdRegex = /#([a-z_\-][a-z0-9_\-]*)/i;
+	static #baseAttributeRegex = /([a-z0-9]+)=([^\s\}]+)/i;
+	static #modifierRegex = new RegExp('(?:' + this.#baseClassRegex.source + '|' + this.#baseIdRegex.source + '|' + this.#baseAttributeRegex.source + ')', 'i');
+	// static #baseRegex = new RegExp('\\{(' + this.#modifierRegex.source + '(?:\\s+' + this.#modifierRegex.source + '))\\}', 'i'); //  /\{((?:||)(?:\s+(?:\.[a-z_\-][a-z0-9_\-]*|#[a-z_\-][a-z0-9_\-]*|[a-z0-9]+=\S+)))\}/i; // 1=content
+	static #baseRegex = /\{([^}]+)}/i;
+	static #leadingClassRegex = new RegExp('^' + this.#baseRegex.source, 'i');
+	static #trailingClassRegex = new RegExp('^(.*?)\\s*' + this.#baseRegex.source + '\\s*$', 'i');
+	static #classRegex = new RegExp('^' + this.#baseClassRegex.source + '$', 'i');  // 1=classname
+	static #idRegex = new RegExp('^' + this.#baseIdRegex.source + '$', 'i');  // 1=id
+	static #attributeRegex = new RegExp('^' + this.#baseAttributeRegex.source + '$', 'i');  // 1=attribute name, 2=attribute value
+
+	/**
+	 * @param {_MDBlock|_MDSpan} elem
+	 */
+	applyTo(elem) {
+		if (elem instanceof _MDBlock || elem instanceof _MDSpan) {
+			elem.cssClasses = elem.cssClasses.concat(this.cssClasses);
+			if (this.id) elem.id = this.id;
+			for (const name in this.attributes) {
+				elem.attributes[name] = this.attributes[name];
+			}
+		}
+	}
+
+	static #fromContents(contents) {
+		let modifierTokens = contents.split(/\s+/);
+		let mod = new _MDTagModifier();
+		mod.original = `{${contents}}`;
+		var groups;
+		for (const token of modifierTokens) {
+			if (token.trim() == '') continue;
+			if (groups = this.#classRegex.exec(token)) {
+				mod.cssClasses.push(groups[1]);
+			} else if (groups = this.#idRegex.exec(token)) {
+				mod.id = groups[1];
+			} else if (groups = this.#attributeRegex.exec(token)) {
+				mod.attributes[groups[1]] = groups[2];
+			} else {
+				return null;
+			}
+		}
+		return mod;
+	}
+
+	/**
+	 * Extracts modifier from line.
+	 * @param {String} line
+	 * @returns {Array} Tuple with remaining line and _MDTagModifier.
+	 */
+	static fromLine(line) {
+		let groups = this.#trailingClassRegex.exec(line);
+		if (groups === null) return [ line, null ];
+		let bareLine = groups[1];
+		let mod = this.#fromContents(groups[2]);
+		return [ bareLine, mod ];
+	}
+
+	/**
+	 * @param {String} line
+	 * @returns {String}
+	 */
+	static strip(line) {
+		let groups = this.#trailingClassRegex.exec(line);
+		if (groups === null) return line;
+		return groups[1];
+	}
+}
+
 class Markdown {
 	/**
 	 * @param {String} line
@@ -1563,16 +1640,22 @@ class Markdown {
 	static #readUnderlineHeader(state) {
 		var p = state.p;
 		if (!state.hasLines(2)) return null;
+		var modifier;
 		let contentLine = state.lines[p++].trim();
+		[contentLine, modifier] = _MDTagModifier.fromLine(contentLine);
 		let underLine = state.lines[p++].trim();
 		if (contentLine == '') return null;
 		if (/^=+$/.exec(underLine)) {
 			state.p = p;
-			return new _MDHeaderBlock(1, this.#readInline(state, contentLine));
+			let block = new _MDHeaderBlock(1, this.#readInline(state, contentLine));
+			if (modifier) modifier.applyTo(block);
+			return block;
 		}
 		if (/^\-+$/.exec(underLine)) {
 			state.p = p;
-			return new _MDHeaderBlock(2, this.#readInline(state, contentLine));
+			let block = new _MDHeaderBlock(2, this.#readInline(state, contentLine));
+			if (modifier) modifier.applyTo(block);
+			return block;
 		}
 		return null;
 	}
@@ -1585,10 +1668,15 @@ class Markdown {
 	 */
 	static #readHashHeader(state) {
 		var p = state.p;
-		var groups = this.#hashHeaderRegex.exec(state.lines[p++]);
+		let line = state.lines[p++];
+		var modifier;
+		[line, modifier] = _MDTagModifier.fromLine(line);
+		var groups = this.#hashHeaderRegex.exec(line);
 		if (groups === null) return null;
 		state.p = p;
-		return new _MDHeaderBlock(groups[1].length, this.#readInline(state, groups[2]));
+		let block = new _MDHeaderBlock(groups[1].length, this.#readInline(state, groups[2]));
+		if (modifier) modifier.applyTo(block);
+		return block;
 	}
 
 	/**
@@ -1687,13 +1775,18 @@ class Markdown {
 	static #readFencedCodeBlock(state) {
 		if (!state.hasLines(2)) return null;
 		var p = state.p;
-		if (state.lines[p++].trim() != '```') return null;
+		let openFenceLine = state.lines[p++];
+		var modifier;
+		[openFenceLine, modifier] = _MDTagModifier.fromLine(openFenceLine);
+		if (openFenceLine.trim() != '```') return null;
 		var codeLines = [];
 		while (state.hasLines(1, p)) {
 			let line = state.lines[p++];
 			if (line.trim() == '```') {
 				state.p = p;
-				return new _MDCodeBlock(codeLines.join("\n"));
+				let block = new _MDCodeBlock(codeLines.join("\n"));
+				if (modifier) modifier.applyTo(block);
+				return block;
 			}
 			codeLines.push(line);
 		}
@@ -1729,9 +1822,13 @@ class Markdown {
 	static #readHorizontalRule(state) {
 		var p = state.p;
 		let line = state.lines[p++];
+		var modifier;
+		[line, modifier] = _MDTagModifier.fromLine(line);
 		if (this.#horizontalRuleRegex.exec(line)) {
 			state.p = p;
-			return new _MDHorizontalRuleBlock();
+			let block = new _MDHorizontalRuleBlock();
+			if (modifier) modifier.applyTo(block);
+			return block;
 		}
 		return null;
 	}
@@ -1744,7 +1841,7 @@ class Markdown {
 	static #readTableRow(state, isHeader) {
 		if (!state.hasLines(1)) return null;
 		var p = state.p;
-		let line = state.lines[p++].trim();
+		let line = _MDTagModifier.strip(state.lines[p++].trim());
 		if (/.*\|.*/.exec(line) === null) return null;
 		if (line.startsWith('|')) line = line.substring(1);
 		if (line.endsWith('|')) line = line.substring(0, line.length - 1);
@@ -1788,6 +1885,9 @@ class Markdown {
 	static #readTable(state) {
 		if (!state.hasLines(2)) return null;
 		let startP = state.p;
+		let firstLine = state.lines[startP];
+		var ignore, modifier;
+		[ignore, modifier] = _MDTagModifier.fromLine(firstLine);
 		let headerRow = this.#readTableRow(state, true);
 		if (headerRow === null) {
 			state.p = startP;
@@ -1808,7 +1908,9 @@ class Markdown {
 			row.applyAlignments(columnAlignments);
 			bodyRows.push(row);
 		}
-		return new _MDTableBlock(headerRow, bodyRows);
+		let table = new _MDTableBlock(headerRow, bodyRows);
+		if (modifier) modifier.applyTo(table);
+		return table;
 	}
 
 	/**

markdownjs.html

@@ -5,11 +5,21 @@
 		<title>Markdown Test</title>
 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 		<style type="text/css">
+			:root {
+				--color-background: white;
+				--color-text: black;
+				--color-editor-background: #0000aa;
+				--color-editor-text: white;
+				--color-table-header: #ddd;
+				--color-table-border: black;
+			}
 			:root, body {
 				width: 100%;
 				height: 100%;
 				padding: 0;
 				margin: 0;
+				background-color: var(--color-background);
+				color: var(--color-text);
 			}
 			.inputhalf {
 				position: absolute;
@@ -17,8 +27,8 @@
 				height: 100%;
 				left: 0;
 				top: 0;
-				background-color: #0000aa;
-				color: white;
+				background-color: var(--color-editor-background);
+				color: var(--color-editor-text);
 			}
 			.previewhalf {
 				position: absolute;
@@ -26,7 +36,6 @@
 				height: 100%;
 				left: 50%;
 				top: 0;
-				background-color: white;
 				overflow-y: auto;
 			}
 			#preview {
@@ -41,19 +50,27 @@
 				margin: 0;
 				padding: 0.5em;
 				border: 0;
-				background-color: #0000aa;
-				color: white;
+				background-color: var(--color-editor-background);
+				color: var(--color-editor-text);
 			}
 			table {
 				border-collapse: collapse;
 			}
 			table th {
-				background-color: #ddd;
+				background-color: var(--color-table-header);
 			}
 			table td, table th {
-				border: 1px solid black;
+				border: 1px solid var(--color-table-border);
 				padding: 0.2em 0.5em;
 			}
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--color-background: black;
+					--color-text: white;
+					--color-table-header: #333;
+					--color-table-border: #ccc;
+				}
+			}
 		</style>
 		<script src="js/markdown.js"></script>
 		<script>