[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-build-a-text-web-highlighter-as-a-chrome-extension":3},{"meta":4,"html":36,"authorName":37,"authorFacebookUrl":38,"authorProfileImage":39,"authorWebsite":40,"authorJobTitle":41,"authorTwitterUrl":42,"wordCount":43,"recommended":44},{"id":5,"slug":6,"type":7,"title":8,"excerpt":9,"metaTitle":10,"metaDescription":10,"canonicalUrl":10,"featureImage":11,"publishedAt":17,"createdAt":18,"updatedAt":19,"featured":20,"readingTime":21,"tags":22,"author":35,"recommendedSlugs":10},"62ee40123dc2df47fd59bd45","build-a-text-web-highlighter-as-a-chrome-extension","post","Build A Text Web-Highlighter as a Chrome Extension","Learn how to build a text web highlighter as a Chrome extension in this detailed guide. Improve your browsing experience by highlighting and saving text.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1475154404624-07909433bbfb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDN8fGhpZ2hsaWdodHxlbnwwfHx8fDE2NTk3ODExNTM&ixlib=rb-1.2.1&q=80&w=2000","Book with text marker in it","Photo by \u003Ca href=\"https:\u002F\u002Funsplash.com\u002F@aaronburden?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit\">Aaron Burden\u003C\u002Fa> \u002F \u003Ca href=\"https:\u002F\u002Funsplash.com\u002F?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit\">Unsplash\u003C\u002Fa>",2000,1502,"2022-08-06T10:33:44.000+00:00","2022-08-06T10:18:58.000+00:00","2024-08-11T14:27:10.000+00:00",false,6,[23,26,29,32],{"name":24,"slug":25},"Chrome Extension","chrome-extension",{"name":27,"slug":28},"Web Highlights","web-highlights",{"name":30,"slug":31},"Programming","programming",{"name":33,"slug":34},"Web Development","web-development","marius-bongarts","\u003Ch3 id=\"learn-to-build-a-chrome-extension-with-web-components\">\n  Learn to build a Chrome extension with Web Components.\n\u003C\u002Fh3>\n\u003Cp>\n  I always loved the web highlighter, which appears when selecting text in an article on\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\">Medium.com\u003C\u002Fa>\n  . I thought that it would be nice to have such functionality on each website on the internet.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002Fimage.webp\"\n    class=\"kg-image\"\n    alt=\"Medium.com web highlighter\"\n    loading=\"lazy\"\n    width=\"1025\"\n    height=\"146\"\n    srcset=\"\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002Fimage.webp   600w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002Fimage.webp 1000w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002Fimage.webp            1025w\n    \"\n    sizes=\"(min-width: 720px) 720px\"\n  \u002F>\n  \u003Cfigcaption>Medium.com web highlighter\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  I began to look for a chrome extension that provides a way to save text and bookmarks in a better-organized way.\n  Several extensions function as a text marker, but none of them really acted according to my conceptions. That was when\n  I decided to develop my own\n  \u003Ca\n    href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-highlights-%20-bookmark\u002Fhldjnlbobkdkghfidgoecgmklcemanhm?hl=de\"\n    rel=\"noopener\"\n  >\n    Web Highlights Chrome Extension\n  \u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Ch3 id=\"what-we-build\">What we build\u003C\u002Fh3>\n\u003Cp>\n  In this article, I want to show you a step-by-step guide on setting up a chrome extension that shows a text\n  highlighter, like the one here on Medium, in the form of a Web Component. We are going to keep things simple by using\n  basic Javascript and CSS.\n\u003C\u002Fp>\n\u003Cp>Here is what we are gonna build:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*rLv2BebRNF8L3zc3JJGohA.gif\"\n    class=\"kg-image\"\n    alt=\"Video of highlighter in action\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>\n    Our highlighter on:\n    \u003Ca\n      href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components\"\n      data-href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components\"\n      class=\"markup--anchor markup--figure-anchor\"\n      rel=\"nofollow noopener noopener noopener noopener\"\n      target=\"_blank\"\n    >\n      https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components\n    \u003C\u002Fa>\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  For those of you who just want to go straight to the source code. You will find it\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Fmedium-highlighter\" rel=\"noopener\">here\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Ch3 id=\"let%E2%80%99s-get-started\">Let’s get started\u003C\u002Fh3>\n\u003Cp>\n  First of all, we need to create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  file. This is the entry point of our extension, which defines metadata, such as name and version, as well as\n  additional functionalities.\n\u003C\u002Fp>\n\u003Cp>\n  Let’s create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  and add some metadata:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist110803434\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 04:00PM on July 21, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Background Color Changer\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F25955af16fedc0ee4497eff39cd5ac39\u002Fraw\u002F3425731dd717e9657a4645c7f7b44e051f8e06e2\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F25955af16fedc0ee4497eff39cd5ac39#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  The first three values\n  \u003Ccode>name\u003C\u002Fcode>\n  ,\n  \u003Ccode>version\u003C\u002Fcode>\n  and\n  \u003Ccode>manifest_version\u003C\u002Fcode>\n  are enough to create our first chrome extension.\n\u003C\u002Fp>\n\u003Ch4 id=\"install-the-extension\">Install the extension\u003C\u002Fh4>\n\u003Cp>\n  Open your Chrome browser and navigate to\n  \u003Cstrong>chrome:\u002F\u002Fextensions\u003C\u002Fstrong>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Enable Developer Mode by clicking the toggle switch next to\n  \u003Cstrong>Developer mode\u003C\u002Fstrong>\n  . Click the\n  \u003Cstrong>Load unpacked\u003C\u002Fstrong>\n  button and select the directory with our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*XFSb5k4WkgN0rH4qL-ZHPg.png\"\n    class=\"kg-image\"\n    alt=\"Chrome Store - How to load unpacked\"\n    loading=\"lazy\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>Congratulations! You’ve just created your first Chrome Extension!\u003C\u002Fp>\n\u003Ch4 id=\"add-some-functionality\">Add some functionality\u003C\u002Fh4>\n\u003Cp>\n  We have just installed our own extension. Still, currently, it doesn't do anything because we haven’t added\n  functionality to our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  To make our text-highlighter work we need a functionality that can read the DOM and make changes to it. For that, we\n  will create content scripts. The chrome developer documentation defines content scripts as follows:\n\u003C\u002Fp>\n\u003Cblockquote>\n  Content scripts live in an isolated world, allowing a content script to make changes to its JavaScript environment\n  without conflicting with the page or other extensions’ content Scripts.\n\u003C\u002Fblockquote>\n\u003Cp>\n  Let’s create two files, each with one alert, to ensure that they are successfully loaded by our extension. Those files\n  will act as our content scripts.\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist110848253\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-content-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"content.js content, created by MariusBongarts on 04:46PM on July 23, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"content.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>alert\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>'Hello world from content.js'\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F75c83227aab6ac527e0402340af4cf2f\u002Fraw\u002F762c6e43d8e7f46664c50b0bcbc8b495a0da1360\u002Fcontent.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F75c83227aab6ac527e0402340af4cf2f#file-content-js\" class=\"Link--inTextBlock\">\n          content.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist110848260\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-medium-highlighter-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"medium-highlighter.js content, created by MariusBongarts on 04:47PM on July 23, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"medium-highlighter.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>alert\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>'Hello world from medium-highlighter.js'\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbf43bb0f7f8e1ed4592b01a639f19235\u002Fraw\u002F36ad4606f1094eeae0ac55741a141730d61f6100\u002Fmedium-highlighter.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbf43bb0f7f8e1ed4592b01a639f19235#file-medium-highlighter-js\" class=\"Link--inTextBlock\">\n          medium-highlighter.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  The\n  \u003Ccode>content.js\u003C\u002Fcode>\n  script is the entry point of our extension. It will be responsible for creating the Web Component, that will be\n  defined in the\n  \u003Ccode>medium-highlighter.js\u003C\u002Fcode>\n  file.\n\u003C\u002Fp>\n\u003Cp>\n  Let’s adjust our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  to inject our scripts:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist110847842\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 04:20PM on July 23, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Background Color Changer\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"content_scripts"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"matches"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan><all_urls>\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>],\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC8\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"js"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC9\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>content.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC10\" class=\"blob-code blob-code-inner js-file-line\">      ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC11\" class=\"blob-code blob-code-inner js-file-line\">    }\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC12\" class=\"blob-code blob-code-inner js-file-line\">  ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC13\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Ff646138dd2bf5aaa7fad3a93e80f52e7\u002Fraw\u002F6664084c993363c4faa152728011e337b661e635\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Ff646138dd2bf5aaa7fad3a93e80f52e7#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  To use our statically declared scripts we need to register them under the\n  \u003Ccode>content_scripts\u003C\u002Fcode>\n  field. This field needs to define the\n  \u003Cem>required\u003C\u002Fem>\n  attribute\n  \u003Ccode>matches\u003C\u002Fcode>\n  to specify on which pages the content script will be injected into. For that, you can specify several\n  \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Fdevelop\u002Fconcepts\u002Fmatch-patterns\" rel=\"noopener\">\n    match patterns\n  \u003C\u002Fa>\n  . We will just use the special pattern\n  \u003Ccode><all_urls>\u003C\u002Fcode>\n  to match any URL that starts with a permitted scheme- for example\n  \u003Ccode>http\u003C\u002Fcode>\n  or\n  \u003Ccode>https\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  We also define the optional field\n  \u003Ccode>js\u003C\u002Fcode>\n  . Here we define our scripts to be injected into matching pages.\n\u003C\u002Fp>\n\u003Cp>\n  Let´s update our extension by pressing the refresh button of the extension on\n  \u003Ccode>chrome:\u002F\u002Fextensions\u003C\u002Fcode>\n  . We can now navigate to any page and, if done correctly, two alerts should appear when the page is loaded.\n\u003C\u002Fp>\n\u003Cp>To be honest a really annoying extension. So let’s get started with creating our text-highlighter Web Component.\u003C\u002Fp>\n\u003Ch3 id=\"defining-the-web-component\">\u003Cstrong>Defining the Web Component\u003C\u002Fstrong>\u003C\u002Fh3>\n\u003Cp>\n  Finally, we set up the basic structure of our extension. We can now go ahead and create our text-highlighter in a\n  familiar Javascript environment. Or better to say in the\n  \u003Cem>isolated world\u003C\u002Fem>\n  of content scripts.\n\u003C\u002Fp>\n\u003Ch4 id=\"template\">Template\u003C\u002Fh4>\n\u003Cp>\n  We want to show a button with an icon whenever a user selects text on websites. Additionally, we need an element that\n  will be wrapped around the selected text to indicate a highlight on the page. That’s our template which will be\n  rendered by our Web Component:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist111006892\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-medium-highlighter-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"medium-highlighter.js content, created by MariusBongarts on 08:08PM on July 30, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"medium-highlighter.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>highlightColor\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>"rgb(213, 234, 255)"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>template\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  <template id="highlightTemplate">\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    <span class="highlight" style="background-color: \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>highlightColor\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>; display: inline"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  <\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  <button id="mediumHighlighter">\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    <svg class="text-marker" xmlns="http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg" viewBox="0 0 544 512"><path d="M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.592 36.592 0 0 0-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08c13.73 4.2 28.65-.01 38.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2c-20.49-20.49-53.38-21.52-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4c19.18-21.74 18.15-54.63-2.35-75.13z"><\u002Fpath><\u002Fsvg>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  <\u002Fbutton>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F815e41f2cc89759f51e0b8624154a3f5\u002Fraw\u002Fca66e883ba2fd68e80570ce5c7a79d437081342f\u002Fmedium-highlighter.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F815e41f2cc89759f51e0b8624154a3f5#file-medium-highlighter-js\" class=\"Link--inTextBlock\">\n          medium-highlighter.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  First of all, we create a constant for our highlight color to follow the\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fdry-your-wet-typescript-code-e3c777b3daf9\">DRY principle\u003C\u002Fa>\n  because we will use it again later. It is also noticeable that we will make use of the\n  \u003Ccode>template\u003C\u002Fcode>\n  HTML tag. This will be our wrapper element around highlighted text.\n\u003C\u002Fp>\n\u003Cp>\n  Template elements are one of the three main technologies of Web Components. They are used to hold HTML content that is\n  not rendered immediately and can be instantiated subsequently during runtime. Since we will need text highlights many\n  times and it should not be visible from the beginning, it makes sense to use this technology.\n\u003C\u002Fp>\n\u003Ch4 id=\"styling\">Styling\u003C\u002Fh4>\n\u003Cp>To make our highlighter look good and also appear at the right place we need to define some dynamic styling:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist111007075\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-medium-highlighter-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"medium-highlighter.js content, created by MariusBongarts on 08:25PM on July 30, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"medium-highlighter.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-en>styled\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> display \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>"none"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> left \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> top \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  #mediumHighlighter {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    align-items: center;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    background-color: black;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    border-radius: 5px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    border: none;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    cursor: pointer;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    display: \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>display\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    justify-content: center;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    left: \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>left\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    padding: 5px 10px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    position: fixed;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    top: \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>top\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    width: 40px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    z-index: 9999;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  }\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC17\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  .text-marker {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    fill: white;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  }\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC20\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  .text-marker:hover {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC21\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    fill: \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>highlightColor\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC22\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  }\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC23\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fae9fe20d0c3f00c5c23a14730d2ad60e\u002Fraw\u002F985887cb35216080fd7d9cd8fecb7f6707d73af4\u002Fmedium-highlighter.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fae9fe20d0c3f00c5c23a14730d2ad60e#file-medium-highlighter-js\" class=\"Link--inTextBlock\">\n          medium-highlighter.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  Per default, our highlighter should not be visible and its position should be in the upper left corner. We also re-use\n  our\n  \u003Ccode>highlightColor\u003C\u002Fcode>\n  constant to color our marker icon.\n\u003C\u002Fp>\n\u003Ch4 id=\"defining-the-custom-element\">Defining the Custom Element\u003C\u002Fh4>\n\u003Cp>\n  Now it is time to define our Web Component and use our template with its styling. That’s how our custom element looks\n  like:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist111007160\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-medium-highlighter-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"medium-highlighter.js content, created by MariusBongarts on 08:35PM on July 30, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"medium-highlighter.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>class\u003C\u002Fspan> \u003Cspan class=pl-v>MediumHighlighter\u003C\u002Fspan> \u003Cspan class=pl-k>extends\u003C\u002Fspan> \u003Cspan class=pl-v>HTMLElement\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>get\u003C\u002Fspan> \u003Cspan class=pl-en>markerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-c1>JSON\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>parse\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getAttribute\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"markerPosition"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>||\u003C\u002Fspan> \u003Cspan class=pl-s>"{}"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>get\u003C\u002Fspan> \u003Cspan class=pl-en>styleElement\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>querySelector\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"style"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>get\u003C\u002Fspan> \u003Cspan class=pl-en>highlightTemplate\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getElementById\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"highlightTemplate"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>static\u003C\u002Fspan> \u003Cspan class=pl-k>get\u003C\u002Fspan> \u003Cspan class=pl-en>observedAttributes\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC15\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-s>"markerPosition"\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC17\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC18\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>constructor\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC19\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>super\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC20\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>render\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC21\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC22\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC23\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>render\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC24\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>attachShadow\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>mode\u003C\u002Fspan>: \u003Cspan class=pl-s>"open"\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC25\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>style\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createElement\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"style"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC26\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-s1>style\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>textContent\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC27\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>appendChild\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>style\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC28\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>innerHTML\u003C\u002Fspan> \u003Cspan class=pl-c1>+=\u003C\u002Fspan> \u003Cspan class=pl-s1>template\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC29\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC30\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getElementById\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"mediumHighlighter"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC31\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>addEventListener\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"click"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>highlightSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC32\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC33\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC34\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>attributeChangedCallback\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>name\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s1>oldValue\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s1>newValue\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC35\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>if\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>name\u003C\u002Fspan> \u003Cspan class=pl-c1>===\u003C\u002Fspan> \u003Cspan class=pl-s>"markerPosition"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L36\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"36\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC36\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>styleElement\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>textContent\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>markerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L37\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"37\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC37\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L38\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"38\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC38\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L39\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"39\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC39\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L40\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"40\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC40\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>highlightSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L41\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"41\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC41\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>var\u003C\u002Fspan> \u003Cspan class=pl-s1>userSelection\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L42\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"42\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC42\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>for\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-k>let\u003C\u002Fspan> \u003Cspan class=pl-s1>i\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan> \u003Cspan class=pl-s1>i\u003C\u002Fspan> \u003Cspan class=pl-c1><\u003C\u002Fspan> \u003Cspan class=pl-s1>userSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>rangeCount\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan> \u003Cspan class=pl-s1>i\u003C\u002Fspan>\u003Cspan class=pl-c1>++\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L43\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"43\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC43\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>highlightRange\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>userSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getRangeAt\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>i\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L44\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"44\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC44\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L45\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"45\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC45\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>empty\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L46\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"46\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC46\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L47\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"47\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC47\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L48\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"48\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC48\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>highlightRange\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>range\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L49\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"49\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC49\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>clone\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L50\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"50\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC50\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>highlightTemplate\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>cloneNode\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-c1>true\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>content\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>firstElementChild\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L51\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"51\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC51\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-s1>clone\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>appendChild\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>range\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>extractContents\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L52\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"52\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC52\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-s1>range\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>insertNode\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>clone\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L53\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"53\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC53\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L54\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"54\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC54\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L55\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"55\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC55\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-medium-highlighter-js-L56\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"56\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-medium-highlighter-js-LC56\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>customElements\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>define\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"medium-highlighter"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-v>MediumHighlighter\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F557b0d23ed993483c8b9eeb384f24120\u002Fraw\u002Fbd545234a1a3842acf2c51c6feb388302205231b\u002Fmedium-highlighter.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F557b0d23ed993483c8b9eeb384f24120#file-medium-highlighter-js\" class=\"Link--inTextBlock\">\n          medium-highlighter.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>Well, that’s a lot. Don’t worry I will guide you through it:\u003C\u002Fp>\n\u003Cp>\n  First, we will have a look at the constructor. Since we are inheriting from\n  \u003Ccode>HTMLElement\u003C\u002Fcode>\n  the\n  \u003Ccode>super()\u003C\u002Fcode>\n  call is necessary to establish the correct prototype chain. Additionally, we define our custom-element\n  \u003Ccode>medium-highlighter\u003C\u002Fcode>\n  at the end of the file.\n\u003C\u002Fp>\n\u003Cp>\n  After the super call, we trigger our\n  \u003Ccode>render\u003C\u002Fcode>\n  function. You can see that we are attaching a shadow dom to our element. The shadow DOM is another main technology of\n  Web Components next to templates and custom elements. It enables us to encapsulate our style rules from other global\n  styles on any page. After the initialization, we add our template and default styling to our shadow DOM. Finally, we\n  add a click listener to our button to trigger the\n  \u003Ccode>highlightSelection\u003C\u002Fcode>\n  and\n  \u003Ccode>highlightRange\u003C\u002Fcode>\n  functions, that are responsible for creating our highlight template around the selected text of the user.\n\u003C\u002Fp>\n\u003Cp>\n  Next to just creating the highlighter, our custom element also needs to set the position of our marker dynamically.\n  For that, we defined our dynamic style function which should be updated whenever a user selects text. To make this\n  work we will define an attribute, that will be passed by our\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file as a JSON string. We can listen for attribute changes as soon as we return our attribute in the static\n  \u003Ccode>observedAttributes\u003C\u002Fcode>\n  function. Now we can listen for changes within the\n  \u003Ccode>attributeChangeCallback\u003C\u002Fcode>\n  to dynamically set the position and visibility of our text highlighter.\n\u003C\u002Fp>\n\u003Cp>\n  Our Web Component is ready to be used. Now we only need to create it with the help of the\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file.\n\u003C\u002Fp>\n\u003Ch3 id=\"creating-the-web-component\">Creating the Web Component\u003C\u002Fh3>\n\u003Cp>\n  We finished the setup of our Web Component so let’s quickly test it by adding this to our\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist111007526\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-content-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"content.js content, created by MariusBongarts on 09:13PM on July 30, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"content.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>mediumHighlighter\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createElement\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"medium-highlighter"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>body\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>appendChild\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>mediumHighlighter\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-en>setMarkerPosition\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>markerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-s1>mediumHighlighter\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>setAttribute\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-s>"markerPosition"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>JSON\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>stringify\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>markerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>setMarkerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>left\u003C\u002Fspan>: \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>top\u003C\u002Fspan>: \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>display\u003C\u002Fspan>: \u003Cspan class=pl-s>"flex"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F74ac8b5bc76cceb497573012ed1c8824\u002Fraw\u002F8cb6a952593e41f58b77e1ad6dcf2d21add4a941\u002Fcontent.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F74ac8b5bc76cceb497573012ed1c8824#file-content-js\" class=\"Link--inTextBlock\">\n          content.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  Since we added our\n  \u003Ccode>medium-highlighter.js\u003C\u002Fcode>\n  to the\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  we can use our custom element within our\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file. We create an element of it and pass the\n  \u003Ccode>markerPosition\u003C\u002Fcode>\n  attribute as a JSON string. We set the position and visibility to make the element appear in the upper left corner of\n  the screen.\n\u003C\u002Fp>\n\u003Ch4 id=\"adding-polyfills\">Adding polyfills\u003C\u002Fh4>\n\u003Cp>\n  We can now refresh the extension and navigate to any page. We assumed that our marker would appear. Unfortunately, it\n  doesn´t. You will find the reason in the console of your developer tools.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*tZr7bjV7j1KTmXjEQd9HsA.png\"\n    class=\"kg-image\"\n    alt=\"Uncaught TypeError\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Uncaught TypeError\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  Earlier I mentioned, that our content scripts are living in an\n  \u003Cem>isolated world\u003C\u002Fem>\n  . Until now this environment is not ready to use custom elements. Luckily there are\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@webcomponents\u002Fcustom-elements\" rel=\"noopener\">polyfills\u003C\u002Fa>\n  to fix this issue. We just need to include them in our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  :\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist111007709\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 09:33PM on July 30, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-ent\">"js"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>node_modules\u002F@webcomponents\u002Fcustom-elements\u002Fcustom-elements.min.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>medium-highlighter.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>content.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fd1227e4cdae5a0777e64d06f51a2d13e\u002Fraw\u002Fadedc0647c683eac8ab278bbec56c68e08d7948d\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fd1227e4cdae5a0777e64d06f51a2d13e#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  You can install them by running\n  \u003Ccode>npm install @webcomponents\u002Fcustom-elements\u003C\u002Fcode>\n  . In case you haven´t created a package environment yet run\n  \u003Ccode>npm init --yes\u003C\u002Fcode>\n  in advance.\n\u003C\u002Fp>\n\u003Cp>\n  After that, we should finally see our marker icon in the upper left corner of the screen after refreshing the\n  extension.\n\u003C\u002Fp>\n\u003Ch4 id=\"finally-set-the-position-of-the-marker\">Finally set the position of the marker\u003C\u002Fh4>\n\u003Cp>\n  Since we don´t want the marker to stick in the corner we will set its position dynamically depending on a user´s text\n  selection. Let’s add this code to our\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file and remove the initial\n  \u003Ccode>setMarkerPosition\u003C\u002Fcode>\n  function of our demo:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist111007781\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-content-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"content.js content, created by MariusBongarts on 09:40PM on July 30, 2021.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"content.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-en>getSelectedText\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>addEventListener\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"click"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>if\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-en>getSelectedText\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>length\u003C\u002Fspan> \u003Cspan class=pl-c1>>\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-en>setMarkerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-en>getMarkerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>addEventListener\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"selectionchange"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>if\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-en>getSelectedText\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>length\u003C\u002Fspan> \u003Cspan class=pl-c1>===\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-en>setMarkerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>display\u003C\u002Fspan>: \u003Cspan class=pl-s>"none"\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC15\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>function\u003C\u002Fspan> \u003Cspan class=pl-en>getMarkerPosition\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC17\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>rangeBounds\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC18\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getSelection\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC19\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getRangeAt\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC20\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getBoundingClientRect\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC21\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC22\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c>\u002F\u002F Substract width of marker button -> 40px \u002F 2 = 20\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC23\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>left\u003C\u002Fspan>: \u003Cspan class=pl-s1>rangeBounds\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>left\u003C\u002Fspan> \u003Cspan class=pl-c1>+\u003C\u002Fspan> \u003Cspan class=pl-s1>rangeBounds\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>width\u003C\u002Fspan> \u003Cspan class=pl-c1>\u002F\u003C\u002Fspan> \u003Cspan class=pl-c1>2\u003C\u002Fspan> \u003Cspan class=pl-c1>-\u003C\u002Fspan> \u003Cspan class=pl-c1>20\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC24\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>top\u003C\u002Fspan>: \u003Cspan class=pl-s1>rangeBounds\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>top\u003C\u002Fspan> \u003Cspan class=pl-c1>-\u003C\u002Fspan> \u003Cspan class=pl-c1>30\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC25\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>display\u003C\u002Fspan>: \u003Cspan class=pl-s>"flex"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC26\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC27\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F23334ca6fa64eb5603bae86c23ba767b\u002Fraw\u002F721d96fe943798673dafb360e951c081b8d620a1\u002Fcontent.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F23334ca6fa64eb5603bae86c23ba767b#file-content-js\" class=\"Link--inTextBlock\">\n          content.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  Whenever the user clicks and there is a current text selection we want to show the marker at this specific position.\n  To calculate the position we created the function\n  \u003Ccode>getMarkerPosition\u003C\u002Fcode>\n  . Next to creating the marker we also have to make sure that we will hide it again. For that, we create a\n  \u003Ccode>selectionChange\u003C\u002Fcode>\n  event to hide the marker when there is no text selected.\n\u003C\u002Fp>\n\u003Cp>Refresh the extension and enjoy your very own text highlighter :)\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cp>\n  You can find the Github repository\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Fmedium-highlighter\">here\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003C!--kg-card-end: html-->\n\u003C!--kg-card-begin: html-->\n\u003Cp>\n  Get in touch with me via\n  \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts-6b3638171\u002F\" rel=\"me\">LinkedIn\u003C\u002Fa>\n  or follow me on\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FMariusBongarts\" rel=\"me\">Twitter\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003C!--kg-card-end: html-->\n","Marius Bongarts","https:\u002F\u002Fwww.facebook.com\u002FMariusBongartsWeb","\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002FIMG_7861_Square.jpeg","https:\u002F\u002Fmarius-bongarts.de\u002F","Founder & Software Engineer","https:\u002F\u002Ftwitter.com\u002FMariusBongarts",2667,[45,80,96],{"id":46,"slug":47,"title":48,"description":49,"url":50,"publishedAt":51,"createdAt":52,"updatedAt":53,"featured":20,"readingTime":21,"tags":54,"imageUrl":58,"imageAlt":59,"faviconUrl":60,"publishedAtString":51,"category":61,"readTimeString":79},"688719cf8b4b770aa39407fc","my-simple-strategy-for-3-268-5-star-chrome-extension-reviews","My Simple Strategy for 3,268 5‑Star Chrome Extension Reviews","Get 37x more reviews than Grammarly with this simple strategy. Learn the Win-Ask Method to boost your Chrome extension ratings and user engagement.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fmy-simple-strategy-for-3-268-5-star-chrome-extension-reviews\u002F","2025-07-28T06:48:26.000+00:00","2025-07-28T06:33:51.000+00:00","2025-07-28T07:04:33.000+00:00",[55,56,57,24],"Marketing","Side Projects","Side Hustle","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633613286991-611fe299c4be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHJhdGluZ3xlbnwwfHx8fDE3NTM2ODQ0MzR8MA&ixlib=rb-4.1.0&q=80&w=2000","Five yellow star-shaped objects placed diagonally on a pink and blue background.","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[62,72],{"type":63,"title":64,"shortTitle":65,"icon":66,"description":67,"excerpt":68,"thumbnail":69},"my-journey","Behind the Scenes of Web Highlights","My Journey","rocket","Hey 👋 I am Marius. I started Web Highlights in 2019 as a tool just for myself and have been working on it alone since then. Learn from my mistakes and stories right from the beginning how I grew the Chrome Extension to 250K users without any marketing costs.","These posts are the honest build log of Web Highlights: what worked, what hurt, and what I’d do again. If you care about indie products, Chrome extensions, or SEO-led growth, you’ll find practical lessons alongside the personal story.",{"url":70,"alt":71},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":73,"title":74,"shortTitle":75,"icon":76,"description":77,"excerpt":78},"productivity","Browser Productivity & Chrome Extensions","Productivity","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","6 min read",{"id":81,"slug":82,"title":83,"description":84,"url":85,"publishedAt":86,"createdAt":87,"updatedAt":86,"featured":20,"readingTime":21,"tags":88,"imageUrl":90,"imageAlt":91,"faviconUrl":60,"publishedAtString":86,"category":92,"readTimeString":79},"671f386db98706751d677b5f","how-to-show-a-link-preview-on-any-website","How To Show A Beautiful Link Preview On Any Website","Easily add link previews to any website using the open-source Previewbox library. Works with any framework, fetching Open Graph data automatically.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-show-a-link-preview-on-any-website\u002F","2024-10-29T20:25:55.000+00:00","2024-10-28T07:08:29.000+00:00",[33,89],"SEO","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background",[93,95],{"type":63,"title":64,"shortTitle":65,"icon":66,"description":67,"excerpt":68,"thumbnail":94},{"url":70,"alt":71},{"type":73,"title":74,"shortTitle":75,"icon":76,"description":77,"excerpt":78},{"id":97,"slug":98,"title":99,"description":100,"url":101,"publishedAt":102,"createdAt":103,"updatedAt":104,"featured":20,"readingTime":105,"tags":106,"imageUrl":108,"imageAlt":109,"faviconUrl":60,"publishedAtString":102,"category":110,"readTimeString":113},"66ed6878e07b961e2f231a8f","lessons-from-a-bamboo-tree-staying-motivated-on-my-side-project","Five Years to 100K Users: The Bamboo Tree Story for Side Project Growth","Discover how a bamboo tree can inspire solopreneurs to stay motivated on side projects. Learn the value of delayed gratification on the journey to success.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Flessons-from-a-bamboo-tree-staying-motivated-on-my-side-project\u002F","2024-09-22T20:17:54.000+00:00","2024-09-20T12:20:08.000+00:00","2024-09-24T07:00:43.000+00:00",7,[65,107,56,57],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[111],{"type":63,"title":64,"shortTitle":65,"icon":66,"description":67,"excerpt":68,"thumbnail":112},{"url":70,"alt":71},"7 min read"]