テーマチェンジ機能の追加

Author: Tatsu723

app/[docs_id]/markdown.tsx

@@ -5,10 +5,19 @@ import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
 import { Heading } from "./section";
 import { type AceLang, EditorComponent } from "../terminal/editor";
 import { ExecFile, ExecLang } from "../terminal/exec";
+import { ChangeTheme } from "./themeToggle";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { twilight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 export function StyledMarkdown({ content }: { content: string }) {
-  const syntaxtheme = ChangeTheme() === "twilight" ? vscDarkPlus : prism;
+  const syntaxtheme = ChangeTheme() === "twilight" ? tomorrow : twilight;
+  return (
+    <Markdown remarkPlugins={[remarkGfm]} components={components}>
+      {content}
+    </Markdown>
+  );
+}
+
 
 // TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
 const components: Components = {

app/terminal/editor.tsx

@@ -87,7 +87,7 @@ export function EditorComponent(props: EditorProps) {
       <AceEditor
         name={`ace-editor-${props.filename}`}
         mode={props.language}
-        theme="tomorrow" // TODO dark theme (twilightがいいんじゃないかと勝手に思っている)
+        theme={ChangeTheme()}
         tabSize={props.tabSize}
         width="100%"
         height={