[css-highlight-api-1] Update examples (#6332)

ffiori · web-flow · commit a815bf7d92dc · 2021-06-01T11:38:01.000-07:00
diff --git a/css-highlight-api-1/Overview.bs b/css-highlight-api-1/Overview.bs
@@ -92,18 +92,18 @@ Introduction</h2>
 
 		<xmp highlight=html>
 			<style>
-			:root::highlight(example-highlight) {
-				background-color: yellow;
-				color: blue;
-			}
+				:root::highlight(example-highlight) {
+					background-color: yellow;
+					color: blue;
+				}
 			</style>
 			<body><span>One </span><span>two </span><span>three…</span>
 			<script>
-			let r = new Range();
-			r.setStart(document.body, 0);
-			r.setEnd(document.body, 2);
+				let r = new Range();
+				r.setStart(document.body, 0);
+				r.setEnd(document.body, 2);
 
-			CSS.highlights.set("example-highlight", new Highlight(r));
+				CSS.highlights.set("example-highlight", new Highlight(r));
 			</script>
 		</xmp>
 
@@ -242,21 +242,22 @@ Registering Custom Highlights</h3>
 	<div class=example id=styling-problems-with-multiple-names-per-highlight>
 		<xmp highlight=html>
 			<style>
-			div::highlight(bar) {
-				color: red;
-			}
-			div::highlight(foo) {
-				color: green;
-			}
+				div::highlight(bar) {
+					color: red;
+				}
+				div::highlight(foo) {
+					color: green;
+				}
 			</style>
 			<body><div>abc</div>
 			<script>
-			let r = new Range();
-			r.setStart(div, 0);
-			r.setEnd(div, 1);
-			let h = new Highlight(r);
-			CSS.highlights.set('foo', h);
-			CSS.highlights.set('bar', h);
+				let div = document.body.firstChild;
+				let r = new Range();
+				r.setStart(div, 0);
+				r.setEnd(div, 1);
+				let h = new Highlight(r);
+				CSS.highlights.set('foo', h);
+				CSS.highlights.set('bar', h);
 			</script>
 		</xmp>
 		In the example above, the same [=custom highlight=] object is [=registered=] under the names 'foo' and 'bar'.
@@ -382,11 +383,11 @@ Priority of Overlapping Highlights</h4>
 	<div class=example id=overlap-highlight-ex>
 		<xmp highlight=html>
 			<style>
-				p::highlight(foo) {
+				:root::highlight(foo) {
 					color:blue;
 					background-color:yellow;
 				}
-				p::highlight(bar) {
+				:root::highlight(bar) {
 					background-color:orange;
 				}
 			</style>
@@ -402,13 +403,16 @@ Priority of Overlapping Highlights</h4>
 				r2.setStart(textNode, 3);
 				r2.setEnd(textNode, 9);
 
-				CSS.highlights.add(new Highlight("foo", r1));
-				CSS.highlights.add(new Highlight("bar", r2));
+				let h1 = new Highlight(r1);
+				let h2 = new Highlight(r2);
+
+				CSS.highlights.set("foo", h1);
+				CSS.highlights.set("bar", h2);
 			</script>
 		</xmp>
 
 		As there are no priorities set
-		(i.e. there is a tie between <code>rg1</code> and <code>rg2</code>),
+		(i.e. there is a tie between <code>h1</code> and <code>h2</code>),
 		the custom highlights' styles are stacked
 		in order of insertion into the [=highlight registry=].
 		The rendered results will have "Som" with blue text on yellow background,
@@ -419,8 +423,8 @@ Priority of Overlapping Highlights</h4>
 			<span style="background:yellow;color:blue;">Som</span><span style="background:orange;color:blue;">e t</span><span style="background:orange;">ext</span>
 		</div>
 
-		Setting <code highlight=javascript>rg1.priority = 1;</code>
-		would cause <code>rg1</code> to stack higher than <code>rg2</code>,
+		Setting <code highlight=javascript>h1.priority = 1;</code>
+		would cause <code>h1</code> to stack higher than <code>h2</code>,
 		which would result in "Some t" being blue on yellow,
 		and "ext" being default color on orange.
 
