fix: restores shiki highlighting

justin-schroeder · Feb 21, 2024 · 20d7a8f · 20d7a8f
1 parent 178b532
commit 20d7a8f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -28,6 +28,7 @@
     <title>ArrowJS • Docs</title>
   </head>
   <body>
+    <script type="module" src="../js/colorMode.js"></script>
     <div class="container hero">
       <a href="/">
         <img src="/img/logo.png" class="logo" alt="ArrowJS Logo">
@@ -91,8 +92,6 @@
       events()
       highlight();
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/shiki"></script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-    <script type="module" src="../js/colorMode.js"></script>
   </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -29,6 +29,7 @@
     <title>ArrowJS - Reactive interfaces with no build tools & native JavaScript.</title>
   </head>
   <body>
+    <script type="module" src="./js/colorMode.js"></script>
     <div class="container hero">
       <a href="/">
         <img src="/img/logo.png" class="logo" alt="ArrowJS Logo">
@@ -85,8 +86,6 @@
 
       highlight()
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/shiki"></script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-    <script type="module" src="./js/colorMode.js"></script>
   </body>
 </html>
diff --git a/docs/js/highlight.js b/docs/js/highlight.js
@@ -1,21 +1,28 @@
+import { codeToHtml } from 'https://esm.sh/[email protected]'
+
 export default async function () {
   const langs = {
     javascript: 'js',
     js: 'js',
     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()
 }