25:["$","title",null,{"children":"Highlight - Web APIs | Momo | Observable"}] 49:[] 29:{"id":"9720c8be3588ef74","slug":null,"title":"Highlight - Web APIs","thumbnail":"454da81b578010918a8979e48e224fc1a8efb6c4dc735096931b714f7639a2b1","access_level":"public","create_time":"$D2023-02-16T14:20:55.885Z","update_time":"$D2023-02-18T07:08:41.933Z","view_time":null,"first_public_time":"$D2023-02-16T14:20:55.885Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9bae029e758c46f6","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":55,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"041956f47b83149c","slug":"demo","title":"Demo","owner":{"id":"9bae029e758c46f6","login":"baotlake","name":"Momo"}},"type":"notebook","body":{"titling":"auto","title":"Highlight - Web APIs","cells":[{"id":5,"value":"

Highlight - Web APIs

The Highlight interface is used to represent a collection of Range instances to be styled using the CSS Custom Highlight API.

To style arbitrary ranges in a page, instantiate a new Highlight object, add one or more Range objects to it, and register it using the HighlightRegistry.

A single Highlight object can hold one or more Range objects and behaves like a Set.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"highlight = {\n await new Promise((resolve) => setTimeout(resolve, 100));\n const target = document.querySelector(\"#p\");\n const range = new Range();\n range.setStartBefore(target);\n range.setEndAfter(target);\n const h = new Highlight(range);\n CSS.highlights.set(\"my-custom-highlight\", h);\n yield h;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n document.addEventListener('pointerup', () => {\n const selection = getSelection()\n if(!selection) return\n const range = selection.getRangeAt(0)\n highlight.add(range)\n // console.log('add highlight', range)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Array.from(highlight.values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null