feat: enhance code rendering in MarkdownRenderer

recally-io · Sep 8, 2024 · e141db1 · e141db1
1 parent fe5c2f9
commit e141db1
Showing 1 changed file with 33 additions and 17 deletions.
diff --git a/web/src/components/markdown-renderer.jsx b/web/src/components/markdown-renderer.jsx
@@ -13,27 +13,43 @@ export function MarkdownRenderer({ content }) {
       remarkPlugins={[remarkGfm]}
       components={{
         code({ children, className, node, ...rest }) {
+          // Extract language from className if present
           const match = /language-(\w+)/.exec(className || "");
+          // Remove trailing newline from code content
           const code = String(children).replace(/\n$/, "");
-          if (!className && !match) {
+          console.log(className, match, code);
+          // If no className or language match, render as inline code
+          if (!className) {
+            if (code.includes("\n")) {
+              return (
+                <CodeHighlight code={code} {...rest} withCopyButton={false} />
+              );
+            }
             return <Code {...rest}>{code}</Code>;
           }
-          return match ? (
-            <Box pos="relative">
-              <CodeHighlight
-                code={code}
-                language={match[1]}
-                withCopyButton={false}
-                {...rest}
-              />
-              <Group pos="absolute" right="10px" top="10px" size="xs">
-                <Badge>{match[1]}</Badge>
-                <CopyBtn data={code} />
-              </Group>
-            </Box>
-          ) : (
-            <CodeHighlight code={code} {...rest} withCopyButton={false} />
-          );
+
+          // If language match is found
+          if (match) {
+            return (
+              <Box pos="relative">
+                {/* Render code with syntax highlighting */}
+                <CodeHighlight
+                  code={code}
+                  language={match[1]}
+                  withCopyButton={false}
+                  {...rest}
+                />
+                {/* Add language badge and copy button */}
+                <Group pos="absolute" right="10px" top="10px" size="xs">
+                  <Badge>{match[1]}</Badge>
+                  <CopyBtn data={code} />
+                </Group>
+              </Box>
+            );
+          }
+
+          // If no language match, render use default syntax highlighting
+          return <CodeHighlight code={code} {...rest} withCopyButton={false} />;
         },
       }}
     />