diff --git a/app/modules/remark-code-filename/remarkCodeFilename.ts b/app/modules/remark-code-filename/remarkCodeFilename.ts
new file mode 100644
index 0000000..450473f
--- /dev/null
+++ b/app/modules/remark-code-filename/remarkCodeFilename.ts
@@ -0,0 +1,27 @@
+import { visit } from "unist-util-visit";
+import type { Root } from "mdast";
+import type * as unified from "unified";
+
+const remarkCodeFilename: unified.Plugin<[], Root> = () => {
+  return (tree, file) => {
+    visit(tree, "code", (node) => {
+      const metaString = `${node.lang ?? ""} ${node.meta ?? ""}`.trim();
+      if (!metaString) return;
+      const [title] = metaString.match(/(?<=title=("|'))(.*?)(?=("|'))/) ?? [""];
+      if (!title && metaString.includes("title=")) {
+        file.message("Invalid title", node, "remark-code-filename");
+        return;
+      }
+      if (!title) return;
+
+      if (!node.data) {
+        node.data = {};
+      }
+      node.data.hProperties = {
+        "data-remark-code-filename": title,
+      };
+    });
+  };
+};
+
+export default remarkCodeFilename;
diff --git a/package.json b/package.json
index 3f840f8..53ab632 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,12 @@
   },
   "dependencies": {
     "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.3",
     "hast": "^1.0.0",
     "hono": "^4.5.11",
     "honox": "^0.1.24",
+    "mdast": "^3.0.0",
     "rehype-parse": "^9.0.0",
     "shiki": "^1.16.2",
     "unified": "^11.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 234e662..7feace5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
+      '@types/mdast':
+        specifier: ^4.0.4
+        version: 4.0.4
       '@types/unist':
         specifier: ^3.0.3
         version: 3.0.3
@@ -23,6 +26,9 @@ importers:
       honox:
         specifier: ^0.1.24
         version: 0.1.24(hono@4.5.11)
+      mdast:
+        specifier: ^3.0.0
+        version: 3.0.0
       rehype-parse:
         specifier: ^9.0.0
         version: 9.0.0
@@ -1354,6 +1360,10 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  mdast@3.0.0:
+    resolution: {integrity: sha512-xySmf8g4fPKMeC07jXGz971EkLbWAJ83s4US2Tj9lEdnZ142UP5grN73H1Xd3HzrdbU5o9GYYP/y8F9ZSwLE9g==}
+    deprecated: '`mdast` was renamed to `remark`'
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3265,6 +3275,8 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  mdast@3.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
diff --git a/vite.config.ts b/vite.config.ts
index f34501f..1ef4ee3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,7 @@ import remarkFrontmatter from 'remark-frontmatter';
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 import remarkGfm from 'remark-gfm'
 import rehypeMomiji from './app/modules/rehype-momiji/rehypeMomiji'
+import remarkCodeFilename from './app/modules/remark-code-filename/remarkCodeFilename'
 
 export default defineConfig(() => {
   return {
@@ -20,7 +21,7 @@ export default defineConfig(() => {
       ssg({ entry: "./app/server.ts" }), 
       mdx({
         jsxImportSource: 'hono/jsx',
-        remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
+        remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter, remarkCodeFilename],
         rehypePlugins: [rehypeMomiji]
       })
     ],