_shiki_js.tmpl.html

<script type="module">

// be sure to specify the exact version
import { codeToHtml } from 'https://esm.sh/shiki@1.0.0'
// or
// import { codeToHtml } from 'https://esm.run/shiki@1.0.0'

const htmlEscapes = new Map([
    ['&amp;', '&'],
    ['&lt;', '<'],
    ['&gt;', '>'],
]);

function unescapeHTMLEntities(str) {
    for (const [escaped, unescaped] of htmlEscapes) {
        str = str.replaceAll(escaped, unescaped)
    }
    return str
}

await Promise.all(Array.from(document.querySelectorAll('pre code')).map((codeBlock) => {
    const classNames = codeBlock.getAttribute("class");
    if (classNames == null) {
        return
    }

    let language = null;
    for (const className of classNames.split(" ")) {
        const [languageToken, ...rest] = className.split("-")
        if (languageToken == "language") {
            // Some languages may contain their own hyphens like `git-commit`,
            // so make sure we handle that case by joining them back together
            // before sending out to Shiki.
            language = rest.join("-")
            break
        }
    }

    if (language == null) {
        return
    }

    return (async () => {
        const code = unescapeHTMLEntities(codeBlock.innerHTML)

        // Shiki will add its own `<pre><code>`, so go to parent `<pre>` and
        // replace the entirety of its HTML.
        codeBlock.parentElement.outerHTML = 
            await codeToHtml(code, {
                lang: language,
                themes: {
                    dark: 'nord',
                    light: 'rose-pine'
                }
            })
    })()
}))

</script>