### Install highlight-search-term using npm

Source: https://github.com/marmelab/highlight-search-term/blob/main/Readme.md

This command installs the highlight-search-term library using npm, making it available for use in your project.

```sh
npm install highlight-search-term
```

--------------------------------

### JavaScript Usage with Vite Bundler

Source: https://github.com/marmelab/highlight-search-term/blob/main/Readme.md

Illustrates how to import and use the highlightSearchTerm function when using a module bundler like Vite. It mirrors the HTML example but with standard JavaScript import syntax.

```javascript
import { highlightSearchTerm } from "highlight-search-term";
const search = document.getElementById("search");
search.addEventListener("input", () => {
    highlightSearchTerm({
        search: search.value,
        selector: ".content",
    });
});
```

--------------------------------

### HTML Integration with Real-time Search

Source: https://github.com/marmelab/highlight-search-term/blob/main/demo/index.html

Demonstrates full HTML page integration using CDN import. Includes real-time search functionality with input event listener and initial search term highlighting. Uses setTimeout to handle dynamic content loading.

```html
import { highlightSearchTerm } from "https://cdn.jsdelivr.net/npm/highlight-search-term@1.0.2/src/index.js"; const search = document.getElementById("search"); search.addEventListener("input", () => { highlightSearchTerm({ search: search.value, selector: ".content" }); }); setTimeout(() => { highlightSearchTerm({ search: search.value, selector: ".content" }); }, 100);
```

--------------------------------

### HTML with Module Import for highlightSearchTerm

Source: https://github.com/marmelab/highlight-search-term/blob/main/Readme.md

Shows how to use the highlightSearchTerm function directly in HTML by importing it from a CDN. It attaches an event listener to an input field to trigger highlighting.

```html
<script type="module">
import { highlightSearchTerm } from "https://cdn.jsdelivr.net/npm/highlight-search-term@1.0.0/src/index.js";
const search = document.getElementById("search");
search.addEventListener("input", () => {
    highlightSearchTerm({
        search: search.value,
        selector: ".content",
    });
});
</script>
```

--------------------------------

### Basic Usage of highlightSearchTerm function

Source: https://github.com/marmelab/highlight-search-term/blob/main/Readme.md

Demonstrates the fundamental usage of the highlightSearchTerm function, which takes a search term and a CSS selector as input to apply highlighting.

```javascript
highlightSearchTerm({ search: search.value, selector: ".content" });
```

--------------------------------

### React Integration with highlightSearchTerm

Source: https://github.com/marmelab/highlight-search-term/blob/main/Readme.md

Demonstrates how to integrate the highlightSearchTerm function into a React component using the `useEffect` hook. It manages the search term state and applies highlighting on changes.

```jsx
import { useEffect, useState } from "react";
import { highlightSearchTerm } from "highlight-search-term";

export default function App() {
  const [search, setSearch] = useState("");
  useEffect(() => {
    highlightSearchTerm({ search, selector: ".content" });
  }, [search]);
  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <div className="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  );
}
```

--------------------------------

### JavaScript Module Import and Basic Usage

Source: https://github.com/marmelab/highlight-search-term/blob/main/demo/index.html

Shows how to import the highlightSearchTerm function from the highlight-search-term package and use it with basic parameters. The function takes a search term and CSS selector to target specific content areas. The search is case-insensitive by default.

```javascript
import { highlightSearchTerm } from 'highlight-search-term';

highlightSearchTerm({ search: 'lorem', selector: '.content' });
```

--------------------------------

### CSS for highlighting search terms

Source: https://github.com/marmelab/highlight-search-term/blob/main/Readme.md

Provides the CSS rules to style the highlighted search terms. It defines the background and text color for the highlight range named 'search'.

```css
::highlight(search) {
    background-color: yellow;
    color: black;
}
```

--------------------------------

### CSS Styling for Search Highlighting

Source: https://github.com/marmelab/highlight-search-term/blob/main/demo/index.html

Defines CSS styles for the search highlighting feature. The ::highlight(search) pseudo-element customizes the appearance of highlighted terms with yellow background and black text. The container and body styles provide basic page layout.

```css
body { font-family: Roboto, Open Sans, sans-serif; margin: 0; padding: 0; font-size: 15px; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } ::highlight(search) { background-color: yellow; color: black; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.