MarkdownComponentの型指定修正&SyntaxHighlighterとその言語指定をまとめた

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -1,20 +1,15 @@
-import Markdown, { Components } from "react-markdown";
+import Markdown, { Components, ExtraProps } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { EditorComponent, getAceLang } from "../terminal/editor";
 import { ExecFile } from "../terminal/exec";
-import { useChangeTheme } from "./themeToggle";
-import {
-  tomorrow,
-  tomorrowNight,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { getRuntimeLang } from "@/terminal/runtime";
 import { ReplTerminal } from "@/terminal/repl";
-import dynamic from "next/dynamic";
-// SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
-const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter"), {
-  ssr: false,
-});
+import {
+  getSyntaxHighlighterLang,
+  MarkdownLang,
+  StyledSyntaxHighlighter,
+} from "./styledSyntaxHighlighter";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -86,20 +81,12 @@ function CodeComponent({
   ref,
   style,
   ...props
-}: {
-  node: unknown;
-  className?: string;
-  ref?: unknown;
-  style?: unknown;
-  [key: string]: unknown;
-}) {
-  const theme = useChangeTheme();
-  const codetheme = theme === "tomorrow" ? tomorrow : tomorrowNight;
+}: JSX.IntrinsicElements["code"] & ExtraProps) {
   const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
     className || ""
   );
   if (match) {
-    const runtimeLang = getRuntimeLang(match[1]);
+    const runtimeLang = getRuntimeLang(match[1] as MarkdownLang | undefined);
     if (match[2] === "-exec" && match[3]) {
       /*
       ```python-exec:main.py
@@ -138,7 +125,7 @@ function CodeComponent({
       }
     } else if (match[3]) {
       // ファイル名指定がある場合、ファイルエディター
-      const aceLang = getAceLang(match[1]);
+      const aceLang = getAceLang(match[1] as MarkdownLang | undefined);
       return (
         <EditorComponent
           language={aceLang}
@@ -148,28 +135,20 @@ function CodeComponent({
         />
       );
     }
+    const syntaxHighlighterLang = getSyntaxHighlighterLang(
+      match[1] as MarkdownLang | undefined
+    );
     return (
-      <SyntaxHighlighter
-        language={match[1]}
-        PreTag="div"
-        className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
-        style={codetheme}
-        {...props}
-      >
+      <StyledSyntaxHighlighter language={syntaxHighlighterLang}>
         {String(props.children || "").replace(/\n$/, "")}
-      </SyntaxHighlighter>
+      </StyledSyntaxHighlighter>
     );
   } else if (String(props.children).includes("\n")) {
     // 言語指定なしコードブロック
     return (
-      <SyntaxHighlighter
-        PreTag="div"
-        className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
-        style={codetheme}
-        {...props}
-      >
+      <StyledSyntaxHighlighter language={undefined}>
         {String(props.children || "").replace(/\n$/, "")}
-      </SyntaxHighlighter>
+      </StyledSyntaxHighlighter>
     );
   } else {
     // inline

app/[docs_id]/styledSyntaxHighlighter.tsx

@@ -0,0 +1,94 @@
+import { useChangeTheme } from "./themeToggle";
+import {
+  tomorrow,
+  tomorrowNight,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import dynamic from "next/dynamic";
+
+// SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
+const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter"), {
+  ssr: false,
+});
+
+// Markdownで指定される可能性のある言語名を列挙
+export type MarkdownLang =
+  | "python"
+  | "py"
+  | "ruby"
+  | "rb"
+  | "cpp"
+  | "c++"
+  | "javascript"
+  | "js"
+  | "typescript"
+  | "ts"
+  | "bash"
+  | "sh"
+  | "json"
+  | "csv"
+  | "text"
+  | "txt";
+
+// react-syntax-highliter (hljs版) が対応している言語
+// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD を参照
+export type SyntaxHighlighterLang =
+  | "python"
+  | "ruby"
+  | "c"
+  | "cpp"
+  | "javascript"
+  | "typescript"
+  | "bash"
+  | "json";
+export function getSyntaxHighlighterLang(
+  lang: MarkdownLang | undefined
+): SyntaxHighlighterLang | undefined {
+  switch (lang) {
+    case "python":
+    case "py":
+      return "python";
+    case "ruby":
+    case "rb":
+      return "ruby";
+    case "cpp":
+    case "c++":
+      return "cpp";
+    case "javascript":
+    case "js":
+      return "javascript";
+    case "typescript":
+    case "ts":
+      return "typescript";
+    case "bash":
+    case "sh":
+      return "bash";
+    case "json":
+      return "json";
+    case "csv": // not supported
+    case "text":
+    case "txt":
+    case undefined:
+      return undefined;
+    default:
+      lang satisfies never;
+      console.warn(`Language not listed in MarkdownLang: ${lang}`);
+      return undefined;
+  }
+}
+export function StyledSyntaxHighlighter(props: {
+  children: string;
+  language: SyntaxHighlighterLang | undefined;
+}) {
+  const theme = useChangeTheme();
+  const codetheme = theme === "tomorrow" ? tomorrow : tomorrowNight;
+  return (
+    <SyntaxHighlighter
+      language={props.language}
+      PreTag="div"
+      className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
+      style={codetheme}
+    >
+      {props.children}
+    </SyntaxHighlighter>
+  );
+}

app/terminal/editor.tsx

@@ -27,6 +27,7 @@ import clsx from "clsx";
 import { useChangeTheme } from "../[docs_id]/themeToggle";
 import { useEmbedContext } from "./embedContext";
 import { langConstants } from "./runtime";
+import { MarkdownLang } from "@/[docs_id]/styledSyntaxHighlighter";
 // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
 
 // mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
@@ -39,7 +40,7 @@ export type AceLang =
   | "json"
   | "csv"
   | "text";
-export function getAceLang(lang: string | undefined): AceLang {
+export function getAceLang(lang: MarkdownLang | undefined): AceLang {
   // Markdownで指定される可能性のある言語名からAceLangを取得
   switch (lang) {
     case "python":
@@ -61,13 +62,16 @@ export function getAceLang(lang: string | undefined): AceLang {
       return "json";
     case "csv":
       return "csv";
+    case "sh":
+    case "bash":
     case "text":
     case "txt":
+    case undefined:
+      console.warn(`Ace editor mode not implemented for language: ${lang}`);
       return "text";
     default:
-      console.warn(
-        `Unsupported language for ace editor: ${lang}, fallback to text mode.`
-      );
+      lang satisfies never;
+      console.warn(`Language not listed in MarkdownLang: ${lang}`);
       return "text";
   }
 }

app/terminal/runtime.tsx

@@ -8,6 +8,7 @@ import { RubyContext, useRuby } from "./worker/ruby";
 import { JSEvalContext, useJSEval } from "./worker/jsEval";
 import { WorkerProvider } from "./worker/runtime";
 import { TypeScriptProvider, useTypeScript } from "./typescript/runtime";
+import { MarkdownLang } from "@/[docs_id]/styledSyntaxHighlighter";
 
 /**
  * Common runtime context interface for different languages
@@ -24,7 +25,10 @@ export interface RuntimeContext {
   checkSyntax?: (code: string) => Promise<SyntaxStatus>;
   splitReplExamples?: (content: string) => ReplCommand[];
   // file
-  runFiles: (filenames: string[], files: Readonly<Record<string, string>>) => Promise<ReplOutput[]>;
+  runFiles: (
+    filenames: string[],
+    files: Readonly<Record<string, string>>
+  ) => Promise<ReplOutput[]>;
   getCommandlineStr?: (filenames: string[]) => string;
 }
 export interface LangConstants {
@@ -41,7 +45,7 @@ export type RuntimeLang =
   | "typescript";
 
 export function getRuntimeLang(
-  lang: string | undefined
+  lang: MarkdownLang | undefined
 ): RuntimeLang | undefined {
   // markdownで指定される可能性のある言語名からRuntimeLangを取得
   switch (lang) {
@@ -60,8 +64,18 @@ export function getRuntimeLang(
     case "typescript":
     case "ts":
       return "typescript";
+    case "bash":
+    case "sh":
+    case "json":
+    case "csv":
+    case "text":
+    case "txt":
+    case undefined:
+      // unsupported languages
+      return undefined;
     default:
-      console.warn(`Unsupported language for runtime: ${lang}`);
+      lang satisfies never;
+      console.warn(`Language not listed in MarkdownLang: ${lang}`);
       return undefined;
   }
 }