From e474e17c459509edee2f5eef52c232b8be8f06f7 Mon Sep 17 00:00:00 2001
From: Justin Bennett <git@just-be.dev>
Date: Sat, 5 Oct 2024 09:08:57 -0400
Subject: [PATCH] Remove wrapper `pre`, add styles

---
 packages/astro-md/middleware.ts | 33 ++++++++++++++++++++++++---------
 src/style.css                   |  4 ++++
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/astro-md/middleware.ts b/packages/astro-md/middleware.ts
index 8d0a628..58c938d 100644
--- a/packages/astro-md/middleware.ts
+++ b/packages/astro-md/middleware.ts
@@ -23,6 +23,7 @@ class SyntaxHighlightRewriter implements HTMLRewriterElementContentHandlers {
   element(element: Element) {
     this.lang = element.getAttribute("data-lang") ?? "";
     this.code = "";
+    element.removeAndKeepContent();
   }
   async text(text: Text) {
     this.code += decode(text.text);
@@ -74,14 +75,28 @@ export const onRequest = defineMiddleware(async (context, next) => {
   });
   context.locals.render = processor.render;
   const res = await next();
-  if (import.meta.env.DEV && typeof HTMLRewriter === "undefined") {
-    // @ts-expect-error Isn't defined on globalThis, but that's fine
-    globalThis.HTMLRewriter = (
-      await import("@worker-tools/html-rewriter/base64")
-    ).HTMLRewriter;
-  }
 
-  return new HTMLRewriter()
-    .on("code[data-lang]", new SyntaxHighlightRewriter(context.locals.runtime))
-    .transform(res);
+  try {
+    if (import.meta.env.DEV && typeof HTMLRewriter === "undefined") {
+      // @ts-expect-error Isn't defined on globalThis, but that's fine
+      globalThis.HTMLRewriter = (
+        await import("@worker-tools/html-rewriter/base64")
+      ).HTMLRewriter;
+    }
+
+    return new HTMLRewriter()
+      .on(
+        "code[data-lang]",
+        new SyntaxHighlightRewriter(context.locals.runtime)
+      )
+      .on("pre:not(.shiki)", {
+        element: (element) => {
+          element.removeAndKeepContent();
+        },
+      })
+      .transform(res);
+  } catch (e) {
+    console.error(e);
+    return res;
+  }
 });
diff --git a/src/style.css b/src/style.css
index 94f6985..6672ab7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -48,3 +48,7 @@ blockquote ul {
   @apply inline-block size-[0.7rem] lg:size-[0.9rem] ml-[0.2rem] mb-[0.45rem] lg:mb-[0.6rem] align-bottom text-slate-300 stroke-slate-500;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
 }
+
+.prose pre:has(code[data-lang]) {
+  @apply bg-inherit my-0;
+}