feat: remark-code-filename

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;

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",

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]
       })
     ],