Merge pull request #90 from microsoft/sethjuarez/web

corrected mermaid styling
microsoft · Sep 16, 2024 · 44a03e0 · 44a03e0
2 parents fce3e3f + 4ed712e
commit 44a03e0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 28 deletions.
diff --git a/web/src/components/code.tsx b/web/src/components/code.tsx
@@ -65,17 +65,22 @@ const Code = ({ language, code }: Props) => {
       </div>
       <SyntaxHighlighter
         codeTagProps={{
-          className: "text-xs md:text-sm xl:text-base text-zinc-800 dark:text-sky-200 text-left",
+          className:
+            "text-xs md:text-sm xl:text-base text-zinc-800 dark:text-sky-200 text-left",
         }}
         customStyle={{
           background: theme === "dark" ? "#18181b" : "#f4f4f5",
           border: "none",
           padding: "0",
+          fontStyle: "normal",
         }}
         style={theme === "dark" ? vscDarkPlus : vs}
         language={language}
         showLineNumbers={true}
         wrapLongLines={true}
+        lineNumberStyle={{
+          fontStyle: "normal",
+        }}
       >
         {code}
       </SyntaxHighlighter>

diff --git a/web/src/components/mermaid.tsx b/web/src/components/mermaid.tsx
@@ -3,46 +3,29 @@ import clsx from "clsx";
 import { useEffect, useState } from "react";
 import mermaid from "mermaid";
 import { useTheme } from "next-themes";
+import RenderResult from "next/dist/server/render-result";
 
 type Props = {
   code: string;
 };
 
-let loaded = false;
-
 const Mermaid = ({ code }: Props) => {
   const { theme } = useTheme();
   const [svg, setSvg] = useState<string>("");
 
   useEffect(() => {
-    const init = async () => {
-      mermaid.initialize({
-        startOnLoad: false,
-        //theme: "base",
-        //darkMode: false,
-        themeVariables: {
-          //fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji',    
-          //fontSize: "32px",    
-        },
-      });
-      const { svg } = await mermaid.render("graphDiv", code);
-      setSvg(svg);
-    };
-
-    if (!loaded) {
-      console.log(theme);
-      init();
-      loaded = true;
-    }
-
-  }, [code]);
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: theme === "dark" ? "dark" : "default",
+    });
+    mermaid.render("graphDiv", code).then((result) => {
+      setSvg(result.svg);
+    });
+  }, [code, theme]);
 
   return (
     <div
-      className={clsx(
-        "bg-zinc-50 rounded-xl p-3 mb-3 dark:border dark:border-zinc-800",
-        svg === "" ? "hidden" : "block"
-      )}
+      className={clsx(svg === "" ? "hidden" : "block")}
       dangerouslySetInnerHTML={{ __html: svg }}
     ></div>
   );