Skip to content

Commit

Permalink
Wording fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
fzaninotto committed Apr 16, 2024
1 parent 85c456a commit 95f192c
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 5 deletions.
5 changes: 3 additions & 2 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

Highlight search term in a page. Vanilla JS, compatible with frontend frameworks (React, Vite, Angular, etc).

Does not modify the DOM. Relies on the browser's [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) ([limited browser support](https://caniuse.com/?search=CSS.Highlights)).
Does not modify the DOM. Relies on the browser's [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) ([not supported by Firefox yet](https://caniuse.com/?search=CSS.Highlights)).

This is not a syntax highlighter API. It highlights text in a page based on a search term.
**Note**: This is not a syntax highlighter library. It highlights text in a page based on a search term.

## Usage

Expand Down Expand Up @@ -55,6 +55,7 @@ If you use a frontend framework like React, you can use it in a `useEffect` hook

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

export default function App() {
const [search, setSearch] = useState("");
Expand Down
7 changes: 5 additions & 2 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h1>highlight-search-term</h1>
<h2>Usage</h2>
<pre><code class="language-javascript">import { highlightSearchTerm } from 'highlight-search-term';

highlightSearchTerm('lorem', '.content');
highlightSearchTerm({ search: 'lorem', selector: '.content' });
</code></pre>
<h2>Example</h2>
<p>
Expand Down Expand Up @@ -90,7 +90,10 @@ <h2>Limitations</h2>
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API"
>CSS Custom Highlight API</a
>, which works on all evergreen browsers except Firefox.
>, which works on
<a href="https://caniuse.com/?search=CSS.Highlights"
>all evergreen browsers except Firefox</a
>.
</p>
<h2>License</h2>
<p>MIT</p>
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.0.9",
"description": "Highlight search term in a page. Vanilla JS, compatible with frontend frameworks (React, Vite, Angular, etc).",
"repository": "marmelab/highlight-search-term",
"homepage": "https://github.com/marmelab/highlight-search-term",
"homepage": "https://marmelab.com/highlight-search-term/",
"main": "src/index.js",
"types": "src/index.d.ts",
"scripts": {
Expand Down

0 comments on commit 95f192c

Please sign in to comment.