feat: show filename ui above the code block

taga3s · Sep 10, 2024 · 1d3fa42 · 1d3fa42
1 parent 6aa4f1c
commit 1d3fa42
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -35,6 +35,6 @@ publishedAt: "2024-09-XX"
 
 - 以下は、TypeScriptのサンプルコードです。
 
-```ts
+```ts title="sample.ts"
 console.log("Hello, TypeScript!");
 ```