diff --git a/astro.config.mjs b/astro.config.mjs
index b027365..81bb7d2 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -8,6 +8,8 @@ import mdx from "@astrojs/mdx";
 
 import tailwind from "@astrojs/tailwind";
 
+import { filenameTransformer } from "./src/scripts/filename-transformer";
+
 const tailwindIntegration = tailwind({
   applyBaseStyles: false,
 });
@@ -17,6 +19,9 @@ export default defineConfig({
   integrations: [mdx(), tailwindIntegration],
   legacy: { collections: true },
   markdown: {
-    shikiConfig: { theme: "catppuccin-mocha" },
+    shikiConfig: {
+      theme: "catppuccin-mocha",
+      transformers: [filenameTransformer()],
+    },
   },
 });
diff --git a/src/scripts/filename-transformer.ts b/src/scripts/filename-transformer.ts
new file mode 100644
index 0000000..5f3a765
--- /dev/null
+++ b/src/scripts/filename-transformer.ts
@@ -0,0 +1,25 @@
+// 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;
+}