2a:null 2b:["$","title",null,{"children":"RiScript with highlight.js | Daniel Howe | Observable"}] 30:T514,installRs = function () { if (hljs.listLanguages().includes('riscript')) return; hljs.registerLanguage("riscript", (() => { "use strict"; return s => { let e = { className: "rs-transform", begin: /\.\w+[$]?[$]?/ }, a = { className: "rs-symbol", begin: /\$\w+/, relevance: 10 }, i = { className: "rs-dynamic", begin: /#\w+/, relevance: 10 }, n = { className: "rs-assign", begin: /[#$]\w+\s*\=/ }, r = { className: "rs-entity", begin: /&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/ }, c = { className: "rs-conditional", begin: /\{(\$[\w]+([\!\*\^\$<>]\=|[\=<>])(\w+|[0-9]?\.[0-9]+)\,)?(\$\w+([\!\*\^\$<>]\=|[\=<>])(\w+|[0-9]?\.[0-9]+))\}\?/, relevance: 10 }; return { name: "RiScript", aliases: ["risc", "riscript"], case_insensistive: !1, disableAutodetect: !0, keywords: "", contains: [n, e, i, a, r, c, { className: "rs-choice", begin: /\[/, end: /\]/, contains: [{ className: "rs-weight", begin: /$[0-9]+$/ }, n, e, i, a, r, c, "self"] }, { className: "rs-continuation", begin: /\w+\s*\\$/ }, s.C_BLOCK_COMMENT_MODE, s.C_LINE_COMMENT_MODE] } } })()); }31:T872,lightMode = ` :root { --selection_darkmode: rgba(47, 142, 252, 0.35); --background_darkmode: #1e1e1e; --text_darkmode: #cbcbcb; --choice_darkmode: #d2aefc; --transform_darkmode: #cdab53; --static_darkmode: #88a3fa; --symbol_darkmode: #9bdbff; --assign_darkmode: #9a88ff; --continuation_darkmode: #f8ff93; --weight_darkmode: #508be5; --entity_darkmode: #ff46ff; --conditional_darkmode: #f8a0a0; --comment_darkmode: #609664; --selection_lightmode: rgba(47, 142, 252, 0.35); --background_lightmode: #ffffff; --text_lightmode: #363636; --choice_lightmode: #b66661; --transform_lightmode: #867959; --static_lightmode: #508be5; --symbol_lightmode: #3d42b4; --assign_lightmode: #3d42b4; --continuation_lightmode: #77cc50; --weight_lightmode: #b7ffa8; --entity_lightmode: #d651d6; --conditional_lightmode: #ad92cc; --comment_lightmode: #a7a7a7; } /*----------------css for highlight.js-------------*/ /* theme tmpl from https://codepen.io/Tibixx/pen/NLpNar*/ /* light theme */ pre code { display: block; overflow-x: auto; padding: 10px; background: var(--background); -webkit-text-size-adjust: none; } pre code *::selection, .riscript.hljs::selection { background: var(--selection_lightmode) !important; } .riscript.hljs { color: var(--text_lightmode); background-color: var(--background_lightmode); } .hljs-rs-choice { color: var(--choice_lightmode); } .hljs-rs-transform { color: var(--transform_lightmode) !important; } .hljs-rs-dynamic { color: var(--dynamic_lightmode) !important; } .hljs-rs-symbol { color: var(--symbol_lightmode) !important; } .hljs-comment { color: var(--comment_lightmode); } .hljs-rs-assign { color: var(--assign_lightmode); } .hljs-rs-continuation { color: var(--continuation_lightmode); } .hljs-rs-weight { color: var(--weight_lightmode); } .hljs-rs-entity { color: var(--entity_lightmode); } .hljs-rs-conditional { color: var(--conditional_lightmode); } `32:T7b8,darkMode = ` :root { --selection_darkmode: rgba(47, 142, 252, 0.35); --background_darkmode: #1e1e1e; --text_darkmode: #cbcbcb; --choice_darkmode: #d2aefc; --transform_darkmode: #cdab53; --static_darkmode: #88a3fa; --symbol_darkmode: #9bdbff; --assign_darkmode: #9a88ff; --continuation_darkmode: #f8ff93; --weight_darkmode: #508be5; --entity_darkmode: #ff46ff; --conditional_darkmode: #f8a0a0; --comment_darkmode: #609664; --selection_lightmode: rgba(47, 142, 252, 0.35); --background_lightmode: #ffffff; --text_lightmode: #363636; --choice_lightmode: #b66661; --transform_lightmode: #867959; --static_lightmode: #508be5; --symbol_lightmode: #3d42b4; --assign_lightmode: #3d42b4; --continuation_lightmode: #77cc50; --weight_lightmode: #b7ffa8; --entity_lightmode: #d651d6; --conditional_lightmode: #ad92cc; --comment_lightmode: #a7a7a7; } /*----------------css for highlight.js-------------*/ /* theme tmpl from https://codepen.io/Tibixx/pen/NLpNar*/ /* default theme(dark) */ pre code { display: block; overflow-x: auto; padding: 10px; background: var(--background); -webkit-text-size-adjust: none; } pre code *::selection, .riscript.hljs::selection { background: var(--selection_darkmode) !important; } .riscript.hljs { color: var(--text_darkmode); background-color: var(--background_darkmode); } .hljs-rs-choice { color: var(--choice_darkmode); } .hljs-rs-transform { color: var(--transform_darkmode) !important; } .hljs-rs-dynamic { color: var(--dynamic_darkmode) !important; } .hljs-rs-symbol { color: var(--symbol_darkmode) !important; } .hljs-comment { color: var(--comment_darkmode); } .hljs-rs-assign { color: var(--assign_darkmode); } .hljs-rs-continuation { color: var(--continuation_darkmode); } .hljs-rs-weight { color: var(--weight_darkmode); } .hljs-rs-entity { color: var(--entity_darkmode); } .hljs-rs-conditional { color: var(--conditional_darkmode); } `33:[{"id":"0ea5e2749f84889f3b03a1c922798d9d08025eeab4c55c5a6f5d5d011460ceca9afb5d9cf66eba73b72a8440e21d9d26da7dd7b1bb4739e1a1b33c1120f3edf5","href":"https://static.observableusercontent.com/files/0ea5e2749f84889f3b03a1c922798d9d08025eeab4c55c5a6f5d5d011460ceca9afb5d9cf66eba73b72a8440e21d9d26da7dd7b1bb4739e1a1b33c1120f3edf5","name":"riscript@2.css","type":"text/css","lastModified":1617789631650.79,"size":5230},{"id":"f6e670027f9be430c18b7fecdc4eaf41d5c464d05fed2c971beb73813decbb145a965ae4912c227f0f257e39825f86300d6e1665dfb0649a98e228d75ac4f6a8","href":"https://static.observableusercontent.com/files/f6e670027f9be430c18b7fecdc4eaf41d5c464d05fed2c971beb73813decbb145a965ae4912c227f0f257e39825f86300d6e1665dfb0649a98e228d75ac4f6a8","name":"riscript-lightMode@3.css","type":"text/css","lastModified":1617789631650.79,"size":5599}] 2e:{"id":"86ddccd64d8cb1ee","slug":"rshl","title":"RiScript with highlight.js","thumbnail":"775d1c990c83500534342949c5c547f8a7690c053c6a5b03f2f08c26ea013a8b","access_level":"public","create_time":"$D2021-04-07T10:00:31.650Z","update_time":"$D2023-12-02T07:04:05.760Z","view_time":null,"first_public_time":"$D2021-04-07T10:06:28.145Z","fork":{"id":"70f66530424d75ba","slug":"riscript-hljs-module","title":"RiScript Highlight.js Module","owner":{"id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C"}},"stars":2,"starred":false,"owner":{"type":"team","id":"636cf123a07db681","login":"dhowe","name":"Daniel Howe","avatar_url":"https://avatars-next.observableusercontent.com/a5081aaa56ae9990aa27642040dc61de3ce8cea67f6f778a5b864e41111ba7a3","tier":"starter_2024"},"version":345,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32869872eb6f2f82","login":"dhowe","name":"Daniel Howe","avatar_url":"https://avatars-next.observableusercontent.com/a5081aaa56ae9990aa27642040dc61de3ce8cea67f6f778a5b864e41111ba7a3","tier":null}],"members":[{"type":"individual","id":"32869872eb6f2f82","login":"dhowe","name":"Daniel Howe","avatar_url":"https://avatars-next.observableusercontent.com/a5081aaa56ae9990aa27642040dc61de3ce8cea67f6f778a5b864e41111ba7a3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"RiScript with highlight.js","cells":[{"id":0,"value":"md`\n# RiScript with highlight.js\nThis notebook allows for highlighting of RiScript in observable via [highlight.js](https://highlightjs.org/)\n
\n### Usage:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`\nYou can import the highlight function from this notebook\n~~~js\nimport {highlightRs} from '@dhowe/rshl'\n~~~\nThen, you can call \nhighlightRiScript(targetCellName, [mode?]) \nto highlight the target cell, as shown below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"code = html`\n

 \n  this [is|was] example.articlize().\n

 \n  $anotherExample = [this|that]\n  This is a $anotherExample\n\n  #aStaticExample = [these|those]\n  This is a $StaticExample\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"highlightRs(code,\"dark\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`You can also call highlightRs() \nwithout an argument, which will highlight all <code> elements on the page. You should be careful when using it this way as it can create unwanted effects

\nThe second parameter, mode, is optional: you can set it to \"dark\" to use a dark mode theme, or leave it empty to use the default light mode. Note that because of how hljs works, this function basically inject a css file into your page, so it is not possible to use different themes for different cells on the same page.

\nFor cases where you have code blocks in RiScript _and_ other languages (e.g JavaScript) in the same cell and you want them to be highlighted accordingly, you can pass a boolean false value as a third argument as follows: highlightRs(targetCellName, \"dark\", false).

\nThen indicate the block's language with a CSS class in the <code> tag, as shown below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"mixedCode = html`\n

an [example | sample] of a mixed language cell

console.log(\"this is a plain js cell\")

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"highlightRs(mixedCode,\"dark\",false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\n------------\n### Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"hljs = require(\"https://bundle.run/highlight.js@10.5.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"highlightRs = function (target=document, mode=\"light\", allRs=true) {\n installRs();\n let style = document.createElement(\"style\");\n style.type = \"text/css\";\n style.appendChild(document.createTextNode(mode === \"dark\" ? darkMode : lightMode));\n document.getElementsByTagName(\"head\")[0].appendChild(style);\n if (!Array.isArray(target)) target = [target];\n for (let j = 0; j < target.length; j++) {\n let count = 0, blocks = target[j].getElementsByTagName(\"code\");\n for (let i = 0; i < blocks.length; i++) {\n if (!blocks[i].className.includes(\"riscript\") \n || !blocks[i].className.includes(\"risc\") \n || !blocks[i].className.includes(\"RiScript\")) {\n if (allRs) blocks[i].className = blocks[i].className + \" riscript\";\n }\n hljs.highlightBlock(blocks[i]);\n count ++;\n }\n }\n return '';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"lightModeUrl = FileAttachment('riscript-lightMode@3.css').url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"darkModeUrl = FileAttachment('riscript@2.css').url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"