https://github.com/liubomyr123/highlight_canvas
CSS Paint Worklet for highlighting words in text with navigation capabilities. It uses CSS variables to define colors and coordinates, allowing dynamic highlighting and interfaces for working with text.
https://github.com/liubomyr123/highlight_canvas
canvas css css-painting-api highlighting html javascript paintworklet
Last synced: 4 months ago
JSON representation
CSS Paint Worklet for highlighting words in text with navigation capabilities. It uses CSS variables to define colors and coordinates, allowing dynamic highlighting and interfaces for working with text.
- Host: GitHub
- URL: https://github.com/liubomyr123/highlight_canvas
- Owner: liubomyr123
- Created: 2024-05-03T02:11:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-26T15:44:16.000Z (5 months ago)
- Last Synced: 2025-01-26T16:30:11.347Z (5 months ago)
- Topics: canvas, css, css-painting-api, highlighting, html, javascript, paintworklet
- Language: HTML
- Homepage:
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Highlighter: Text Highlighter for Custom CSS Styles
This project allows you to highlight specific words or phrases in a text using custom styles. Built with CSS and JavaScript, it integrates with web pages to dynamically highlight words based on provided data, making it easy to draw attention to key content.
## Features
- Highlight specific words or phrases in text.
- Customize the highlight color and style using CSS variables.
- Easily configurable for various use cases (e.g., navigation, emphasis).
- Supports multiple styles for different words/phrases.
- Works with dynamic content and supports modern web standards.
## How to Use
1. Integrate the provided JavaScript code into your web page.
2. Define the target words/phrases you want to highlight and specify their colors.
3. Use CSS custom properties to configure styles (highlight colors, text color).
4. Load your content, and the script will automatically highlight the words as per the provided configuration.
### Example Usage
In your HTML, define a list of words to highlight and the corresponding highlight color:
```html
--highlight-color: #FFDD57;
--words-color: '{"red": [[["word1", "word2"], ["word3"]]], "green": [["word4", "word5"]]}';