Merge pull request #23 from taga3s/fix/codeblock-filename-ui-styling

fix: filename ui styling
taga3s · Sep 14, 2024 · f84698a · f84698a
2 parents eec5985 + bb8d85e
commit f84698a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/app/modules/rehype-momiji/README.md b/app/modules/rehype-momiji/README.md
@@ -5,3 +5,4 @@
 ## features
 
 - Highlighting Code
+- Displaying Filename
diff --git a/app/modules/rehype-momiji/buildCodeBlockHTML.ts b/app/modules/rehype-momiji/buildCodeBlockHTML.ts
@@ -1,14 +1,16 @@
-import { bundledLanguages, bundledThemes, type BundledLanguage, type BundledTheme } from "shiki";
+import { bundledLanguages, bundledThemes, type BundledTheme } from "shiki";
 import { getHighlighter } from "./highlighter";
 import { toHtml } from "hast-util-to-html";
 import type { Element } from "hast";
+import { COLOR_SHIRONERI, COLOR_HAI } from "./colors";
 
 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?: string) => {
+const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, theme: BundledTheme) => {
   const hast = defaultHighlighter.codeToHast(rawCode, {
     lang: lang,
-    theme: theme ?? "github-dark",
+    theme: theme,
   });
 
   const targetElem = hast.children[0] as Element;
@@ -17,16 +19,15 @@ const buildCodeBlockHTML = (rawCode: string, lang: string, filename: string, the
   if (filename !== "" && targetElem) {
     targetElem.properties = {
       class: targetElem.properties.class,
-      style: `${targetElem.properties.style}; padding-top: 12px;`,
+      style: `${targetElem.properties.style}; padding-top: 0px;`,
       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;",
+        style: `width: fit-content; margin-bottom: 16px; padding: 4px 8px; font-size: 14px; border-radius: 0 0 4px 4px; ${defaultFilenameUIColor};`,
       },
       children: [
         {

diff --git a/app/modules/rehype-momiji/colors.ts b/app/modules/rehype-momiji/colors.ts
@@ -0,0 +1,6 @@
+const COLOR_SUMI = "#1C1C1C;";
+const COLOR_SHIRONERI = "#FCFAF2";
+const COLOR_HAI = "#828282";
+const COLOR_GOFUN = "#FFFFFB";
+
+export { COLOR_SUMI, COLOR_SHIRONERI, COLOR_HAI, COLOR_GOFUN };
diff --git a/app/modules/rehype-momiji/rehypeMomiji.ts b/app/modules/rehype-momiji/rehypeMomiji.ts
@@ -7,7 +7,7 @@ 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 };
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,4 @@
		## features

		- Highlighting Code
		- Displaying Filename