{"id":15707887,"url":"https://github.com/sarckk/highliter","last_synced_at":"2026-03-09T19:12:40.178Z","repository":{"id":41695221,"uuid":"246436819","full_name":"sarckk/highliter","owner":"sarckk","description":"⚡ Lightweight JS highlighter","archived":false,"fork":false,"pushed_at":"2022-12-12T04:46:10.000Z","size":4073,"stargazers_count":5,"open_issues_count":20,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-02T09:28:00.848Z","etag":null,"topics":["highlight","javascript","no-dependencies","range","selection"],"latest_commit_sha":null,"homepage":"https://sarckk.github.io/highliter/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sarckk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-11T00:20:23.000Z","updated_at":"2023-09-28T08:44:46.000Z","dependencies_parsed_at":"2023-01-27T13:30:29.522Z","dependency_job_id":null,"html_url":"https://github.com/sarckk/highliter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sarckk/highliter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarckk%2Fhighliter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarckk%2Fhighliter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarckk%2Fhighliter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarckk%2Fhighliter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sarckk","download_url":"https://codeload.github.com/sarckk/highliter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarckk%2Fhighliter/sbom","scorecard":{"id":800675,"data":{"date":"2025-08-11","repo":{"name":"github.com/sarckk/highliter","commit":"f03982ef5ee84c47ea32a706a26deee8b2f6f12e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"93 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T10:23:22.945Z","repository_id":41695221,"created_at":"2025-08-23T10:23:22.945Z","updated_at":"2025-08-23T10:23:22.945Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30308874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T17:35:44.120Z","status":"ssl_error","status_checked_at":"2026-03-09T17:35:43.707Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["highlight","javascript","no-dependencies","range","selection"],"created_at":"2024-10-03T20:41:38.789Z","updated_at":"2026-03-09T19:12:40.142Z","avatar_url":"https://github.com/sarckk.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/highliter\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/sarckk/highliter/master/assets/highliter.png\" alt=\"Highliter\" width=\"380\"\u003e\u003c/a\u003e\n  \u003ch4 align=\"center\"\u003ehighliter is a \u003ci\u003elite\u003c/i\u003e JS highlighting library with no dependencies ⚡\u003c/h4\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/highliter\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/highliter\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/highliter\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/min/highliter\" alt=\"npm pkg size\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/sarckk/highliter/master/assets/demo.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n---\n\n## About\n\nSometimes it's good to re-invent the wheel (or at least part of it).\n\n**highliter** was born out of my attempt to understand the [Range API](https://developer.mozilla.org/en-US/docs/Web/API/Range).\n\nI took a lot of inspiration from [alienzhou](https://github.com/alienzhou)'s [web-highlighter](https://github.com/alienzhou/web-highlighter) library, and large potions of the code is directly modelled after his code. However, there are some differences in\nthe underlying implementation (look at `getHighlightRanges()` in `src/util/dom.js` for example) which (the author contends) has resulted in a major improvement in readability in most parts of the code. The main differences between **highliter** and [web-highlighter](https://github.com/alienzhou/web-highlighter) are:\n\n1. it uses `TreeWalker` to retrieve the list of text nodes which overlap the selected range, resulting in much simpler code\n2. ...uses [Range API](https://developer.mozilla.org/en-US/docs/Web/API/Range)'s `surroundContents()` method instead of the more verbose method of creating documentFragments\n3. ...fixes a minor implementation error in [web-highlighter](https://github.com/alienzhou/web-highlighter) in which an incorrect range is restored if the absolute offset of the saved range (relative to its parent element) is 0 (see the comment [here](https://github.com/sarckk/highliter/blob/c18753e1c79f188d5602639d1a7dcb16a0c83828/src/util/dom.js#L162) for details)\n4. ...supports the creation and deletion of overlapping highlights in a fundamentally different (and much simpler) way than [web-highlighter](https://github.com/alienzhou/web-highlighter). The key insight here is that instead of partitioning partially overlapped highlights into separate highlights, we can allow nested highlights by storing the highlighted range relative to the nearest parent element which is not a highlight element. The [absToRelativeOffset()](https://github.com/sarckk/highliter/blob/c18753e1c79f188d5602639d1a7dcb16a0c83828/src/util/dom.js#L145) method then handles the conversion to locate the correct startContainer and endContainer for the range the library is trying to restore\n5. ...but offers less customizability compared to [web-highlighter](https://github.com/alienzhou/web-highlighter)\n\nThe library should be thought of as an experimental work, and as such has no test coverage. It is not recommended for use in a production environment.\n\n## Intallation\n\n```bash\nnpm i highliter\n```\n\n## Usage\n\n```javascript\nimport Highliter from 'highliter';\nconst highliter = new Highliter();\n```\n\nThe highlighting functionality is automatically enabled by default upon importing. To prevent this, immediately call `.pause()` to temporarily disable it until further action, like so:\n\n```javascript\nhighliter.pause();\n```\n\n## Demo\n\nCheck out the demo page [here](https://sarckk.github.io/highliter/), or look inside the `demo` folder for the source code.\n\nTo run the demo locally, clone the repo:\n\n```bash\ngit clone https://github.com/sarckk/highliter.git\n```\n\nChange into the directory and install the dependencies:\n\n```bash\nnpm i\n```\n\nThen run the following npm script:\n\n```bash\nnpm start\n```\n\n...and visit [http://localhost:8080/](http://localhost:8080/) to play around with the demo.\n\n## API Guide\n\n### Optional parameters\n\nPass in the options when initialising a new instance of the `Highliter` class like so:\n\n```javascript\nconst highliter = new Highliter({\n  highlightColor: '#42f575',\n  hoverColor: '#f5d142',\n  customTagName: 'custom-element',\n  exclude: ['li', 'div']\n});\n```\n\nAll options:\n\n| name           | type                      | description                                                                                                                                                                                                                     | required | default                          |\n| -------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------- |\n| highlightColor | `string`                  | RGB/RGBA/HEX string of the initial highlight color                                                                                                                                                                              | No       | `#FAFF60`                        |\n| hoverColor     | `string`                  | RGB/RGBA/HEX string of the initial highlight color                                                                                                                                                                              | No       | `#F1F73B`                        |\n| customTagName  | `string`                  | [Kebab-case](https://en.toolpage.org/tool/kebabcase) (dash in the name) string representing the name of the custom html element which will wrap around each text node in the highlight range\u003csup id=\"a1\"\u003e[more info](#f1)\u003c/sup\u003e | No       | `highlight-snippet`              |\n| exclude        | `string or array\u003cstring\u003e` | A single string or an array of strings of the tag name of elements whose child text nodes will be excluded during highlights                                                                                                    | No       | `['SCRIPT','STYLE','NO-SCRIPT']` |\n\n\u003cb id=\"f1\"\u003emore info:\u003c/b\u003e Any names with dash-separated strings will do, except for the following reserved names:\n\n- `annotation-xmli`\n- `color-profile`\n- `font-face`\n- `font-face-src`\n- `font-face-uri`\n- `font-face-format`\n- `font-face-name`\n- `missing-glyph`\n\nSee [here](https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name) for the full discussion. [↩](#a1)\n\n### Important properties\n\n#### `.currentRange`\n\nAn object containing the property `range` which is the the javascript Range object representing the currently selected range after clean-up, and `isSelectionBackwards` which is the boolean value representing whether or not the selection was made in reverse direction (right to left).\n\n#### `.currentHighlightColor`\n\nCurrently selected highlight color\n\n#### `.currentHoverColor`\n\nCurrently selected hover color (color of snippets when user hovers over it)\n\n#### \u003cstrong style=\"color:#4287f5\"\u003estatic\u003c/strong\u003e `Highliter.Events`\n\nObject containing constants representing the names of events triggered by the `Highliter` instance. Can be thought of as an enum. There are 10 possible events which the user can listen to, and some of the events will pass in arguments to the callback function. If the callback receives an argument, it will be an object with properties described under the table column `argument property` under each event:\n\n1. `Events.HOVER`\n   triggers when mouse enters a highlight\n   |argument property|description|type|\n   |---|---|---|\n   |`highlightID`|Value of the `highlightId` custom data attribute of the highlight element which the mouse has entered|string(`uuid`)|\n2. `Events.HOVER_OUT`\n   triggers when mouse exits a highlight\n   |argument property|description|type|\n   |---|---|---|\n   |`highlightID`|Value of the `highlightId` custom data attribute of the highlight element which the mouse has left|string(`uuid`)|\n3. `Events.CLICKED`\n   triggers when mouse clicks a highlight\n   |argument property|description|type|\n   |---|---|---|\n   |`highlightID`|Value of the `highlightId` custom data attribute of the highlight element which has been clicked|string(`uuid`)|\n4. `Events.CLICKED_OUT`\n   triggers when mouse clicks outside of the highlight which is in a clicked state\n   |argument property|description|type|\n   |---|---|---|\n   |`highlightID`|Value of the `highlightId` custom data attribute of the currently clicked highlight element which the mouse has clicked out of|string(`uuid`)|\n5. `Events.CREATED`\n   triggers when a highlight is created\n   |argument property|description|type|\n   |---|---|---|\n   |`highlight`|Object obtained from parsing a serialized highlight which has been successfully created from user input|Object|\n6. `Events.LOADED`\n   triggers when a highlight is loaded\n   |argument property|description|type|\n   |---|---|---|\n   |`highlight`|Object obtained from parsing a serialized highlight which has been successfully restored in the DOM from another source|Object|\n7. `Events.REMOVED`\n   triggers when a highlight is removed\n   |argument property|description|type|\n   |---|---|---|\n   |`highlightID`|Value of the `highlightId` custom data attribute of the highlight element removed|string(`uuid`)|\n8. `Events.ERROR_LOADING`\n   triggers when a serialized highlight is malformed / invalid and cannot not be restored\n   |argument property|description|type|\n   |---|---|---|\n   |`highlight`|Object obtained from parsing a serialized highlight|Object|\n   |`error`|Error message explaining reason why the highlight failed to be restored|string|\n9. `Events.SHOW_MENU`\n   Triggers when user has selected a new valid range (to be used to position menu)\n   \u003e No argument passed\n10. `Events.HIDE_MENU`\n    Triggers when the menu has to be hidden\n    \u003e No argument passed\n\nUsers can listen to any of one of these events like so:\n\n```javascript\nhighliter\n  .on(Highliter.Events.HOVER, ({ highlightID }) =\u003e {\n    // do something on hover\n  })\n  .on(Highliter.Events.HOVER_OUT, ({ highlightID }) =\u003e {\n    // do something on hover out\n  })\n  .on(Highliter.Events.CLICKED_OUT, ({ highlightID }) =\u003e {\n    // do something on click out\n  });\n```\n\n### Exposed methods\n\n#### `.start()`\n\nAdds event listeners to enable all core highlighting features. Text selected is not automatically highlighted, but instead it listens to a custom `highlight` event to create a highlight. Call this method to restart the highlighter after `.pause()` or `.terminate()`\n\n#### `.pause()`\n\nPauses ability to highlight by removing event listenings on `mouseup` and `highlight`. Existing highlights on the DOM can still be clicked and hovered on.\n\n#### `.terminate()`\n\nCompletely removes all highlighter related functionalities and clears all highlights on the screen\n\n#### `.restoreHighlights(highlights)`\n\nRestores highlights from an array of js object(s) containing info about each highlight. The argument `highlights` is an array of objects obtained from parsing the serialized JSON data of highlights. For each object in `highlights`, it will emit `Events.ERROR_LOADING` if it fails to restore the highlight, and `Events.LOADED` if successful.\n\n#### `.setHighlightColor(color)`\n\nChanges the highlight color. The argument `color` is a string representing either the RGB, RGBA or HEX value of the color of the highlight created.\n\n#### `.setHoverColor(color)`\n\nChanges the hover color of the highlights. The argument `color` is a string representing either the RGB, RGBA or HEX value of the color which a highlight takes on when a mouse enters it\n\n#### `.remove(highlightID)`\n\nRemoves all highlight snippets with the `highlightId` data attribute matching the argument passed in from the DOM. The argument `highlightID` is a string representing the uuid given to each highlight.\n\n#### `.clearAll()`\n\nClears all highlights from the DOM.\n\n### How to create a highlight\n\nBy default, the `Highliter` instance does not create a highlight whenever a user selects a new range. It does this because most use cases dictates a user to confirm the highlight, such as by pressing a button (the exposed events `Highliter.Events.SHOW_MENU` and `Highliter.Events.HIDE_MENU` are provided to make the hiding/showing and positioning of a menu easy to implement). Instead, it listens for the `highlight` event, which is a custom event that needs to be dispatched by the script using this library. For example, in `demo/menu.js`, this is done by adding a `click` event listener to the `highlight-menu` element, and dispatching a new `CustomEvent` whenever it is clicked:\n\n```javascript\nthis.addEventListener('click', () =\u003e {\n  this.dispatchEvent(\n    new CustomEvent('highlight', {\n      bubbles: true,\n      composed: true // required here in order to cross ShadowDOM boundary\n    })\n  );\n});\n```\n\n**Note:** In the particular example above, `composed:true` has to be set because the event is being dispatched from within a shadow dom and thus the property needs to be set to `true` so that the `highlight` event can bubble past the shadow dom boundary and reach the event listener in the `document`.\n\n## TODO\n\n- Add support for mixing of colors for overlapping highlights\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarckk%2Fhighliter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarckk%2Fhighliter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarckk%2Fhighliter/lists"}