add shiki transforer to get the filename into the pre

astro.config.mjs

···
 
 import tailwind from "@astrojs/tailwind";
 
+import { filenameTransformer } from "./src/scripts/filename-transformer";
+
 const tailwindIntegration = tailwind({
   applyBaseStyles: false,
 });
···
   integrations: [mdx(), tailwindIntegration],
   legacy: { collections: true },
   markdown: {
-    shikiConfig: { theme: "catppuccin-mocha" },
+    shikiConfig: {
+      theme: "catppuccin-mocha",
+      transformers: [filenameTransformer()],
+    },
   },
 });

src/scripts/filename-transformer.ts

···
+// SPDX-FileCopyrightText: 2025 Norbert Melzer
+// SPDX-FileContributor: Norbert Melzer
+//
+// SPDX-License-Identifier: MIT
+
+import type { ShikiTransformer } from "shiki";
+
+export function filenameTransformer(): ShikiTransformer {
+  const transformer: ShikiTransformer = {
+    name: "filenameTransformer",
+
+    pre(code) {
+      const meta: string = this.options.meta?.__raw || "";
+      const pattern = /(?:data-)?filename="(.*)"/;
+
+      const filename = pattern.exec(meta)?.[1] || null;
+
+      if (filename) {
+        code.properties.dataFilename = filename;
+      }
+    },
+  };
+
+  return transformer;
+}