diff --git a/docs/docs/index.html b/docs/docs/index.html index b90f132..86908c2 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -28,6 +28,7 @@ ArrowJS • Docs +
@@ -91,8 +92,6 @@ events() highlight(); - - diff --git a/docs/index.html b/docs/index.html index 4f35613..5a5271a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -29,6 +29,7 @@ ArrowJS - Reactive interfaces with no build tools & native JavaScript. +
@@ -85,8 +86,6 @@ highlight() - - diff --git a/docs/js/highlight.js b/docs/js/highlight.js index 1634070..3212c66 100644 --- a/docs/js/highlight.js +++ b/docs/js/highlight.js @@ -1,3 +1,5 @@ +import { codeToHtml } from 'https://esm.sh/shiki@1.1.6' + export default async function () { const langs = { javascript: 'js', @@ -5,17 +7,22 @@ export default async function () { html: 'html', } - const highlighter = await shiki.getHighlighter({ - theme: 'css-variables', - langs: ['js', 'html', 'shell'], - }) const codeBlocks = document.querySelectorAll('pre code[class*="language-"]') - - codeBlocks.forEach((block) => { - const lang = block.className.replace('language-', '') - const html = highlighter.codeToHtml(block.textContent, { - lang: langs[lang] || lang, - }) - block.innerHTML = html + const observer = new window.MutationObserver(theme) + observer.observe(document.documentElement, { + attributes: true, + subtree: false, }) + function theme() { + const colorMode = document.documentElement.getAttribute('data-theme') + codeBlocks.forEach(async (block) => { + const lang = block.className.replace('language-', '') + const html = await codeToHtml(block.textContent, { + theme: colorMode === 'light' ? 'github-light' : 'monokai', + lang: langs[lang] || lang, + }) + block.innerHTML = html + }) + } + theme() }