refactor(rehype-momiji): updating type, renaming, bumping deps and adding new args

app/packages/rehype-momiji/buildHTML.ts → app/packages/rehype-momiji/buildCodeBlock.ts

@@ -7,7 +7,7 @@ import { visit } from "unist-util-visit";
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
 
-const buildHTML = (
+const buildCodeBlock = (
   rawCode: string,
   lang: string,
   theme: BundledTheme,
@@ -21,11 +21,11 @@ const buildHTML = (
   });
   const filenameColorStyle = `background-color: ${filenameBGColor ?? COLOR_HAI}; color: ${filenameTextColor ?? COLOR_SHIRONERI};`;
 
-  // Add filename to the code block if it exists
   if (filename === "") {
     return toHtml(hast);
   }
 
+  // Add filename to the code block if it exists
   visit(hast, "element", (node: Element) => {
     if (
       node.tagName === "pre" &&
@@ -58,4 +58,4 @@ const buildHTML = (
   return toHtml(hast);
 };
 
-export { buildHTML };
+export { buildCodeBlock };

app/packages/rehype-momiji/rehypeMomiji.ts

@@ -1,23 +1,25 @@
 import { bundledLanguages, bundledThemes, type BundledLanguage, type BundledTheme } from "shiki";
+import type { Node } from "unist";
 import type { Plugin } from "unified";
-import type { Text, Element, Root } from "hast";
+import type { Text, Element } from "hast";
 import { visit } from "unist-util-visit";
 import { getHighlighter } from "./highlighter";
 import { parser } from "./parser";
-import { buildHTML } from "./buildHTML";
+import { buildCodeBlock } from "./buildCodeBlock";
 
-type Options = {
+interface Option {
   theme?: BundledTheme;
   fallbackLang?: BundledLanguage;
+  excludeLangs?: string[];
   filenameBGColor?: string;
   filenameTextColor?: string;
-};
+}
 
 const defaultHighlighter = await getHighlighter({ themes: bundledThemes, langs: bundledLanguages });
 
-const rehypeMomiji: Plugin = (options: Options = {}) => {
+const rehypeMomiji: Plugin<Option[]> = (options) => {
   const langs = defaultHighlighter.getLoadedLanguages();
-  const { theme = "github-dark-default", fallbackLang = "c", filenameBGColor, filenameTextColor } = options;
+  const { theme = "github-dark-default", fallbackLang = "c", excludeLangs, filenameBGColor, filenameTextColor } = options;
 
   const parseLanguage = (classNames: string[]): string | undefined => {
     for (const className of classNames) {
@@ -28,12 +30,12 @@ const rehypeMomiji: Plugin = (options: Options = {}) => {
     return;
   };
 
-  const checkSupportedLanguage = (lang?: string): string | undefined => {
+  const checkSupportedLanguage = (lang: string): string => {
     if (lang && langs.includes(lang)) return lang;
     return fallbackLang;
   };
 
-  return (node) => {
+  return (node: Node) => {
     visit(node, "element", (node: Element) => {
       // Check if the node is a pre tag with a single child
       if (!(node.tagName === "pre" && Array.isArray(node.children) && node.children.length === 1)) {
@@ -68,18 +70,24 @@ const rehypeMomiji: Plugin = (options: Options = {}) => {
 
       // Parse the language from the class names and check if it is supported
       const lang = parseLanguage(classNames);
-      const supportedLang = checkSupportedLanguage(lang);
-      if (!supportedLang) {
+      if (!lang) {
         return;
       }
 
+      // Check if the language should be excluded
+      if(excludeLangs?.includes(lang)) {
+        return;
+      }
+
+      const supportedLang = checkSupportedLanguage(lang);
+
       const filename = (codeElem.properties["data-remark-code-filename"] as string) ?? "";
 
-      const highlightCode = buildHTML(rawCode, supportedLang, theme, filename, filenameBGColor, filenameTextColor);
+      const codeBlock = buildCodeBlock(rawCode, supportedLang, theme, filename, filenameBGColor, filenameTextColor);
 
       const container = `
         <div style="position: relative; display: flex; flex-direction: column; gap: 2px;">
-          ${highlightCode}
+          ${codeBlock}
         </div>
       `;
 

package.json

@@ -32,12 +32,12 @@
     "husky": "^9.1.1",
     "lint-staged": "^15.2.7",
     "mdast": "^3.0.0",
-    "rehype-parse": "^9.0.0",
+    "rehype-parse": "^9.0.1",
     "remark-breaks": "^4.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.0.0",
-    "shiki": "^1.16.2",
+    "shiki": "^1.23.0",
     "unified": "^11.0.5",
     "unist": "^0.0.1",
     "unist-util-visit": "^5.0.0",

vite.config.ts

@@ -23,7 +23,7 @@ export default defineConfig(() => {
       mdx({
         jsxImportSource: 'hono/jsx',
         remarkPlugins: [remarkGfm, remarkBreaks, remarkFrontmatter, remarkMdxFrontmatter, remarkMomijiCodeFilename],
-        rehypePlugins: [rehypeMomiji]
+        rehypePlugins: [[rehypeMomiji, {}]],
       })
     ],
   }