POC: Parsing markdown and applying styles/components manually without react-markdown

Author: JackTench

package-lock.json

@@ -17,10 +17,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.548.0",
+    "mdast-util-from-markdown": "^2.0.2",
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-markdown": "^10.1.0",
     "react-router": "^7.9.4",
     "tailwind-merge": "^3.3.1"
   },

package.json

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import Markdown from "react-markdown";
+import { MarkdownToJSX } from "@/lib/markdown";
 
 export function AppGitHubReadme() {
   const [readme, setReadme] = useState<string>("Loading...");
@@ -24,7 +24,7 @@ export function AppGitHubReadme() {
 
   return (
     <div>
-      <Markdown>{readme}</Markdown>
+      <MarkdownToJSX content={readme} />
     </div>
   );
 }

src/components/libresplit/AppGitHubReadme.tsx

@@ -0,0 +1,18 @@
+import { fromMarkdown } from "mdast-util-from-markdown";
+
+export function MarkdownToJSX({ content }: { content: string }) {
+  const tree = fromMarkdown(content);
+
+  function renderNode(node: any): React.ReactNode {
+    switch (node.type) {
+      case "paragraph":
+        return <p className="text-red-500">{node.children.map(renderNode)}</p>;
+      case "text":
+        return node.value;
+      default:
+        return node.children?.map(renderNode);
+    }
+  }
+
+  return <div>{tree.children.map(renderNode)}</div>;
+}