diff --git a/new/includes/examples/on-demand.md b/new/includes/examples/on-demand.md
new file mode 100644
index 0000000..aa3553a
--- /dev/null
+++ b/new/includes/examples/on-demand.md
@@ -0,0 +1,36 @@
+<script>
+ready(() => {
+	let startElement, endElement;
+
+	startElement = findWithContent('.ex-on-demand pre.chroma code span.line', 'on_demand_tls {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-abuse rollover-purple');
+
+	startElement = findWithContent('.ex-on-demand pre.chroma code span.line', 'tls');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-ondemand rollover-green');
+
+	window.$_('.ex-on-demand code').classList.add('light');
+});
+</script>
+
+<div class="ex-on-demand">
+
+```caddy
+{
+	on_demand_tls {
+		ask http://localhost:9123/check
+	}
+}
+
+https:// {
+	tls {
+		on_demand
+	}
+	# reverse_proxy, etc...
+}
+
+# other sites...
+```
+
+</div>
diff --git a/new/on-demand-tls.html b/new/on-demand-tls.html
index 1ff0139..ce24099 100644
--- a/new/on-demand-tls.html
+++ b/new/on-demand-tls.html
@@ -72,21 +72,7 @@
 						</div>
 						<div>
 							<div class="display right">
-								<code class="light">{
-<span class="rollover-abuse rollover-purple">	on_demand_tls {
-		ask http://localhost:9123/check
-	}</span>
-}
-
-https:// {
-<span class="rollover-ondemand rollover-green">	tls {
-		on_demand
-	}</span>
-	<span class="comment"># reverse_proxy, etc...</span>
-}
-
-<span class="comment"># other sites...</span></code>
-
+								{{ markdown (include "/includes/examples/on-demand.md") }}
 							</div>
 						</div>
 					</div>
@@ -147,4 +133,4 @@ AAAA -> 2001:db8:900d:1337</code>
 
 		{{include "/includes/footer.html"}}
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/new/resources/js/common.js b/new/resources/js/common.js
index 96d7278..5fa4233 100644
--- a/new/resources/js/common.js
+++ b/new/resources/js/common.js
@@ -188,11 +188,11 @@ on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => {
 // mouseover highlights for feature sections that explain config
 on('mouseover', '.rollover', e => {
 	const target =  e.target.closest('.rollover') || e.target;
-	$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
+	$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
 });
 on('mouseout', '.rollover', e => {
 	const target =  e.target.closest('.rollover') || e.target;
-	$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
+	$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
 });
 
 
diff --git a/new/resources/js/home.js b/new/resources/js/home.js
index 0c40f09..5edd4df 100644
--- a/new/resources/js/home.js
+++ b/new/resources/js/home.js
@@ -20,14 +20,5 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
 			}
 			$_(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl);
 		}
-
-		on('mouseover', '.rollover', e => {
-			const target =  e.target.closest('.rollover') || e.target;
-			$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
-		});
-		on('mouseout', '.rollover', e => {
-			const target =  e.target.closest('.rollover') || e.target;
-			$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
-		});
 	});
 });