docs(highlight): reduce "through" overuse and fix grammar/style

Author: simeonoff

docs/xplat/src/content/en/components/inputs/highlight.mdx

@@ -18,10 +18,10 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 ## Usage
 
-To use the <ApiLink type="Highlight" /> component, all you need to do is wrap its tags around the content you want to search through. The component searches through the content of all nested elements within the <PlatformBlock for="WebComponents">`<igc-highlight>`</PlatformBlock><PlatformBlock for="React">`<IgrHighlight>`</PlatformBlock> tags, and highlights all matches of the specified string.
+To use the <ApiLink type="Highlight" /> component, all you need to do is wrap its tags around the content you want to search. The component searches the content of all nested elements within the <PlatformBlock for="WebComponents">`<igc-highlight>`</PlatformBlock><PlatformBlock for="React">`<IgrHighlight>`</PlatformBlock> tags, and highlights all matches of the specified string.
 
 <DocsAside type="note">
-The <ApiLink type="Highlight" /> component searches only through DOM text nodes. It does not search through input values or content set via the CSS `content` property.
+The <ApiLink type="Highlight" /> component searches only DOM text nodes. It does not search input values or content set via the CSS `content` property.
 </DocsAside>
 
 First, you need to install the {ProductName} by running the following command:
@@ -78,13 +78,13 @@ The `<igc-highlight>` tags wrap the content in which you want to highlight the s
 The `<IgrHighlight>` tags wrap the content in which you want to highlight the specific string. 
 </PlatformBlock>
 
-The text to be highlighted is set through the <ApiLink type="Highlight" member="searchText" label="search-text"/> attribute. In the example above, the word "dolor" will be highlighted.
+The text to be highlighted is set via the <ApiLink type="Highlight" member="searchText" label="search-text"/> attribute. In the example above, the word "dolor" will be highlighted.
 
 <Sample src="/inputs/highlight/overview" height={100} alt="{Platform} Highlight Overview Example" />
 
 ### Case Sensitive Match
 
-The <ApiLink type="Highlight" /> component also exposes a <ApiLink type="Highlight" member="caseSensitive" label="case-sensitive"/> attribute. Its default value is `false`, which returns case-insensitive matches. By setting it to `true` you can enable case-sensitive matching.
+The <ApiLink type="Highlight" /> component also exposes a <ApiLink type="Highlight" member="caseSensitive" label="case-sensitive"/> attribute. Its default value is `false`, which enables case-insensitive matching. By setting it to `true`, you can enable case-sensitive matching.
 
 The following snippet:
 
@@ -104,22 +104,22 @@ The following snippet:
 ```
 </PlatformBlock>
 
-Returns 0 matches because the search text "lorem" is in lowercase, while the text in the content is **Lorem** with an uppercase **L**.
+This returns 0 matches because the search text "lorem" is in lowercase, while the text in the content is **Lorem** with an uppercase **L**.
 
 ### Using Highlight with a Search Input
 
 The most common use case is binding the <ApiLink type="Highlight" /> component to a search <ApiLink type="Input" /> component, so that search matches are highlighted in real time as the user types.
 
-To bind the two together you can listen to the `igcInput` event of the <ApiLink type="Input" /> component and set the <ApiLink type="Highlight" member="searchText" label="search-text"/> attribute of the <ApiLink type="Highlight" /> component to the input value every time the event is fired (you can also use the standard `input` event).
+To bind the two together, you can listen to the `igcInput` event of the <ApiLink type="Input" /> component and set the <ApiLink type="Highlight" member="searchText" label="search-text"/> attribute of the <ApiLink type="Highlight" /> component to the input value every time the event is fired (you can also use the standard `input` event).
 
 <PlatformBlock for="WebComponents">
-First you need to access the <ApiLink type="Highlight" /> component so you can manipulate its properties:
+First, you need to access the <ApiLink type="Highlight" /> component to manipulate its properties:
 
 ```ts
 const highlight = document.querySelector('igc-highlight') as IgcHighlightComponent;
 ```
 
-Then create a function that updates the search text every time the input value changes through the `igcInput` event:
+Then, create a function that updates the search text every time the `igcInput` event fires:
 
 ```ts
 const onInput = ({ detail }: CustomEvent<string>) => {
@@ -140,7 +140,7 @@ document.querySelector('igc-input')?.addEventListener('igcInput', onInput);
 </PlatformBlock>
 
 <PlatformBlock for="React">
-First you need to access the <ApiLink type="Highlight" /> component so you can manipulate its properties, the easiest way to do that is through a reference:
+First, you need to access the <ApiLink type="Highlight" /> component to manipulate its properties. The easiest way to do this is via a reference:
 
 ```tsx
 import { useRef } from 'react';
@@ -156,7 +156,7 @@ const highlightRef = useRef<IgrHighlight>(null);
 </IgrHighlight>
 ```
 
-Then create a function that will update the status of the search, which will be called every time the value of the search input changes through the `igcInput` event:
+Then, create a function that updates the search text, called every time the `igcInput` event fires:
 
 ```tsx
 const onInput = ({ detail }: CustomEvent<string>) => {
@@ -171,9 +171,9 @@ const onInput = ({ detail }: CustomEvent<string>) => {
 
 ### Methods
 
-The component also exposes two methods that allow you to navigate through the matches of the searched text. The <ApiLink type="Highlight" member="next" label="next()"/> method will navigate to the next match, while the <ApiLink type="Highlight" member="previous" label="previous()"/> method will navigate to the previous match. 
+The component also exposes two methods for navigating the search matches. The <ApiLink type="Highlight" member="next" label="next()"/> method moves to the next match, while the <ApiLink type="Highlight" member="previous" label="previous()"/> method moves to the previous one.
 
-With them we can make the search more interactive by creating two buttons that will allow you to navigate through the matches:
+With them, we can make the search more interactive by adding two buttons to navigate between matches:
 
 <PlatformBlock for="WebComponents">
 ```ts
@@ -241,7 +241,7 @@ const next = () => {
 
 <Sample src="/inputs/highlight/search" height={200} alt="{Platform} Highlight Search Example" />
 
-Both the <ApiLink type="Highlight" member="previous" label="previous()" /> and <ApiLink type="Highlight" member="next" label="next()" /> methods accept a <ApiLink type="Highlight" member="preventScroll" /> option that prevents the page from scrolling to the active match during navigation. By default, the option is set to `false`. 
+Both the <ApiLink type="Highlight" member="previous" label="previous()" /> and <ApiLink type="Highlight" member="next" label="next()" /> methods accept a <ApiLink type="Highlight" member="preventScroll" /> option that prevents the page from scrolling to the active match during navigation. By default, it is set to `false`.
 
 <PlatformBlock for="WebComponents">
 ```ts
@@ -304,7 +304,7 @@ const updateStatus = () => {
 ```
 </PlatformBlock>
 
-Then we can call the `updateStatus()` function every time the value of the search input changes and every time the user clicks on the next or previous buttons:
+We can then call `updateStatus()` every time the input value changes or the user clicks the next or previous buttons:
 
 <PlatformBlock for="WebComponents">
 ```ts