{"id":16260112,"url":"https://github.com/remeic/vue-highlighter","last_synced_at":"2025-03-16T13:31:06.610Z","repository":{"id":57396185,"uuid":"126550662","full_name":"Remeic/vue-highlighter","owner":"Remeic","description":"🏷 Vue directive for highlight multiple istances of a word","archived":false,"fork":false,"pushed_at":"2022-10-20T20:17:38.000Z","size":238,"stargazers_count":39,"open_issues_count":7,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T14:22:17.687Z","etag":null,"topics":["hacktoberfest","highlight","javascript","vue","vue-directive","vue-highlighter","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Remeic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-24T00:07:04.000Z","updated_at":"2023-03-17T14:39:50.000Z","dependencies_parsed_at":"2022-09-13T18:42:56.597Z","dependency_job_id":null,"html_url":"https://github.com/Remeic/vue-highlighter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Remeic","download_url":"https://codeload.github.com/Remeic/vue-highlighter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815611,"owners_count":20352197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","highlight","javascript","vue","vue-directive","vue-highlighter","vuejs"],"created_at":"2024-10-10T16:06:24.483Z","updated_at":"2025-03-16T13:31:06.236Z","avatar_url":"https://github.com/Remeic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-highlighter\n\n\u003e **Warning** \u003cbr /\u003e\n\u003e This project is no longer maintained and its use is not recommended\n\n\n[![NPM version](https://img.shields.io/npm/v/vue-highlighter.svg?style=flat)](https://npmjs.com/package/vue-highlighter) [![NPM downloads](https://img.shields.io/npm/dm/vue-highlighter.svg?style=flat)](https://npmjs.com/package/vue-highlighter) [![Build Status](https://travis-ci.org/Remeic/vue-highlighter.svg?branch=master)](https://travis-ci.org/Remeic/vue-highlighter)\n[![codecov](https://codecov.io/gh/Remeic/vue-highlighter/branch/master/graph/badge.svg)](https://codecov.io/gh/Remeic/vue-highlighter)\n\nVue directive for highlight multiple istances of a word\n\n![Example](https://media.giphy.com/media/YU7J5r4WfnLO0geruD/giphy.gif)\n\n## Install\n\n```bash\nyarn add vue-highlighter\n```\n\nCDN: [UNPKG](https://unpkg.com/vue-highlighter/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-highlighter/) (available as `window.vueHighlighter`)\n\n## Usage\n\n***\n\n### Version 1.1.2 (**Deprecated**)\n```vue\n\u003ctemplate\u003e\n  \u003cp v-highlight:word=\"'Alessandra'\"\u003eI love Alessandra\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vueHighlighter from 'vue-highlighter'\n\nexport default {\n  directives: {\n    vueHighlighter\n  }\n}\n\u003c/script\u003e\n```\n\n***\n\n### Version 2.1.2 ( and \u003e= )\n```vue\n\u003ctemplate\u003e\n  \u003cp v-highlight=\"{ word: word, live: live }\" \u003e{{ text }}\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vueHighlighter from 'vue-highlighter'\n\nexport default {\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra , AlessandraGiulio',\n      word: 'Alessandra',\n      live: false,\n    }\n  },\n  directives: {\n    vueHighlighter\n  }\n}\n\u003c/script\u003e\n```\n\n#### Option\n  **Word (String)**: The text string to look for and highlight\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      live: true,\n    }\n  }\n  ```\n  \n  **Word (Array[String])**: List of text strings to look for and highlight\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: ['I', 'Alessandra'],\n      live: true,\n    }\n  }\n  ```\n  \n  **Live**: Allow to highlight word and substring, by automatically changhe the regex expression \u003cbr\u003e\n  The live attribute is an optional attribute, is set to false by default\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      live: true,\n    }\n  }\n  ```\n\n  **Color**: Allow to customize the color of text when highlighted\u003cbr\u003e\n  The color attribute is optional and is set to #fff by default\u003cbr\u003e\n  color can be HEX or String\u003cbr\u003e\n\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      style: {\n        color: '#ffddee'\n      }\n    }\n  }\n  ```\n\n**Background Color**: Allow to customize the background color of text when highlighted\u003cbr\u003e\nThe bgColor attribute is optional and is set to #009688 by default\u003cbr\u003e\nbgColor can be HEX or String\n  \n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      style: {\n        bgColor: '#ffddee'\n      }\n    }\n  }\n  ```\n\n**Padding**: Allow to customize the padding of text when highlighted\u003cbr\u003e\nThe padding attribute is optional and is set to 0px 5px by default\u003cbr\u003e\npadding is validate if match this requirments: there is at least one number followed by one of this unit of measure ['cm','mm','in','px','pt','pc','em','ex','ch','rem','vw','vh','vmin','vmax','%']\n  \n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      style: {\n        padding: '4rem 5%'\n      }\n    }\n  }\n  ```\n\n## Works on\n\n* Paragraph\n* Ul\n* Ol\n* Button \n* A \n\n### Contributor\n\nThanks to [Andrea Stagi](https://github.com/astagi) to help me with troubleshooting ❤️.\n\n\n## License\n\nMIT \u0026copy; [Giulio Fagioli](https://github.com/remeic)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremeic%2Fvue-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremeic%2Fvue-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremeic%2Fvue-highlighter/lists"}