https://github.com/krtninja/krt-text-highlighter

Simple text highlighter based on css.highlight
https://github.com/krtninja/krt-text-highlighter

css html javascript text-highlighting

Last synced: 13 days ago
JSON representation

Simple text highlighter based on css.highlight

• Host: GitHub
• URL: https://github.com/krtninja/krt-text-highlighter
• Owner: KrtNinja
• Created: 2024-11-02T15:54:30.000Z (13 days ago)
• Default Branch: main
• Last Pushed: 2024-11-02T19:22:17.000Z (13 days ago)
• Last Synced: 2024-11-02T20:18:39.351Z (13 days ago)
• Topics: css, html, javascript, text-highlighting
• Language: TypeScript
• Homepage: https://krtninja.github.io/krt-text-highlighter/
• Size: 12.7 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Text highlighter

Example for implementation in your project, or use as a library. \

Analogue of the search in the browser on the page, but you can specify areas (custom root element) for highlighting the text.\

Also exclude paragraphs from highlighting inside the root.

> Using [CSS highlight](https://developer.mozilla.org/en-US/docs/Web/CSS/::highlight)

## How to use

### Highlight style

Add style by specify the custom-highlight-name

```css

::highlight(example-highlight-name) {

  color: black;

  background-color: #fed330;

}

```

### Create highlighter

Create `Highlighter` by specify the custom-highlight-name

```javascript

import { Highlighter } from 'krt-text-highlighter'

// The root is any element inside which you want the highlight to work

const $root = document.getElementById('example-root')

const highlighter = new Highlighter('example-highlight-name')

highlighter.attach($root) // attach the root

highlighter.highlight(['example', 'words']) // highlight words

```

### Ignoring elements

Specify the css-selector with the second argument. \

By default `[data-nohls]`

```html

    


      


        Highlight: 

        Any text can be highlighted

      

      


        Exclude:

        Any text can be excluded for highlighting 

      

    

```


```js

// file.js

const highlighter = new Highlighter('example-highlight-name', '[data-nohls]') // by default [data-nohls]

highlighter.attach($root)

highlighter.highlight(['example', 'words'])

```

## [Example](./example)