MarkTiedemann/quine.html

## quine.html
<!DOCTYPE html>
<style>
body { font-family: monospace; }
p { margin-block-start: 0; margin-block-end: 0; overflow: hidden; white-space: nowrap; }
.count { display: inline-block; width: 4ch; margin-right: 1ch; color: lightgrey; text-align: right; }
.doctype { color: steelblue; font-style: italic; }
.tag { color: purple; font-weight: bold; }
.text { white-space: pre; }
</style>
<h1>
Firefox "View Page Source" Quine
</h1>
<script>
let lines = [];
let iter = document.createNodeIterator(document, NodeFilter.SHOW_DOCUMENT_TYPE | NodeFilter.SHOW_ELEMENT);
let node;
while (node = iter.nextNode()) {
    switch (node.nodeType) {
        case node.DOCUMENT_TYPE_NODE:
            lines.push(as_span("doctype", new XMLSerializer().serializeToString(node)));
            break;
        case node.ELEMENT_NODE:
            if (["html", "head", "body"].includes(node.localName))
                break;
            lines.push(`&lt;${as_span("tag", node.localName)}&gt;`);
            for (let textline of node.textContent.trim().split("\n"))
                lines.push(as_span("text", textline));
            lines.push(`&lt;/${as_span("tag", node.localName)}&gt;`);
            break;
    }
}
document.body.innerHTML = lines.map((line, i) => `<p>${as_span("count", i + 1)}${line}</p>`).join("");

function as_span(className, textContent) {
    let s = document.createElement("span");
    s.className = className;
    s.textContent = textContent;
    return s.outerHTML;
}
</script>

## serve.js
async function render_quine() {
  let url = new URL("quine.html", import.meta.url);
  let res = await fetch(url);
  let text = await res.text();
  let headers = { "content-type": "text/html; charset=utf-8" };
  return new Response(text, { headers });
}

addEventListener("fetch", (event) => {
  event.respondWith(render_quine());
});
	<!DOCTYPE html>
	<style>
	body { font-family: monospace; }
	p { margin-block-start: 0; margin-block-end: 0; overflow: hidden; white-space: nowrap; }
	.count { display: inline-block; width: 4ch; margin-right: 1ch; color: lightgrey; text-align: right; }
	.doctype { color: steelblue; font-style: italic; }
	.tag { color: purple; font-weight: bold; }
	.text { white-space: pre; }
	</style>
	<h1>
	Firefox "View Page Source" Quine
	</h1>
	<script>
	let lines = [];
	let iter = document.createNodeIterator(document, NodeFilter.SHOW_DOCUMENT_TYPE \| NodeFilter.SHOW_ELEMENT);
	let node;
	while (node = iter.nextNode()) {
	switch (node.nodeType) {
	case node.DOCUMENT_TYPE_NODE:
	lines.push(as_span("doctype", new XMLSerializer().serializeToString(node)));
	break;
	case node.ELEMENT_NODE:
	if (["html", "head", "body"].includes(node.localName))
	break;
	lines.push(`<${as_span("tag", node.localName)}>`);
	for (let textline of node.textContent.trim().split("\n"))
	lines.push(as_span("text", textline));
	lines.push(`</${as_span("tag", node.localName)}>`);
	break;
	}
	}
	document.body.innerHTML = lines.map((line, i) => `<p>${as_span("count", i + 1)}${line}</p>`).join("");

	function as_span(className, textContent) {
	let s = document.createElement("span");
	s.className = className;
	s.textContent = textContent;
	return s.outerHTML;
	}
	</script>
	async function render_quine() {
	let url = new URL("quine.html", import.meta.url);
	let res = await fetch(url);
	let text = await res.text();
	let headers = { "content-type": "text/html; charset=utf-8" };
	return new Response(text, { headers });
	}

	addEventListener("fetch", (event) => {
	event.respondWith(render_quine());
	});