corrected spelling and updated example to show result on page (mdn#39750)

* corrected spelling and updated example to show result on page

* Update files/en-us/web/api/highlight/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* updated heading structure

* updated html in examplle to reset the ranges

* added nolint to stop linter altering the positions of the ranges

* Update files/en-us/web/api/highlight/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* added the s back to examples

* Update files/en-us/web/api/highlight/index.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: Brian Smith <brian@smith.berlin>

Author: 4 people

files/en-us/web/api/highlight/highlight/index.md

@@ -22,7 +22,7 @@ new Highlight(range1, range2, /* …, */ rangeN)
 ### Parameters
 
 - `range1`, …, `rangeN` {{optional_inline}}
-  - : One ore more initial {{domxref("Range")}} objects to add in the new highlight.
+  - : One or more initial {{domxref("Range")}} objects to add in the new highlight.
 
 ### Return value
 

files/en-us/web/api/highlight/index.md

@@ -54,19 +54,28 @@ _The `Highlight` interface doesn't inherit any methods_.
 
 ## Examples
 
-The following example demonstrates how to create ranges, instantiate a new `Highlight` object for them, and register it to be styled on the page:
+The following example demonstrates how specific parts of a block of text can be highlighted.
+
+```html-nolint
+<p class="foo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
+  sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur
+  molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.</p>
+```
+
+This JavaScript code creates [ranges](/en-US/docs/Web/API/Range), instantiates a new `Highlight` object for them, and [registers it](/en-US/docs/Web/API/HighlightRegistry/set) to be styled on the page:
 
 ```js
-const parentNode = document.getElementById("foo");
+const parentNode = document.querySelector(".foo");
+const textNode = parentNode.firstChild;
 
 // Create a couple of ranges.
 const range1 = new Range();
-range1.setStart(parentNode, 10);
-range1.setEnd(parentNode, 20);
+range1.setStart(textNode, 6);
+range1.setEnd(textNode, 21);
 
 const range2 = new Range();
-range2.setStart(parentNode, 40);
-range2.setEnd(parentNode, 60);
+range2.setStart(textNode, 57);
+range2.setEnd(textNode, 71);
 
 // Create a custom highlight for these ranges.
 const highlight = new Highlight(range1, range2);
@@ -83,6 +92,10 @@ The following CSS code snippet demonstrates how to style the registered custom h
 }
 ```
 
+### Result
+
+{{EmbedLiveSample("example", "100%", '100')}}
+
 ## Specifications
 
 {{Specifications}}