Highlight code blocks

site/package.json

@@ -28,8 +28,10 @@
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
+    "shikiji": "^0.5.1",
     "svelte": "^4.2.0",
     "unified": "^11.0.1",
+    "unist-util-visit": "^5.0.0",
     "vite": "^4.4.9"
   }
 }

site/scripts/rehypeShikiji.js

@@ -0,0 +1,50 @@
+import { visit, SKIP } from 'unist-util-visit'
+import { codeToHast } from 'shikiji'
+
+/**
+ * @returns {import('unified').Transformer}
+ */
+export function rehypeShikiji() {
+  return async (tree) => {
+    /** @type {typeof tree[]} */
+    const preNodes = []
+
+    // visit is sync only
+    visit(tree, async (node) => {
+      if (node.type === 'element' && node.tagName === 'pre') {
+        preNodes.push(node)
+        return SKIP
+      }
+    })
+
+    for (const node of preNodes) {
+      const codeNode = node.children?.[0]
+
+      const language = codeNode.properties?.className?.[0]?.replace(
+        'language-',
+        ''
+      )
+      if (!language) return
+
+      const code = codeNode.children?.[0]?.value
+      if (!code) return
+
+      const codeHast = await codeToHast(code, {
+        lang: language,
+        themes: {
+          light: 'light-plus',
+          dark: 'dark-plus'
+        }
+      })
+
+      const preHast = codeHast.children[0]
+      // too bright
+      preHast.properties.style = preHast.properties.style.replace(
+        'background-color:#FFFFFF',
+        'background-color:#f3f0f0'
+      )
+
+      Object.assign(node, preHast)
+    }
+  }
+}

site/scripts/vitePluginMarkdown.js

@@ -7,6 +7,7 @@ import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeStringify from 'rehype-stringify'
 import { fileURLToPath } from 'node:url'
+import { rehypeShikiji } from './rehypeShikiji.js'
 
 /**
  *
@@ -18,6 +19,7 @@ export function markdown() {
     .use(remarkGfm)
     .use(remarkRehype)
     .use(rehypeSlug)
+    .use(rehypeShikiji)
     .use(rehypeAutolinkHeadings, {
       behavior: 'append',
       properties: {

site/src/components/PkgNode.svelte

@@ -61,9 +61,7 @@
     >
   {:else}
     <span class="indentable inline-flex">
-      <span class="text-blue-700 @dark:text-blue-300 mr-[1ch] min-w-max"
-        >{keyText}</span
-      >
+      <span class="key mr-[1ch] min-w-max">{keyText}</span>
       <span class="whitespace-nowrap token {typeof value}">
         {JSON.stringify(value)}
       </span>
@@ -93,41 +91,51 @@
 </li>
 
 <style>
+  /* NOTE: these styles must match shiki in the rules page */
+
+  .key {
+    color: #0451a5;
+  }
+
   .token {
     color: black;
   }
 
   .token.string {
-    color: brown;
+    color: #a31515;
   }
 
   .token.number {
-    color: yellow;
+    color: #098658;
   }
 
   .token.boolean {
-    color: blue;
+    color: #0000ff;
   }
 
   .indentable {
     margin-left: var(--indent-ch);
   }
 
   @media (prefers-color-scheme: dark) {
+    .key {
+      color: #9cdcfe;
+    }
+
     .token {
       color: white;
     }
 
     .token.string {
-      color: burlywood;
+      color: #ce9178;
     }
 
     .token.number {
-      color: lightyellow;
+      color: #b5cea8;
     }
 
     .token.boolean {
-      color: lightblue;
+      color: #569cd6;
     }
   }
 </style>

site/src/global.css

@@ -36,9 +36,9 @@ body {
   opacity: 0.8;
 }
 
-.docs code {
+.docs :not(pre) code {
   color: #121212;
-  background-color: #dcdcdc;
+  background-color: #cdcac9;
   border-radius: 0.25rem;
   padding: 0.15rem 0.25rem;
 }
@@ -48,6 +48,11 @@ body {
   padding: 0.5rem 0.8rem;
 }
 
+.docs .shiki {
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
+
 .docs h2.active > code {
   background-color: hsl(29, 74%, 77%);
 }
@@ -204,7 +209,7 @@ button {
     background-color: #2c2c2c;
   }
 
-  .docs code {
+  .docs :not(pre) code {
     color: #efefef;
     background-color: #434343;
   }
@@ -227,6 +232,12 @@ button {
     color: #6fa6ff;
   }
 
+  .shiki,
+  .shiki span {
+    background-color: var(--shiki-dark-bg) !important;
+    color: var(--shiki-dark) !important;
+  }
+
   button {
     background-color: #2c2c2c;
     color: #efefef;