Render markdown for problems in code editor mode

Author: aahnik

bun.lock

@@ -30,6 +30,7 @@ import {
   ResizableHandle,
 } from "@/components/ui/resizable";
 import { mockProblems, Problem } from "@/app/[orgId]/problems/mockProblems";
+import Markdown from "react-markdown";
 
 const themes = {
   "VS Code Dark": vscodeDark,
@@ -54,7 +55,7 @@ const defaultCode = {
 using namespace std;
 
 int main() {
-  
+
 }`,
 };
 
@@ -370,7 +371,7 @@ export function CodeEditor({ problem }: CodeEditorProps) {
                   {problem?.title}
                 </h1>
                 <p className="text-sm text-foreground">
-                  {problem?.description}
+                  <Markdown>{problem?.description}</Markdown>
                 </p>
               </div>
             </div>

components/code-editor.tsx

@@ -91,6 +91,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18",
     "react-hook-form": "^7.53.2",
+    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^2.1.7",
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.14.1",