Adding classes to some rendered nodes. Playground sample typos.

js/markdown.js

@@ -1557,7 +1557,9 @@ class MDTagModifier {
 	 */
 	applyTo(node) {
 		if (node instanceof MDNode) {
-			node.cssClasses = node.cssClasses.concat(this.cssClasses);
+			for (const cssClass of this.cssClasses) {
+				node.addClass(cssClass);
+			}
 			if (this.cssId) node.cssId = this.cssId;
 			for (const name in this.attributes) {
 				node.attributes[name] = this.attributes[name];
@@ -1575,7 +1577,7 @@ class MDTagModifier {
 	 * @returns {boolean} whether the class was added
 	 */
 	addClass(cssClass) {
-		if (this.cssClasses.contains(cssClass)) return false;
+		if (this.cssClasses.indexOf(cssClass) >= 0) return false;
 		this.cssClasses.push(cssClass);
 		return true;
 	}
@@ -1623,7 +1625,7 @@ class MDTagModifier {
 		for (const token of modifierTokens) {
 			if (token.trim() == '') continue;
 			if (groups = this.#classRegex.exec(token)) {
-				mod.cssClasses.push(groups[1]);
+				mod.addClass(groups[1]);
 			} else if (groups = this.#idRegex.exec(token)) {
 				mod.cssId = groups[1];
 			} else if (groups = this.#attributeRegex.exec(token)) {
@@ -3188,6 +3190,30 @@ class MDNode {
 	}
 
 	/**
+	 * Adds a CSS class. If already present it will not be duplicated.
+	 *
+	 * @param {string} cssClass
+	 * @returns {boolean} whether the class was added
+	 */
+	addClass(cssClass) {
+		if (this.cssClasses.indexOf(cssClass) >= 0) return false;
+		this.cssClasses.push(cssClass);
+		return true;
+	}
+
+	/**
+	 * Removes a CSS class.
+	 *
+	 * @param {string} cssClass
+	 * @returns {boolean} whether the class was present and removed
+	 */
+	removeClass(cssClass) {
+		const beforeLength = this.cssClasses.length;
+		this.cssClasses = this.cssClasses.filter((val) => val !== cssClass);
+		return this.cssClasses.length != beforeLength;
+	}
+
+	/**
 	 * Renders this node and any children as an HTML string. If the node has no
 	 * content an empty string should be returned.
 	 *
@@ -3383,9 +3409,7 @@ class MDHeadingNode extends MDBlockNode {
  */
 class MDSubtextNode extends MDBlockNode {
 	toHTML(state) {
-		if (this.cssClasses.indexOf('subtext') < 0) {
-			this.cssClasses.push('subtext');
-		}
+		this.addClass('subtext');
 		return this._simplePairedTagHTML(state, 'div');
 	}
 }
@@ -3670,7 +3694,7 @@ class MDFootnoteListNode extends MDBlockNode {
 		if (Object.keys(footnotes).length == 0) return '';
 		const footnoteUniques = state.root.footnoteInstances;
 		var html = '';
-		html += '<div class="footnotes"><hr/>';
+		html += '<div class="footnotes">';
 		html += '<ol>';
 		for (const symbol of symbolOrder) {
 			/** @type {MDNode[]} */
@@ -3678,7 +3702,7 @@ class MDFootnoteListNode extends MDBlockNode {
 			if (!content) continue;
 			let footnoteId = this.#footnoteId(state, symbol);
 			const contentHTML = MDNode.toHTML(content, state);
-			html += `<li value="${symbol}" id="${state.root.elementIdPrefix}footnote_${footnoteId}">${contentHTML}`;
+			html += `<li value="${footnoteId}" id="${state.root.elementIdPrefix}footnote_${footnoteId}">${contentHTML}`;
 			const uniques = footnoteUniques[symbol];
 			if (uniques) {
 				for (const unique of uniques) {
@@ -3865,7 +3889,7 @@ class MDFootnoteNode extends MDInlineNode {
 
 	toHTML(state) {
 		if (this.differentiator !== null) {
-			return `<sup id="${state.root.elementIdPrefix}footnoteref_${this.occurrenceId}"${this._htmlAttributes()}>` +
+			return `<sup class="footnote" 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}}-->`;
@@ -3972,8 +3996,10 @@ class MDReferencedImageNode extends MDImageNode {
 
 	toHTML(state) {
 		if (this.src === '') {
-			this.src = state.urlForReference(this.reference);
-			this.attributes['title'] = state.urlTitleForReference(this.reference);
+			const url = state.urlForReference(this.reference);
+			if (url !== null) this.src = url;
+			const title = state.urlTitleForReference(this.reference);
+			if (title !== null) this.attributes['title'] = title;
 		}
 		return super.toHTML(state);
 	}

markdownjs.html

@@ -440,12 +440,12 @@ The HTML on the WWW is often full of JS and CSS.
 *[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"].
+Click [here](#top) to return to the top. Referenced link to [Google][google].
 
 ![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
+[google]: https://google.com  "I prefer Duck Duck Go"
 
 Some verbatim <span style="color:green;">HTML</span>. A script tag will be ignored. <script></script>
 			</textarea>

testjs.html

@@ -1178,12 +1178,11 @@
 				}
 
 				test_footnotes() {
-					let markdown = 'Lorem ipsum[^1] dolor[^2] sit[^1] amet\n\n[^1]: A footnote\n[^2]: Another footnote';
-					let expected = '<p>Lorem ipsum<sup id="footnoteref_1"><a href="#footnote_1">1</a></sup> ' +
-						'dolor<sup id="footnoteref_2"><a href="#footnote_2">2</a></sup> ' +
-						'sit<sup id="footnoteref_3"><a href="#footnote_1">1</a></sup> amet</p> ' +
+					let markdown = 'Lorem ipsum[^1] dolor[^abc] sit[^1] amet\n\n[^1]: A footnote\n[^abc]: Another footnote';
+					let expected = '<p>Lorem ipsum<sup class="footnote" id="footnoteref_1"><a href="#footnote_1">1</a></sup> ' +
+						'dolor<sup class="footnote" id="footnoteref_2"><a href="#footnote_2">2</a></sup> ' +
+						'sit<sup class="footnote" id="footnoteref_3"><a href="#footnote_1">1</a></sup> amet</p> ' +
 						'<div class="footnotes">' +
-						'<hr/>' +
 						'<ol>' +
 						'<li value="1" id="footnote_1">A footnote <a href="#footnoteref_1" class="footnote-backref">↩︎</a> <a href="#footnoteref_3" class="footnote-backref">↩︎</a></li> ' +
 						'<li value="2" id="footnote_2">Another footnote <a href="#footnoteref_2" class="footnote-backref">↩︎</a></li> ' +