2b:null 2c:["$","title",null,{"children":"experiment: two-layer editor with rayso, shiki, and highlight | Benjamin | Observable"}] 31:T62d,{ const codeStyle = tw` p-4 py-1 w-full h-[100%] outline-none overflow-hidden bg-[#282b2e] text-[#a9b7c6] font-mono font-[600] text-[15px] leading-[20.5px] tracking-[0.1px] ` const codeRules = () => { const syntaxTheme = codeTheme.syntax.dark const rules = Object.entries(syntaxTheme).map(([syntaxName, syntaxValue]) => { const ruleName = syntaxName.slice("--syntax-".length) if (ruleName === "text") return `--shiki-color-text: ${syntaxValue};` if (ruleName === "background") return `--shiki-color-background: ${syntaxValue};` return `--shiki-token-${ruleName}: ${syntaxValue};` }) return rules.join("\n") } const __codeThemeStyle = Twind.css`${codeRules()}` const codeThemeStyle = Twind.css`${shikiRules}` const _codeThemeStyle = Twind.css` --shiki-color-text: #EEEEEE; --shiki-color-background: #333333; --shiki-token-constant: #660000; --shiki-token-string: #770000; --shiki-token-comment: #880000; --shiki-token-keyword: #990000; --shiki-token-parameter: #AA0000; --shiki-token-function: #BB0000; --shiki-token-string-expression: #CC0000; --shiki-token-punctuation: #DD0000; --shiki-token-link: #EE0000; ` const highlighter = await shiki.getHighlighter({ theme: "css-variables", langs: ["javascript"] }) const codeHtml = highlighter.codeToHtml(codeText(), { lang: "javascript" }) return html`

${codeHtml}

` }32:T554,Editor = (options) => { const text = options.text const language = options.language const containerStyle = tw` relative overflow-hidden ` const viewerStyle = tw` bg-[#282b2e] text-[#a9b7c6] _bg-transparent ` const editorStyle = tw` absolute top-0 bg-transparent text-transparent caret-white ` const codeStyle = tw` p-4 w-full h-full outline-none overflow-hidden whitespace-pre font-mono font-[600] text-[15px] leading-[20.5px] tracking-[0.1px] ` const Viewer = (children = null, props = {}) => Object.assign(html`

${children}

`, props) const Editor = (children = null, props = {}) => Object.assign(html`

${children}

`, props) const onEditorChange = (text, viewer) => { const code = options.code(text, language) viewer.innerHTML = code + `` } const viewer = Viewer("") const editor = Editor(text, { oninput(event) { event.stopPropagation() event.preventDefault() const text = event.target.value || event.target.textContent onEditorChange(text, viewer) }, }) options.theme() onEditorChange(text, viewer) return html`

${viewer} ${editor}

` }33:T20e8,L = ({ breeze: { name: "Breeze", background: { from: "rgba(207,47,152,1)", to: "rgba(106,61,236,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#434447", variable: "#F8518D", variable2: "#BF3F6D", variable3: "#238600", attribute: "#C44170", definition: "#C44170", keyword: "#496EB8", operator: "#496EB8", property: "#0B7880", number: "#24805E", string: "#886594", comment: "#8C828B", meta: "#625B6B", tag: "#4B71BD", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FFFFFF", variable: "#F8518D", variable2: "#FFFFFF", variable3: "#9AEC7D", attribute: "#F8518D", definition: "#F8518D", keyword: "#6599FF", operator: "#6599FF", property: "#49E8F2", number: "#55E7B2", string: "#E9AEFE", comment: "#8A757D", meta: "#ECFEEF", tag: "#6599FF", }), }, }, candy: { name: "Candy", background: { from: "rgba(165,142,251,1)", to: "rgba(233,191,248,1)", }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#434447", variable: "#009033", variable2: "#63676A", variable3: "#D35A35", attribute: "#009033", definition: "#009033", keyword: "#DC155E", operator: "#d15a8b", property: "#2286A6", number: "#676DFF", string: "#B2762E", comment: "#8D949B", meta: "#6A6367", tag: "#d15a8b", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FFFFFF", variable: "#73DFA5", variable2: "#FFFFFF", variable3: "#E08569", attribute: "#73DFA5", definition: "#73DFA5", keyword: "#FF659C", operator: "#FF659C", property: "#1AC8FF", number: "#7A7FFD", string: "#DFD473", comment: "#807796", meta: "#F1ECFE", tag: "#FF659C", }), }, }, crimson: { name: "Crimson", background: { from: "rgba(255,99,99,1)", to: "rgba(115,52,52,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#685B5B", variable: "#9E7070", variable2: "#B22D2D", variable3: "#D46184", attribute: "#9E7070", definition: "#9E7070", keyword: "#BE3B3B", operator: "#BE3B3B", property: "#D15510", number: "#C94F0A", string: "#836250", comment: "#978A8A", meta: "#8B5F5C", tag: "#BE3B3B", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FEFDFD", variable: "#C88E8E", variable2: "#FFE4E4", variable3: "#E97598", attribute: "#C88E8E", definition: "#C88E8E", keyword: "#EB6F6F", operator: "#EB6F6F", property: "#D15510", number: "#FDA97A", string: "#EBB99D", comment: "#895E60", meta: "#FFE4E4", tag: "#EB6F6F", }), }, }, falcon: { name: "Falcon", background: { from: "rgba(189,227,236,1)", to: "rgba(54,54,84,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#464C65", variable: "#6A7C9F", variable2: "#354BA7", variable3: "#46615D", attribute: "#6A7C9F", definition: "#6A7C9F", keyword: "#5C827D", operator: "#5C827D", property: "#839AA7", number: "#AE6A65", string: "#506483", comment: "#9DA4AD", meta: "#425295", tag: "#5C827D", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FFFFFF", variable: "#6D88BB", variable2: "#E4F2FF", variable3: "#789083", attribute: "#6D88BB", definition: "#6D88BB", keyword: "#9AB6B2", operator: "#9AB6B2", property: "#799DB1", number: "#BD9C9C", string: "#6A8697", comment: "#6D7E88", meta: "#E4F2FF", tag: "#9AB6B2", }), }, }, meadow: { name: "Meadow", background: { from: "rgba(89,212,153,1)", to: "rgba(160,135,45,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#54594D", variable: "#798B52", variable2: "#6E967E", variable3: "#99A607", attribute: "#798B52", definition: "#798B52", keyword: "#049649", operator: "#049649", property: "#B6781B", number: "#2C8801", string: "#837E50", comment: "#72806E", meta: "#5C8B6F", tag: "#049649", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FFFFFF", variable: "#B3D767", variable2: "#E5FFE4", variable3: "#2EFFB4", attribute: "#B3D767", definition: "#B3D767", keyword: "#6DD79F", operator: "#6DD79F", property: "#E4B165", number: "#46B114", string: "#E9EB9D", comment: "#708B6C", meta: "#E5FFE4", tag: "#6DD79F", }), }, }, midnight: { name: "Midnight", background: { from: "rgba(76,200,200,1)", to: "rgba(32,32,51,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#434447", variable: "#2F788F", variable2: "#63676A", variable3: "#5D70B5", attribute: "#2F788F", definition: "#2F788F", keyword: "#587678", operator: "#587678", property: "#766599", number: "#2D8264", string: "#5F758F", comment: "#78808C", meta: "#5B636B", tag: "#5A797A", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FFFFFF", variable: "#51D0F8", variable2: "#FFFFFF", variable3: "#626B8B", attribute: "#51D0F8", definition: "#51D0F8", keyword: "#7DA9AB", operator: "#7DA9AB", property: "#9681C2", number: "#75D2B1", string: "#6D86A4", comment: "#4A4C56", meta: "#F2F7F7", tag: "#7DA9AB", }), }, }, raindrop: { name: "Raindrop", background: { from: "rgba(142,199,251,1)", to: "rgba(28,85,170,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#687077", variable: "#4F9488", variable2: "#687077", variable3: "#2E81FF", attribute: "#4F9488", definition: "#4F9488", keyword: "#008DAC", operator: "#008DAC", property: "#007BA1", number: "#7459E1", string: "#507683", comment: "#6E7780", meta: "#5C838B", tag: "#008DAC", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#E4F2FF", variable: "#1AD6B5", variable2: "#E4F2FF", variable3: "#2E81FF", attribute: "#1AD6B5", definition: "#1AD6B5", keyword: "#2ED9FF", operator: "#2ED9FF", property: "#008BB7", number: "#9984EE", string: "#9DD8EB", comment: "#6C808B", meta: "#ECFBFE", tag: "#2ED9FF", }), }, }, sunset: { name: "Sunset", background: { from: "rgba(255,207,115,1)", to: "rgba(255,122,47,1)" }, syntax: { light: O({ background: "rgba 0,0,100,0.75", text: "#737568", variable: "#807410", variable2: "#717365", variable3: "#8C6A29", attribute: "#807410", definition: "#807410", keyword: "#A1642C", operator: "#A1642C", property: "#AD5A78", number: "#856F00", string: "#8C703C", comment: "#7A7055", meta: "#6B625B", tag: "#A1642C", }), dark: O({ background: "rgba 0,0,0,0.75", text: "#FFFFFF", variable: "#E2D66B", variable2: "#FFFFFF", variable3: "#E7B555", attribute: "#E2D66B", definition: "#E2D66B", keyword: "#FFAF65", operator: "#FFAF65", property: "#E978A1", number: "#E7CF55", string: "#F9D38C", comment: "#878572", meta: "#FFFDED", tag: "#FFAF65", }), }, }, })34:[] 2f:{"id":"9fe4701f499ca560","slug":null,"title":"experiment: two-layer editor with rayso, shiki, and highlight","thumbnail":"5e7ab7a91563b373c31bea130dcdce280a82bd52f36aece0010de2043358fc60","access_level":"public","create_time":"$D2022-03-13T13:31:12.219Z","update_time":"$D2022-04-06T10:14:28.459Z","view_time":null,"first_public_time":"$D2023-05-12T10:42:14.100Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":911,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"experiment: two-layer editor with rayso, shiki, and highlight","cells":[{"id":0,"value":"# experiment: two-layer editor with rayso, shiki, and highlight\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":797,"value":"md`shiki-based viewer:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"shikiRules = `\n --shiki-color-text: #a9b7c6;\n --shiki-color-background: #282b2e;\n --shiki-token-constant: #6897bb;\n --shiki-token-string: #770000;\n --shiki-token-comment: #808080;\n --shiki-token-keyword: #cc7832;\n --shiki-token-parameter: #a9b7c6;\n --shiki-token-function: #ffc66d;\n --shiki-token-string-expression: #6a8759;\n --shiki-token-punctuation: #a9b7c6;\n --shiki-token-link: #a9b7c6;\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"viewof checkboxes = Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"checkboxes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"md`highlight-based editor:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"Editor({\n text: codeText(), \n language: codeLanguage,\n code(text, language) {\n return highlight.highlight(text, { language }).value\n },\n theme() {\n const style = `\n ${highlightThemeCss}\n .hljs-variable { color: inherit; }\n :root { --syntax-keyword: inherit; }\n `\n appendStyle(style)\n },\n themeAlt() {\n const syntaxTheme = codeTheme.syntax.dark\n const codeTheme = Object.entries(syntaxTheme)\n .map(([syntaxName, syntaxValue]) => {\n const ruleName = syntaxName.slice(\"--syntax-\".length)\n return `--syntax-${ruleName}: ${syntaxValue};`\n })\n .join(\"\\n\")\n return Twind.css`codeTheme`\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"appendStyle = styleContent => {\n const styleElement = document.createElement(\"style\")\n styleElement.type = \"text/css\"\n styleElement.appendChild(document.createTextNode(styleContent))\n \n const headElement = document.getElementsByTagName(\"head\")[0]\n headElement.appendChild(styleElement)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"codeText = () => `function $initHighlight(block, cls) {\n try {\n if (cls.search(/\\\\bno\\-highlight\\\\b/) != -1)\n return process(block, true, 0x0F) +\n \\` class=\"\\${cls}\"\\`;\n } catch (e) {\n /* handle exception */\n }\n for (var i = 0 / 2; i < classes.length; i++) {\n if (checkCondition(classes[i]) === undefined)\n console.log('undefined');\n }\n\n return (\n

\n {block}\n

\n )\n}\n\nexport $initHighlight;`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"_codeText = () => `module.exports = leftpad;\n\nfunction leftpad(str, len, ch) {\n str = String(str);\n var i = -1;\n\n if (!ch && ch !== 0) ch = ' ';\n\n len = len - str.length;\n\n while (i++ < len) {\n str = ch + str;\n }\n return str;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"codeLanguage = \"js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"codeTheme = L[\"sunset\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"import { Twind, tw } from \"@hastebrot/hello-twind-v1-beta\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"md`\n---\n- highlightjs repository: https://github.com/highlightjs/highlight.js\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"highlightVersion = \"11.5.0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"highlightTheme = \"androidstudio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"highlight = import(`https://cdn.skypack.dev/highlight.js@${highlightVersion}?min`).then(module => module.default)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"highlightThemeCss = fetch(`https://cdn.skypack.dev/highlight.js/styles/${highlightTheme}.css`).then(res => res.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`\n---\n- shikijs repository: https://github.com/shikijs/shiki\n- vscode oniguruma bindings: https://github.com/microsoft/vscode-oniguruma\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"shikiVersion = \"0.10.1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"shiki = import(`https://cdn.skypack.dev/shiki@${shikiVersion}`).then(async module => {\n //module.setCDN(`https://cdn.skypack.dev/shiki@${shikiVersion}/`)\n module.setCDN(`https://unpkg.com/shiki@${shikiVersion}/`)\n module.setWasm(await fetch(`https://unpkg.com/shiki@${shikiVersion}/dist/onig.wasm`).then(res => res.arrayBuffer()))\n return {\n ...module,\n //BUNDLED_LANGUAGES: [],\n //BUNDLED_THEMES: [],\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"md`\n---\n- rayso website: https://ray.so/\n- unofficial rayso api: https://github.com/s0ftik3/rayso-api\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function O(e) {\n if (e)\n return {\n \"--syntax-text\": e.text,\n \"--syntax-background\": e.background,\n \"--syntax-string\": e.string,\n \"--syntax-comment\": e.comment,\n \"--syntax-variable\": e.variable,\n \"--syntax-variable-2\": e.variable2 || e.variable,\n \"--syntax-variable-3\": e.variable3 || e.variable,\n \"--syntax-number\": e.number,\n \"--syntax-atom\": e.number,\n \"--syntax-keyword\": e.keyword,\n \"--syntax-property\": e.property,\n \"--syntax-definition\": e.definition,\n \"--syntax-meta\": e.meta,\n \"--syntax-operator\": e.operator,\n \"--syntax-attribute\": e.attribute,\n \"--syntax-tag\": e.tag,\n \"--syntax-builtin\": e.builtin,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"