chore: updated packages, dual shiki themes, etc

ovflowd · ovflowd · commit f9f7b64282c8 · 2024-08-25T15:08:13.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "remark-rehype": "^11.1.0",
     "remark-stringify": "^11.0.0",
     "semver": "^7.6.3",
-    "shiki": "^1.12.1",
+    "shiki": "^1.14.1",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
     "unist-util-find-after": "^5.0.0",
diff --git a/shiki.config.mjs b/shiki.config.mjs
@@ -15,18 +15,20 @@ import shellScriptLanguage from 'shiki/langs/shellscript.mjs';
 import shellSessionLanguage from 'shiki/langs/shellsession.mjs';
 import typeScriptLanguage from 'shiki/langs/typescript.mjs';
 
-import shikiNordTheme from 'shiki/themes/nord.mjs';
+import lightTheme from 'shiki/themes/catppuccin-latte.mjs';
+import darkTheme from 'shiki/themes/catppuccin-mocha.mjs';
 
 /**
- * @TODO: Use `shiki.config.mjs` from nodejs/nodejs.org
- *
  * Creates a Shiki configuration for the API Docs tooling
  *
  * @type {import('@shikijs/core').HighlighterCoreOptions}
  */
 export default {
   loadWasm: getWasmInstance,
-  theme: shikiNordTheme,
+  // Only register the themes we need, to support light/dark theme
+  themes: [lightTheme, darkTheme],
+  // Only register the languages that the API docs use
+  // and override the JavaScript language with the aliases
   langs: [
     { ...javaScriptLanguage[0], aliases: ['mjs', 'cjs', 'js'] },
     ...jsonLanguage,
diff --git a/src/generators/legacy-html/assets/style.css b/src/generators/legacy-html/assets/style.css
@@ -531,7 +531,7 @@ tt,
 pre {
   padding: 1rem;
   vertical-align: top;
-  background-color: var(--background-color-highlight);
+  border-radius: 4px;
   margin: 1rem;
   overflow-x: auto;
 }
@@ -1027,7 +1027,8 @@ kbd {
   text-transform: uppercase;
   font-weight: 700;
   padding: 0 0.5rem;
-  margin-right: 0.2rem;
+  margin-right: 10px;
+  margin-top: -2px;
   height: 1.5rem;
   transition-property: background-color, border-color, color, box-shadow, filter;
   transition-duration: 0.3s;
diff --git a/src/generators/legacy-html/template.html b/src/generators/legacy-html/template.html
@@ -26,6 +26,17 @@
         document.documentElement.classList.add('dark-mode');
       }
     </script>
+    <style>
+      html.dark-mode .shiki,
+      html.dark-mode .shiki span {
+        color: var(--shiki-dark) !important;
+        background-color: var(--shiki-dark-bg) !important;
+        /* Optional, if you also want font styles */
+        font-style: var(--shiki-dark-font-style) !important;
+        font-weight: var(--shiki-dark-font-weight) !important;
+        text-decoration: var(--shiki-dark-text-decoration) !important;
+      }
+    </style>
   </head>
   <body class="alt apidoc" id="api-section-__FILENAME__">
     <div id="content" class="clearfix">
diff --git a/src/utils/highlighter.mjs b/src/utils/highlighter.mjs
@@ -94,7 +94,8 @@ export default function rehypeShikiji() {
       // Parses the <pre> contents and returns a HAST tree with the highlighted code
       const { children } = shikiHighlighter.codeToHast(preElementContents, {
         lang: languageId,
-        theme: shikiConfig.theme,
+        // Allows support for dual themes (light, dark) for Shiki
+        themes: { light: shikiConfig.themes[0], dark: shikiConfig.themes[1] },
       });
 
       // Adds the original language back to the <pre> element
@@ -147,11 +148,14 @@ export default function rehypeShikiji() {
               // We grab Shiki's styling from the code tag
               // back to the pre element tag to ensure consistency
               style: codeElements[0].properties.style,
+              class: 'shiki',
             },
             [
               createElement('input', {
                 class: 'js-flavor-toggle',
                 type: 'checkbox',
+                // If the CJS code block is the first one, then we should keep
+                // the checkbox checked so that it highglit the CJS by default
                 checked: codeElements[0].properties.language === 'cjs',
               }),
               ...codeElements,
