https://github.com/kamiazya/vue-highlight

Vue(3+) directive for highlighting keywords in text.
https://github.com/kamiazya/vue-highlight

custom-highlight highlight vue-directive vue3

Last synced: about 14 hours ago
JSON representation

Vue(3+) directive for highlighting keywords in text.

• Host: GitHub
• URL: https://github.com/kamiazya/vue-highlight
• Owner: kamiazya
• License: mit
• Created: 2024-06-20T05:48:43.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-23T07:00:27.000Z (3 months ago)
• Last Synced: 2024-11-14T14:47:14.310Z (about 1 month ago)
• Topics: custom-highlight, highlight, vue-directive, vue3
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@kamiazya/vue-highlight
• Size: 274 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

# @kamiazya/vue-highlight ✨

Vue(3+) directive for highlighting keywords in text.

> You can highlight matching keywords in the text within a given element with your own CSS.

>

> Internally, it uses the [Custom Highlighting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API), so it does not corrupt the DOM.

>

> This API is not implemented in all browsers, so please check if it is supported by the supporting browsers before use.

> 

> For more information, [click here](https://developer.mozilla.org/en-US/docs/Web/API/Highlight#browser_compatibility).

## Installation 📥

```bash

# By npm

$ npm install @kamiazya/vue-highlight

# By yarn

$ yarn add @kamiazya/vue-highlight

# By pnpm

$ pnpm add @kamiazya/vue-highlight

```

## Usage 📘

### Basic usage

Highlight the keyword `"bar"` in the text `"foo bar baz"`.

```vue

import { ref } from "vue";

import vHighlight from "@kamiazya/vue-highlight";

const keyword = ref("bar");

  


    foo bar baz

  


::highlight(v-highlight) {

  background-color: yellow;

  color: black;

}

```

If you want to use `v-highlight` directive in global, you can register the `vHighlight` direvtive to app instance.

```ts

import { vHighlight } from '@kamiazya/vue-highlight'; // Import the directive

import { createApp } from 'vue';

import App from './src/App.vue';

const app = createApp(App);

app.directive('highlight', vHighlight); // Register the directive

app.mount('#container');

```

### Multiple keywords

Highlight the keywords `"foo"` and `"baz"` in the text `"foo bar baz"`.

```vue

import { ref } from "vue";

import vHighlight from "@kamiazya/vue-highlight";

const keyword = ref(["foo", "baz"]);



  foo bar baz



::highlight(v-highlight) {

  background-color: yellow;

  color: black;

}

```

### Custom highlight name

Highlight the keyword `"bar"` in the text `"foo bar baz"` with a custom highlight name.

```vue

import { ref } from "vue";

import vHighlight from "@kamiazya/vue-highlight";

const keyword = ref("bar");



foo bar baz



::highlight(my-custom-highlight) {

  background-color: yellow;

  color: black;

}

```

### Multiple highlights

Highlight the keywords `"foo"` and `"baz"` in the text `"foo bar baz"` with multiple highlights.

```vue

import { ref } from "vue";

import vHighlight from "@kamiazya/vue-highlight";

const keyword1 = ref("bar");

const keyword2 = ref("foo");



foo bar baz



::highlight(highlight1) {

  background-color: yellow;

  color: black;

}

::highlight(highlight2) {

  background-color: red;

  color: white;

}

```

## License ⚖️

This software is released under the MIT License, see [LICENSE](./LICENSE).