From 1d3fa427d6059c51b69a0f693c204f842a50c36a Mon Sep 17 00:00:00 2001
From: taga3s <bepozurapu274@gmail.com>
Date: Tue, 10 Sep 2024 23:14:24 +0900
Subject: [PATCH] feat: show filename ui above the code block

---
 app/modules/rehype-momiji/rehypeMomiji.ts | 7 ++++++-
 app/routes/posts/md_test.mdx              | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/modules/rehype-momiji/rehypeMomiji.ts b/app/modules/rehype-momiji/rehypeMomiji.ts
index a52a0ea..a3662f6 100644
--- a/app/modules/rehype-momiji/rehypeMomiji.ts
+++ b/app/modules/rehype-momiji/rehypeMomiji.ts
@@ -62,13 +62,18 @@ const rehypeMomiji: Plugin = (options: Options = { theme: "github-dark-default",
         return;
       }
 
+      const filename = codeElem.properties["data-remark-code-filename"] ?? "";
+
       const highlightCode = defaultHighlighter.codeToHtml(rawCode, {
         lang: supportedLang,
         theme: theme ?? "github-dark",
       });
 
       const container = `
-        <div>${highlightCode}</div>
+        <div style="display: flex; flex-direction: column; gap: 2px;">
+          ${filename ? `<div style="width: fit-content; padding: 4px 8px; font-size: 14px; color: white; background-color: gray;">${filename}</div>` : ""}
+          ${highlightCode}
+        </div>
       `;
 
       const parsedRoot = parser.parse(container) as Root;
diff --git a/app/routes/posts/md_test.mdx b/app/routes/posts/md_test.mdx
index bb133aa..2fe32ee 100644
--- a/app/routes/posts/md_test.mdx
+++ b/app/routes/posts/md_test.mdx
@@ -35,6 +35,6 @@ publishedAt: "2024-09-XX"
 
 - 以下は、TypeScriptのサンプルコードです。
 
-```ts
+```ts title="sample.ts"
 console.log("Hello, TypeScript!");
 ```