Id differentiator added. CSS improvements to playground. Fixes to footnote links.

js/markdown.js

@@ -578,9 +578,6 @@ class MDState {
 	/** @type {MDState|null} */
 	#parent = null;
 
-	/** @type {MDConfig} */
-	config;
-
 	/**
 	 * Array of `MDReader`s sorted by block reading priority.
 	 * @type {MDReader[]}
@@ -600,6 +597,15 @@ class MDState {
 	readersBySubstitutePriority = [];
 
 	/**
+	 * Prefix to include in any generated `id` attributes on HTML elements.
+	 * Useful for keeping elements unique in multiple parsed documents in the
+	 * same HTML page.
+	 *
+	 * @type {string}
+	 */
+	elementIdPrefix = '';
+
+	/**
 	 * Mapping of reference symbols to URLs.
 	 * @type {object}
 	 */
@@ -618,23 +624,9 @@ class MDState {
 
 	/**
 	 * @param {string[]} lines - lines of markdown text
-	 * @param {MDConfig} config
-	 * @param {MDReader[]} readersByBlockPriority
-	 * @param {MDReader[]} readersByTokenPriority
-	 * @param {Array} readersBySubstitutePriority - tuple arrays of priority and MDReader
-	 */
-	constructor(lines,
-		config=null,
-		readersByBlockPriority=null,
-		readersByTokenPriority=null,
-		readersBySubstitutePriority=null,
-		tagFilter=null) {
+	 */
+	constructor(lines) {
 		this.#lines = lines;
-		this.config = config;
-		this.readersByBlockPriority = readersByBlockPriority
-		this.readersByTokenPriority = readersByTokenPriority
-		this.readersBySubstitutePriority = readersBySubstitutePriority
-		this.tagFilter = tagFilter;
 	}
 
 	/**
@@ -647,7 +639,6 @@ class MDState {
 	copy(lines) {
 		let cp = new MDState(lines);
 		cp.#parent = this;
-		cp.config = this.config;
 		return cp;
 	}
 
@@ -2034,14 +2025,21 @@ class MDStrongReader extends MDSimplePairInlineReader {
 }
 
 class MDStrikethroughReader extends MDSimplePairInlineReader {
+	/** @type {boolean} */
+	singleTildeEnabled = true;
+	/** @type {boolean} */
+	doubleTildeEnabled = true;
+
 	readToken(state, line) {
 		if (line.startsWith('~')) return new MDToken('~', MDTokenType.Tilde);
 		return null;
 	}
 
 	substituteTokens(state, pass, tokens) {
-		if (this.attemptPair(state, pass, tokens, MDStrikethroughNode, MDTokenType.Tilde, 2)) return true;
-		if (state.config.strikethroughSingleTildeEnabled) {
+		if (this.singleTildeEnabled) {
+			if (this.attemptPair(state, pass, tokens, MDStrikethroughNode, MDTokenType.Tilde, 2)) return true;
+		}
+		if (this.doubleTildeEnabled) {
 			if (this.attemptPair(state, pass, tokens, MDStrikethroughNode, MDTokenType.Tilde)) return true;
 		}
 		return false;
@@ -2266,11 +2264,6 @@ class MDSubscriptReader extends MDSimplePairInlineReader {
 		return null;
 	}
 
-	preProcess(state) {
-		// Causes a conflict
-		state.config.strikethroughSingleTildeEnabled = false;
-	}
-
 	substituteTokens(state, pass, tokens) {
 		return this.attemptPair(state, pass, tokens, MDSubscriptNode, MDTokenType.Tilde);
 	}
@@ -2747,6 +2740,17 @@ class MDDefinitionListDefinitionNode extends MDBlockNode {
 }
 
 class MDFootnoteListNode extends MDBlockNode {
+	/**
+	 * @param {MDState} state
+	 * @param {string} symbol
+	 * @return {number}
+	 */
+	#footnoteId(state, symbol) {
+		const lookup = state.root['footnoteIds'];
+		if (!lookup) return null;
+		return lookup[symbol] ?? null;
+	}
+
 	toHTML(state) {
 		const footnotes = state.footnotes;
 		var symbolOrder = Object.keys(footnotes);
@@ -2759,12 +2763,13 @@ class MDFootnoteListNode extends MDBlockNode {
 			/** @type {MDNode[]} */
 			let content = footnotes[symbol];
 			if (!content) continue;
+			let footnoteId = this.#footnoteId(state, symbol);
 			const contentHTML = MDNode.toHTML(content, state);
-			html += `<li value="${symbol}" id="footnote_${symbol}">${contentHTML}`;
+			html += `<li value="${symbol}" id="${state.root.elementIdPrefix}footnote_${footnoteId}">${contentHTML}`;
 			const uniques = footnoteUniques[symbol];
 			if (uniques) {
 				for (const unique of uniques) {
-					html += ` <a href="#footnoteref_${unique}" class="footnote-backref">↩︎</a>`;
+					html += ` <a href="#${state.root.elementIdPrefix}footnoteref_${unique}" class="footnote-backref">↩︎</a>`;
 				}
 			}
 			html += `</li>\n`;
@@ -2908,7 +2913,8 @@ class MDFootnoteNode extends MDInlineNode {
 
 	toHTML(state) {
 		if (this.differentiator !== null) {
-			return `<sup id="footnoteref_${this.occurrenceId}"${this._htmlAttributes()}><a href="#footnote_${this.footnoteId}">${MDUtils.escapeHTML(this.displaySymbol ?? this.symbol)}</a></sup>`;
+			return `<sup id="${state.root.elementIdPrefix}footnoteref_${this.occurrenceId}"${this._htmlAttributes()}>` +
+				`<a href="#${state.root.elementIdPrefix}footnote_${this.footnoteId}">${MDUtils.escapeHTML(this.displaySymbol ?? this.symbol)}</a></sup>`;
 		}
 		return `<!--FNREF:{${this.symbol}}-->`;
 	}
@@ -3747,10 +3753,6 @@ class MDTagModifier {
 	}
 }
 
-class MDConfig {
-	strikethroughSingleTildeEnabled = true;
-}
-
 class Markdown {
 	/**
 	 * Set of standard readers.
@@ -3808,11 +3810,6 @@ class Markdown {
 	static completeParser = new Markdown(this.allReaders);
 
 	/**
-	 * @type {MDConfig}
-	 */
-	config;
-
-	/**
 	 * Filter for what non-markdown HTML is permitted. HTML generated as a
 	 * result of markdown is unaffected.
 	 */
@@ -3831,11 +3828,9 @@ class Markdown {
 	 * Creates a Markdown parser with the given syntax readers.
 	 *
 	 * @param {MDReader[]} readers
-	 * @param {MDConfig} config
 	 */
-	constructor(readers=Markdown.allReaders, config=new MDConfig()) {
+	constructor(readers=Markdown.allReaders) {
 		this.#readers = readers;
-		this.config = config;
 		this.#readersByBlockPriority = MDReader.sortReaderForBlocks(readers);
 		this.#readersByTokenPriority = MDReader.sortReadersForTokenizing(readers);
 		this.#readersBySubstitutePriority = MDReader.sortReadersForSubstitution(readers);
@@ -3844,17 +3839,20 @@ class Markdown {
 	/**
 	 * Converts a markdown string to an HTML string.
 	 *
-	 * @param  {string} markdown
+	 * @param {string} markdown
+	 * @param {string} elementIdPrefix - Optional prefix for generated element
+	 *   `id`s and links to them. For differentiating multiple markdown docs in
+	 *   the same HTML page.
 	 * @returns {string} HTML
 	 */
-	toHTML(markdown) {
+	toHTML(markdown, elementIdPrefix='') {
 		const lines = markdown.split(/(?:\n|\r|\r\n)/);
-		const state = new MDState(lines,
-			this.config,
-			this.#readersByBlockPriority,
-			this.#readersByTokenPriority,
-			this.#readersBySubstitutePriority,
-			this.tagFilter);
+		const state = new MDState(lines);
+		state.readersByBlockPriority = this.#readersByBlockPriority;
+		state.readersByTokenPriority = this.#readersByTokenPriority
+		state.readersBySubstitutePriority = this.#readersBySubstitutePriority
+		state.tagFilter = this.tagFilter;
+		state.elementIdPrefix = elementIdPrefix;
 		for (const reader of this.#readers) {
 			reader.preProcess(state);
 		}

markdownjs.html

@@ -5,14 +5,17 @@
 		<title>Markdown Test</title>
 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 		<style type="text/css">
+			/* Structural style */
 			:root {
-				--color-background: #fffff8;
-				--color-text: #111;
-				--color-editor-background: #0000aa;
+				--color-editor-background: #00a;
 				--color-editor-text: white;
-				--color-table-header: #ddd;
-				--color-table-border: black;
-				--color-calculated-background: #eee;
+				--toolbar-background: #ccc;
+				--toolbar-text: #000;
+			}
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--toolbar-background: #aaa;
+				}
 			}
 			:root, body {
 				width: 100%;
@@ -47,14 +50,15 @@
 			.toolbar {
 				position: absolute;
 				z-index: 1;
-				background-color: #eee;
+				background-color: var(--toolbar-background);
+				color: var(--toolbar-text);
 				min-height: 32px;
 				/* max-height: 300px; */
 				width: 100%;
-				color: black;
 				border-bottom: 1px solid black;
 				box-sizing: border-box;
 				padding: 4px 20px;
+				font-family: sans-serif;
 			}
 			#readercontainer {
 				overflow-y: scroll;
@@ -71,17 +75,15 @@
 			}
 			#markdowninput {
 				position: absolute;
+				box-sizing: border-box;
 				top: 32px;
-				margin-top: 32px;
 				width: 100%;
 				height: calc(100% - 32px);
-				box-sizing: border-box;
 				margin: 0;
-				padding: 0.5em;
+				padding: 1em 2em;
 				border: 0;
 				background-color: var(--color-editor-background);
 				color: var(--color-editor-text);
-				box-sizing: border-box;
 			}
 			.calculated {
 				background-color: var(--color-calculated-background);
@@ -92,15 +94,18 @@
 			.spreadsheet-type-percent {
 				text-align: right;
 			}
-			table {
-				border-collapse: collapse;
-			}
-			table th {
-				background-color: var(--color-table-header);
-			}
-			table td, table th {
-				border: 1px solid var(--color-table-border);
-				padding: 0.2em 0.5em;
+		</style>
+		<style type="text/css">
+			/* Document styling */
+			/* From https://github.com/edwardtufte/tufte-css/blob/gh-pages/tufte.css */
+			:root {
+				--color-background: #fffff8;
+				--color-text: #111;
+				--color-table-header: #ddd;
+				--color-table-border: black;
+				--color-calculated-background: #eee;
+				--color-highlight: #ff0;
+				--color-highlight-text: #111;
 			}
 			@media (prefers-color-scheme: dark) {
 				:root {
@@ -109,11 +114,10 @@
 					--color-table-header: #333;
 					--color-table-border: #ccc;
 					--color-calculated-background: #444;
+					--color-highlight: #88f;
+					--color-highlight-text: #ddd;
 				}
 			}
-		</style>
-		<style type="text/css">
-			/* From https://github.com/edwardtufte/tufte-css/blob/gh-pages/tufte.css */
 			html {
 				font-size: 15px;
 			}
@@ -124,19 +128,12 @@
 				margin-right: auto;
 				padding-left: 12.5%; */
 				font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
-				background-color: #fffff8;
-				color: #111;
+				background-color: var(--color-background);
+				color: var(--color-text);
 				/* max-width: 1400px; */
 				counter-reset: sidenote-counter;
 			}
 
-			/* Adds dark mode */
-			@media (prefers-color-scheme: dark) {
-				body {
-					background-color: #151515;
-					color: #ddd;
-				}
-			}
 			h1 {
 				font-weight: 400;
 				margin-top: 4rem;
@@ -160,6 +157,35 @@
 				margin-bottom: 1.4rem;
 				line-height: 1;
 			}
+			.subtext {
+				font-size: 1rem;
+				color: #888;
+				margin-top: 0.25em;
+				margin-bottom: 0.5em;
+			}
+			mark {
+				background-color: var(--color-highlight);
+				color: var(--color-highlight-text);
+			}
+			table {
+				margin-top: 1em;
+				margin-bottom: 1em;
+				border-collapse: collapse;
+			}
+			td, th {
+				padding: 0.4em 0.8em;
+				font-size: 1rem;
+			}
+			th {
+				background-color: var(--color-table-header);
+				border-bottom: 2px solid var(--color-text);
+			}
+			tr:not(:last-child) td {
+				border-bottom: 1px solid var(--color-text);
+			}
+			tr td:not(:last-child) {
+				border-right: 1px solid var(--color-table-header);
+			}
 			hr {
 				display: block;
 				height: 1px;
@@ -177,7 +203,6 @@
 				padding-bottom: 1rem;
 			}
 			p,
-			dl,
 			ol,
 			ul {
 				font-size: 1.4rem;
@@ -214,6 +239,19 @@
 			li:not(:first-child) {
 				margin-top: 0.25rem;
 			}
+			dt, dd {
+				font-size: 1.2rem;
+			}
+			dt {
+				font-weight: bold;
+			}
+			.footnotes, .footnotes li {
+				font-size: 80%;
+			}
+			.footnotes li:target, sup:target a {
+				background-color: var(--color-highlight);
+				color: var(--color-highlight-text);
+			}
 
 		</style>
 		<script src="js/markdown.js"></script>
@@ -227,7 +265,7 @@
 			}
 			function onMarkdownChange() {
 				let markdown = document.getElementById('markdowninput').value;
-				let html = parser.toHTML(markdown);
+				let html = parser.toHTML(markdown, 'foo-');
 				document.getElementById('preview').innerHTML = html;
 			}
 			var blockReaderClasses = {
@@ -334,75 +372,81 @@
 			</div>
 			<textarea id="markdowninput">## Block Formats {#top}
 
+				A regular paragraph.
+
+				-# Sub text
+
 				* Unordered
 				* Lists
 				  * Sub list
-				
+
 				1. Ordered
 				2. Lists
 				  6. Sub list
-				
-				&gt; A block quote lorem ipsum dolor sit amet
-				
-				A regular paragraph
-				
+
+				A blockquote:
+
+				&gt; "The only thing we have to fear is fear itself—nameless, unreasoning, unjustified terror which paralyzes needed efforts to convert retreat into advance." - Franklin D. Roosevelt's First Inaugural Address
+
+				Some definitions:
+
 				word
 				: a unit of meaning in a sentence
 				sentence
 				: a collection of words
-				
+
+				Code:
+
 				```javascript
 				function foo() {
-					return 'Fenced code block';
+					return 'Hello world';
 				}
 				```
-				
+
 					function bar() {
 						return 'Indented code';
 					}
-				
+
 				### Heading, hash style
-				
+
 				Heading, underline style
 				---
-				
+
 				### Modified Heading {style=color:red;}
-				
-				-# Sub text
-				
+
 				| Unit Price | Qty | Subtotal |
 				| ---: | ---: | ---: |
 				| $1.23 | 2 | =A*B FILL |
 				| $4.99 | 6 | |
 				| Total | | =SUM(C:C) |
-				
+
 				---
-				
+
 				## Inline Formats
-				
+
 				Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_ ~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, ``double backticks``, `single backticks`.
-				
+
 				Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar] Aenean efficitur rhoncus nulla non fermentum.
-				
+
 				[^1]: Donec ut felis volutpat, gravida ipsum scelerisque, accumsan est.
 				[^abc]: Cras dictum rutrum quam.
 				[^foo]: Donec maximus bibendum lorem.
 				[^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam imperdiet vehicula eu feugiat tortor. 
-				
+
 				The HTML on the WWW is often full of JS and CSS.
-				
+
 				*[HTML]: Hypertext Markup Language
 				*[WWW]: World Wide Web
 				*[JS]: JavaScript
 				*[CSS]: Cascading Style Sheets
-				
+
 				Click [here](#top) to return to the top. Referenced link to [Google][google title="I prefer Duck Duck Go"].
-				
+
 				![alt text](https://picsum.photos/100/75) ![alt text](https://picsum.photos/101/75 "With a title") ![][testimage]
-				
+
 				[testimage]: https://picsum.photos/102/75
 				[google]: https://google.com
-				
+
 				Some verbatim &lt;span style="color:green;"&gt;HTML&lt;/span&gt;. A script tag will be ignored. &lt;script&gt;&lt;/script&gt;
 			</textarea>
 		</div>