Remove wrapper pre, add styles

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;
+  }
 });

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;
+}