Merge pull request #22 from taga3s/feature/show-filename-with-rehype-…

…momiji

feat: show filename ui above the code block

app/modules/rehype-momiji/buildCodeBlockHTML.ts

@@ -0,0 +1,43 @@
+import { bundledLanguages, bundledThemes, type BundledLanguage, type BundledTheme } from "shiki";
+import { getHighlighter } from "./highlighter";
+import { toHtml } from "hast-util-to-html";
+import type { Element } from "hast";
+
+const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
+
+const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, theme?: string) => {
+  const hast = defaultHighlighter.codeToHast(rawCode, {
+    lang: lang,
+    theme: theme ?? "github-dark",
+  });
+
+  const targetElem = hast.children[0] as Element;
+
+  // Add filename to the code block if it exists
+  if (filename !== "" && targetElem) {
+    targetElem.properties = {
+      class: targetElem.properties.class,
+      style: `${targetElem.properties.style}; padding-top: 12px;`,
+      tabindex: targetElem.properties.tabindex,
+    };
+
+    targetElem.children.unshift({
+      type: "element",
+      tagName: "div",
+      properties: {
+        style:
+          "width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; color: white; background-color: gray;",
+      },
+      children: [
+        {
+          type: "text",
+          value: filename,
+        },
+      ],
+    });
+  }
+
+  return toHtml(hast);
+};
+
+export { buildCodeBlockHTML };

app/modules/rehype-momiji/rehypeMomiji.ts

@@ -5,6 +5,7 @@ import { visit } from "unist-util-visit";
 import { getHighlighter } from "./highlighter";
 import { parser } from "./parser";
 import { isArray, isObject, isString } from "./utils/checkTypeOfOperandValue";
+import { buildCodeBlockHTML } from "./buildCodeBlockHTML";
 
 type Options = { theme?: BundledTheme; fallbackLang?: BundledLanguage };
 
@@ -62,13 +63,14 @@ const rehypeMomiji: Plugin = (options: Options = { theme: "github-dark-default",
         return;
       }
 
-      const highlightCode = defaultHighlighter.codeToHtml(rawCode, {
-        lang: supportedLang,
-        theme: theme ?? "github-dark",
-      });
+      const filename = (codeElem.properties["data-remark-code-filename"] as string) ?? "";
+
+      const highlightCode = buildCodeBlockHTML(rawCode, supportedLang, filename, theme);
 
       const container = `
-        <div>${highlightCode}</div>
+        <div style="display: flex; flex-direction: column; gap: 2px;">
+          ${highlightCode}
+        </div>
       `;
 
       const parsedRoot = parser.parse(container) as Root;

app/routes/posts/md_test.mdx

@@ -35,6 +35,6 @@ publishedAt: "2024-09-XX"
 
 - 以下は、TypeScriptのサンプルコードです。
 
-```ts
+```ts title="sample.ts"
 console.log("Hello, TypeScript!");
 ```

package.json

@@ -13,18 +13,8 @@
     "prepare": "husky"
   },
   "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",
-    "unist": "^0.0.1",
-    "unist-util-visit": "^5.0.0"
+    "honox": "^0.1.24"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
@@ -33,11 +23,22 @@
     "@hono/vite-dev-server": "^0.14.0",
     "@hono/vite-ssg": "^0.1.0",
     "@mdx-js/rollup": "^3.0.1",
-    "husky": "^9.1.1",
     "lint-staged": "^15.2.7",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
+    "@types/unist": "^3.0.3",
+    "hast": "^1.0.0",
+    "hast-util-to-html": "^9.0.2",
+    "husky": "^9.1.1",
+    "mdast": "^3.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.0.0",
+    "rehype-parse": "^9.0.0",
+    "shiki": "^1.16.2",
+    "unified": "^11.0.5",
+    "unist": "^0.0.1",
+    "unist-util-visit": "^5.0.0",
     "vite": "^5.4.2",
     "wrangler": "^3.72.2"
   },