https://github.com/roydukkey/custom-highlight
Lifecycle hooks for styling arbitrary text within an HTML Element
https://github.com/roydukkey/custom-highlight
css lifecycle-hooks vue-directive
Last synced: 5 months ago
JSON representation
Lifecycle hooks for styling arbitrary text within an HTML Element
- Host: GitHub
- URL: https://github.com/roydukkey/custom-highlight
- Owner: roydukkey
- License: mit
- Created: 2025-05-01T05:31:08.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-12-13T01:46:18.000Z (6 months ago)
- Last Synced: 2025-12-14T12:49:50.935Z (6 months ago)
- Topics: css, lifecycle-hooks, vue-directive
- Language: TypeScript
- Homepage: https://custom-highlight.pages.dev/
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yaml
- License: LICENSE
Awesome Lists containing this project
README
# `custom-highlight`
A set of lifecycle hooks for styling arbitrary text within elements using the [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API).
[](https://www.npmjs.com/package/custom-highlight)
[](https://opensource.org/licenses/MIT)
## Features
* Highlight **single or multiple tokens** within an element, or patterns using a **regular expression**
* Easily configure **case-insensitive** searching for tokens and patterns
* Define **custom highlight groups** for targeting each with unique styles
* Deeply monitor changes to character data triggering an update to highlights
## Install
```sh
npm install custom-highlight
```
## CDN
```html
```
It will be exposed globally as `window.CustomHighlight`.
## Usage
Here is a very basic example that will highlight the words “brown fox” in the paragraph.
```html
The quick brown fox jumps over the lazy dog.
import CustomHighlight from 'custom-highlight';
const element = document.getElementById('gettingStarted');
const options = { value: 'brown fox' };
if (element) {
CustomHighlight
.created(element, options)
.beforeMount(element, options)
.mounted(element, options);
}
::highlight(default) {
background-color: yellow;
color: black;
}
```
This works just fine in a static webpage, but frameworks that dynamically render content by manipulating the DOM (e.g. Vue, React, Svelte, etc.) will require additional effort in conforming to their component lifecycles.
See the [docs](https://custom-highlight.pages.dev/) for examples and recipes using [Vue](https://custom-highlight.pages.dev/recipes/vue.html) and native [Web Components](https://custom-highlight.pages.dev/recipes/web-component.html).