Fixup syntax highlighting

packages/astro-md/middleware.ts

@@ -5,6 +5,7 @@ import { defineMiddleware } from "astro:middleware";
 import { myRemark } from "../my-remark";
 import { remarkObsidian } from "../remark-obsidian";
 import remarkFrontmatter from "remark-frontmatter";
+import { isLangSupported } from "./syntax-highlighting";
 
 // Cache for 30 days
 const syntaxHighlightCacheTtl = 60 * 60 * 24 * 30;
@@ -18,17 +19,27 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
   private lang: string = "";
   private code: string = "";
   cache: KVNamespace;
+  cacheVersion: string;
+  skip: boolean = false;
 
   constructor(private runtime: Runtime["runtime"]) {
     this.cache = runtime.env.KV_HIGHLIGHT;
+    this.cacheVersion = runtime.env.SYNTAX_VERSION;
   }
 
   element(element: Element) {
     this.lang = element.getAttribute("data-lang") ?? "";
     this.code = "";
+    if (!isLangSupported(this.lang)) {
+      element.removeAttribute("data-lang");
+      element.removeAttribute("class");
+      this.skip = true;
+      return;
+    }
     element.removeAndKeepContent();
   }
   async text(text: Text) {
+    if (this.skip) return;
     this.code += decode(text.text);
     if (text.lastInTextNode) {
       const hashBuffer = await crypto.subtle.digest(
@@ -39,8 +50,9 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
       const hash = hashArray
         .map((b) => b.toString(16).padStart(2, "0"))
         .join("");
+      const key = `${this.cacheVersion}:${hash}`;
 
-      const cachedResult = await this.cache.get(hash, {
+      const cachedResult = await this.cache.get(key, {
         cacheTtl: syntaxHighlightCacheTtl,
       });
       if (cachedResult) {
@@ -50,10 +62,10 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
       // When setting cacheTtl, even misses are cached. If we've gotten
       // to this point the cache is empty, so let's clear the miss so that
       // the next request has the actual content (after we write it)
-      this.runtime.ctx.waitUntil(this.cache.get(hash));
+      this.runtime.ctx.waitUntil(this.cache.get(key));
 
       const res = await fetch(
-        `https://highlight.val.just-be.dev?lang=${this.lang}&theme=${theme}`,
+        `https://just_be-highlight.web.val.run?lang=${this.lang}&theme=${theme}`,
         {
           method: "POST",
           body: this.code,
@@ -63,7 +75,7 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
         }
       );
       const data = await res.text();
-      this.runtime.ctx.waitUntil(this.cache.put(hash, data));
+      this.runtime.ctx.waitUntil(this.cache.put(key, data));
       text.replace(data, { html: true });
     } else {
       text.remove();
@@ -98,11 +110,6 @@ export const onRequest = defineMiddleware(async (context, next) => {
         "code[data-lang]",
         new SyntaxHighlightRewriter(context.locals.runtime)
       )
-      .on("pre:not(.shiki)", {
-        element: (element) => {
-          element.removeAndKeepContent();
-        },
-      })
       .transform(res);
   } catch (e) {
     console.error(e);

packages/astro-md/package.json

@@ -11,7 +11,8 @@
   "license": "MIT",
   "dependencies": {
     "@astrojs/markdown-remark": "catalog:",
-    "remark-frontmatter": "^5.0.0"
+    "remark-frontmatter": "^5.0.0",
+    "shiki": "^1.22.0"
   },
   "devDependencies": {
     "@worker-tools/html-rewriter": "0.1.0-pre.19"

packages/astro-md/syntax-highlighting.ts

@@ -0,0 +1,40 @@
+import { bundledLanguagesInfo } from "shiki/langs";
+import { bundledThemesInfo } from "shiki/themes";
+
+interface Theme {
+  id: string;
+}
+type ThemeMap = Record<string, Theme>;
+
+const themes: ThemeMap = bundledThemesInfo.reduce(
+  (themes: ThemeMap, theme: Theme) => {
+    themes[theme.id] = theme;
+    return themes;
+  },
+  {}
+);
+
+interface Lang {
+  id: string;
+  aliases?: string[];
+}
+type LangMap = Record<string, Lang>;
+
+const langs: LangMap = bundledLanguagesInfo.reduce(
+  (langs: LangMap, lang: Lang) => {
+    langs[lang.id] = lang;
+    for (const alias of lang.aliases ?? []) {
+      langs[alias] = lang;
+    }
+    return langs;
+  },
+  {}
+);
+
+export const isThemeSupported = (theme: string) => {
+  return !!themes[theme];
+};
+
+export const isLangSupported = (lang: string) => {
+  return !!langs[lang];
+};

src/style.css

@@ -52,3 +52,8 @@ blockquote ul {
 .prose pre:has(code[data-lang]) {
   @apply bg-inherit my-0;
 }
+
+/* Work around for nested pre tags */
+.prose pre:has(pre[data-lang]) {
+  @apply bg-inherit mx-0 -my-5 p-0;
+}

worker-configuration.d.ts

@@ -1,14 +1,15 @@
 // Generated by Wrangler by running `wrangler types`
 
 interface Env {
-	KV_MAPPINGS: KVNamespace;
-	KV_HIGHLIGHT: KVNamespace;
-	NODE_VERSION: "v20.16.0";
-	PNPM_VERSION: "v9.7.0";
-	SITE: string;
-	PUBLISH_KEY: string;
-	SENTRY_DSN: string;
-	SENTRY_AUTH_TOKEN: string;
-	R2_BUCKET: R2Bucket;
-	R2_ASSETS: R2Bucket;
+  KV_MAPPINGS: KVNamespace;
+  KV_HIGHLIGHT: KVNamespace;
+  NODE_VERSION: "v20.16.0";
+  PNPM_VERSION: "v9.7.0";
+  SITE: string;
+  PUBLISH_KEY: string;
+  SENTRY_DSN: string;
+  SENTRY_AUTH_TOKEN: string;
+  SYNTAX_VERSION: string;
+  R2_BUCKET: R2Bucket;
+  R2_ASSETS: R2Bucket;
 }

wrangler.toml

@@ -6,6 +6,7 @@ compatibility_flags = ["nodejs_als"]
 [vars]
 NODE_VERSION = "v20.16.0"
 PNPM_VERSION = "v9.7.0"
+SYNTAX_VERSION = "0"
 
 [[kv_namespaces]]
 binding = "KV_MAPPINGS"