fix: render markdown in lesson instruction and worked example text (#113)

Course YAML supports markdown in instructionText and workedExampleText
per the schema docs, but the lesson UI was rendering it as plain text.
Added a MarkdownText component using react-markdown + remark-gfm and
replaced the plain <p> renders in lesson-flow.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: willwearing

apps/web/package.json

@@ -27,7 +27,9 @@
     "posthog-node": "^5.28.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-markdown": "^10.1.0",
     "recharts": "^3.8.0",
+    "remark-gfm": "^4.0.1",
     "shadcn": "^4.0.2",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"

apps/web/src/components/app/lesson-flow.tsx

@@ -11,6 +11,7 @@ import { useAudioPlayer } from "@/lib/hooks/use-audio-player";
 import { useLessonAudio } from "@/lib/hooks/use-lesson-audio";
 import { trackLessonComplete, trackLessonStarted, trackLessonPracticeAnswered, trackLessonAudioPlayed, trackLessonAbandoned } from "@/lib/posthog/events";
 import { LessonRichContent } from "@/components/app/lesson-rich-content";
+import { MarkdownText } from "@/components/app/markdown-text";
 import type { Problem, ProblemAnswer, RichContentBlock } from "@/lib/types";
 
 interface KnowledgePoint {
@@ -222,7 +223,7 @@ export function LessonFlow({ orgSlug, courseId, token, lesson, continueHref }: L
             <BookOpen className="h-4 w-4" />
             Instruction
           </div>
-          <p className="text-foreground leading-relaxed whitespace-pre-line">{kp.instructionText}</p>
+          <MarkdownText>{kp.instructionText}</MarkdownText>
           <LessonRichContent blocks={instructionContent} />
 
           {/* Audio playback */}
@@ -271,7 +272,7 @@ export function LessonFlow({ orgSlug, courseId, token, lesson, continueHref }: L
       {phase === "worked-example" && kp.workedExampleText && (
         <div className="rounded-lg border border-border bg-muted/20 p-6 space-y-2">
           <p className="text-sm font-medium text-muted-foreground">Worked Example</p>
-          <p className="text-foreground leading-relaxed whitespace-pre-line">{kp.workedExampleText}</p>
+          <MarkdownText>{kp.workedExampleText}</MarkdownText>
           <LessonRichContent blocks={workedExampleContent} />
         </div>
       )}

apps/web/src/components/app/markdown-text.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface MarkdownTextProps {
+  children: string;
+  className?: string;
+}
+
+/**
+ * Renders markdown text with Tailwind-friendly styling.
+ * Used for lesson instruction and worked example fields, which
+ * support markdown per the course schema.
+ */
+export function MarkdownText({ children, className }: MarkdownTextProps) {
+  return (
+    <div
+      className={
+        className ??
+        "text-foreground leading-relaxed space-y-3 [&_strong]:font-semibold [&_em]:italic [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-sm [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-1 [&_a]:text-primary [&_a]:underline"
+      }
+    >
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{children}</ReactMarkdown>
+    </div>
+  );
+}