29:null 2a:["$","title",null,{"children":"Highlighter styles with web components | Mike Stringer | Observable"}] 2f:T768,function makeCustomHighlighterTag( tagName = "x-mark", defaultColor = "rgb(255,255,0)" ) { class HighlighterStyleElement extends HTMLElement { connectedCallback() { this.attachShadow({ mode: "open" }); let hPadding = 0.25; let vPadding = 0.15; let hOffset = (2 * Math.random() - 1) * hPadding; let vOffset = (2 * Math.random() - 1) * vPadding; let minAngle = Math.max(90 - this.textContent.length / 1.5, 20); let maxAngle = Math.min(minAngle + 20, 90); let angle = minAngle + (maxAngle - minAngle) * Math.random(); let top = vPadding + vOffset; let bottom = vPadding - vOffset; let left = hPadding - hOffset; let right = hPadding + hOffset; this.shadowRoot.innerHTML = ` ${this.textContent} `; } } customElements.get(tagName) || customElements.define(tagName, HighlighterStyleElement); return html`<${tagName}> is defined for highlighter-type styles. Use ${tagName} {--color: ...} to style.`; }30:T475,function makeStyle(text) { let hPadding = 0.25; let vPadding = 0.15; let hOffset = (2 * Math.random() - 1) * hPadding; let vOffset = (2 * Math.random() - 1) * vPadding; let minAngle = Math.max(90 - text.length / 1.5, 20); let maxAngle = Math.min(minAngle + 20, 90); let angle = minAngle + (maxAngle - minAngle) * Math.random(); let top = vPadding + vOffset; let bottom = vPadding - vOffset; let left = hPadding - hOffset; let right = hPadding + hOffset; let raw = `margin: ${-top}em ${-right}em ${-bottom}em ${-left}em; padding: ${top}em ${right}em ${bottom}em ${left}em; border-radius: 0.5em 0.3em; background: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-image: linear-gradient( ${angle}deg, color-mix(in srgb, var(--color), transparent 50%), color-mix(in srgb, var(--color), transparent 90%) 4%, color-mix(in srgb, var(--color), transparent 70%) 96%, color-mix(in srgb, var(--color), transparent 30%) );`; return raw.split(/\s+/).join(" "); }31:[] 2d:{"id":"6e849cb557c379c1","slug":"highlighter-styles","title":"Highlighter styles with web components","thumbnail":"c98b2a4030ccbf254270042e1d8af746e8b70a0b380d5f065c1ef4844d1144b2","access_level":"public","create_time":"$D2023-12-04T18:34:11.035Z","update_time":"$D2026-03-09T13:51:58.216Z","view_time":null,"first_public_time":"$D2023-12-04T19:50:52.683Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":"starter_2024"},"version":205,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null}],"members":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Highlighter styles with web components","cells":[{"id":19,"value":"# Highlighter styles with web components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"What's up doc? This is a test boodle boodle doodle this is a longer one and then some more text. Boodle boodle doodle this is an even longer one and then some more text. Boodle boodle longer one and then some more text. Boodle boodle doodle this is a much longer one this is a much longer one this is a much longer one this is a much longer one this is a much longer one and then some more text. Then some more text. Then some more text. Then some more text. Then some more text. Then some more text. Then some more text. Boodle doodle doodle.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"Use by importing:\n\n~~~js\nimport {makeCustomHighlighterTag} from \"@stringertheory/highlighter-styles\"\n~~~\n\nThen define a custom tag with `makeCustomHighlighterTag(\"tag-name\")`. The tag name has to have a dash.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"makeCustomHighlighterTag(\"x-mark\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"I think I might like having a custom tag (like this) rather than a function ${marked(\"like this\", \"pink\")} but it's pretty similar. The component has the downside that I don't think there's any way to \"de-register\" the name, so once it's defined it takes a hard refresh to change it.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"function marked(text, cls = \"\", defaultColor = \"rgb(255,255,0)\") {\n return html`${text}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"