2c:null 2d:["$","title",null,{"children":"Fun code highlighting | Kelley van Evert | Observable"}] 32:T5f2,{ const Y = code.split("\n").length; const H = 28; const W = charWidth; const hpad = 3; const vpad = 0; const el = this && this.Y === Y ? this : html`

Fun

${Array.from({ length: Y }) .map( () => `

` ) .join("")}

`; el.Y = Y; el.querySelector("pre").innerHTML = highlight( code, step.info ? step.info.loc : undefined ); const markers = el.querySelectorAll(".marker"); if (step.info) { const ranges = loc_to_ranges(step.info.loc); markers.forEach((marker, i) => { const range = ranges[Math.min(i, ranges.length - 1)]; marker.style.background = step.type === "statement" ? "#fbf1a0" : "#4dd4aa"; marker.style.top = `${(range.line - 1) * H - vpad}px`; marker.style.height = `${H + 2 * vpad}px`; marker.style.left = `${range.a * W - hpad}px`; marker.style.width = `${(range.b - range.a) * W + 2 * hpad}px`; }); } else { markers.forEach(marker => { marker.style.width = marker.style.height = 0; }); } return el; }33:[] 30:{"id":"c576092b1d33cfd4","slug":"fun-code-highlighting","title":"Fun code highlighting","thumbnail":"c9091f826557ec8545b07eb3233db1c37898bcebafcd33e18977508059825e66","access_level":"public","create_time":"$D2020-01-12T23:34:05.994Z","update_time":"$D2020-01-13T17:08:22.517Z","view_time":null,"first_public_time":"$D2020-01-13T00:12:40.978Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":479,"publish_version":479,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fun code highlighting","cells":[{"id":0,"value":"md`# Fun code highlighting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof stepno = slider({\n title: \"Execution step\",\n value: 0,\n min: 0,\n max: steps.length - 1,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"charWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof charWidth = {\n const X = 50;\n\n const el = html`${Array(X + 1).join(\"X\")}`;\n\n setTimeout(() => {\n el.value = el.clientWidth / X;\n el.dispatchEvent(new CustomEvent(\"input\"));\n }, 20);\n\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"function loc_to_ranges(loc) {\n const { start, end } = loc;\n const codelines = code.split(\"\\n\");\n return start.line === end.line\n ? [{ line: start.line, a: start.column, b: end.column }]\n : [\n {\n line: start.line,\n a: start.column,\n b: codelines[start.line - 1].length\n },\n ...Array.from({ length: end.line - start.line - 1 })\n .map((_, i) => i + start.line + 1)\n .map(line => ({ line, a: 0, b: codelines[line - 1].length })),\n { line: end.line, a: 0, b: end.column }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"step = steps[stepno]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"function highlight(code, loc) {\n if (!loc) {\n return code;\n }\n\n const lines = code.split(\"\\n\");\n\n const before = [\n ...lines.slice(0, loc.start.line - 1),\n lines[loc.start.line - 1].slice(0, loc.start.column)\n ].join(\"\\n\");\n\n const highlighted =\n loc.start.line === loc.end.line\n ? lines[loc.start.line - 1].slice(loc.start.column, loc.end.column)\n : [\n lines[loc.start.line - 1].slice(loc.start.column),\n ...lines.slice(loc.start.line, loc.end.line - 1),\n lines[loc.end.line - 1].slice(0, loc.end.column)\n ].join(\"\\n\");\n\n const after = [\n lines[loc.end.line - 1].slice(loc.end.column),\n ...lines.slice(loc.end.line)\n ].join(\"\\n\");\n\n return `${before}${highlighted}${after}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"code = `const a = 16;\nconst b = 2 + 4;\nconst arr = [a, a + b, b].filter(n => {\n return n > 6;\n});\narr`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { steps } with { code } from \"@kelleyvanevert/visualizing-js-execution-2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"