Merge pull request #29 from taga3s/refactor/rehype-momiji

refactor
taga3s · Sep 15, 2024 · 525f49f · 525f49f
2 parents 554dd82 + 9a61abc
commit 525f49f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/app/modules/rehype-momiji/buildCodeBlockHTML.ts b/app/modules/rehype-momiji/buildCodeBlockHTML.ts
@@ -6,13 +6,20 @@ import { COLOR_SHIRONERI, COLOR_HAI } from "./colors";
 import { visit } from "unist-util-visit";
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
-const defaultFilenameUIColor = `color: ${COLOR_SHIRONERI}; background-color: ${COLOR_HAI};`;
 
-const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, theme: BundledTheme) => {
+const buildCodeBlockHTML = (
+  rawCode: string,
+  lang: string,
+  theme: BundledTheme,
+  filename: string,
+  filenameBGColor?: string,
+  filenameTextColor?: string,
+) => {
   const hast = defaultHighlighter.codeToHast(rawCode, {
     lang: lang,
     theme: theme,
   });
+  const filenameColorStyle = `background-color: ${filenameBGColor ?? COLOR_HAI}; color: ${filenameTextColor ?? COLOR_SHIRONERI};`;
 
   // Add filename to the code block if it exists
   if (filename === "") {
@@ -36,7 +43,7 @@ const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, the
         type: "element",
         tagName: "div",
         properties: {
-          style: `width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${defaultFilenameUIColor};`,
+          style: `width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${filenameColorStyle}`,
         },
         children: [
           {

diff --git a/app/modules/rehype-momiji/rehypeMomiji.ts b/app/modules/rehype-momiji/rehypeMomiji.ts
@@ -7,13 +7,18 @@ import { parser } from "./parser";
 import { isArray, isObject, isString } from "./utils/checkTypeOfOperandValue";
 import { buildCodeBlockHTML } from "./buildCodeBlockHTML";
 
-type Options = { theme: BundledTheme; fallbackLang?: BundledLanguage };
+type Options = {
+  theme?: BundledTheme;
+  fallbackLang?: BundledLanguage;
+  filenameBGColor?: string;
+  filenameTextColor?: string;
+};
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
 
-const rehypeMomiji: Plugin = (options: Options = { theme: "github-dark-default", fallbackLang: "c" }) => {
+const rehypeMomiji: Plugin = (options: Options = {}) => {
   const langs = defaultHighlighter.getLoadedLanguages();
-  const { theme, fallbackLang } = options;
+  const { theme = "github-dark-default", fallbackLang = "c", filenameBGColor, filenameTextColor } = options;
 
   const parseLanguage = (classNames: string[]): string | undefined => {
     for (const className of classNames) {
@@ -65,15 +70,22 @@ const rehypeMomiji: Plugin = (options: Options = { theme: "github-dark-default",
 
       const filename = (codeElem.properties["data-remark-code-filename"] as string) ?? "";
 
-      const highlightCode = buildCodeBlockHTML(rawCode, supportedLang, filename, theme);
+      const highlightCode = buildCodeBlockHTML(
+        rawCode,
+        supportedLang,
+        theme,
+        filename,
+        filenameBGColor,
+        filenameTextColor,
+      );
 
       const container = `
         <div style="display: flex; flex-direction: column; gap: 2px;">
           ${highlightCode}
         </div>
       `;
 
-      const parsedRoot = parser.parse(container) as Root;
+      const parsedRoot = parser.parse(container);
       node.tagName = "div";
       node.children = parsedRoot.children as Element[];
     });

diff --git a/app/routes/posts/md_test.mdx b/app/routes/posts/md_test.mdx
@@ -1,6 +1,6 @@
 ---
-title: "Markdown試し打ち"
-publishedAt: "2024/09/14"
+title: Markdown試し打ち
+publishedAt: 2024/09/14
 ---
 
 # # Section1