Guard against unknown languages; fix nested pre styles

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;
@@ -19,6 +20,7 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
   private code: string = "";
   cache: KVNamespace;
   salt: string;
+  skip: boolean = false;
 
   constructor(private runtime: Runtime["runtime"]) {
     this.cache = runtime.env.KV_HIGHLIGHT;
@@ -28,9 +30,16 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
   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(
@@ -102,11 +111,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;
+}