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()
 }