From ea1a17ce355b565136233b58416a63251441e81d Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sun, 2 Oct 2022 18:31:25 -0700
Subject: [PATCH 1/4] Add markdown support to ExerciseCard and ExercisePreview

---
 components/ExerciseCard/ExerciseCard.tsx               | 7 ++++---
 components/ExercisePreviewCard/ExercisePreviewCard.tsx | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
index f2faffe9e..b2e543a33 100644
--- a/components/ExerciseCard/ExerciseCard.tsx
+++ b/components/ExerciseCard/ExerciseCard.tsx
@@ -1,3 +1,4 @@
+import Markdown from 'markdown-to-jsx'
 import React, { useState } from 'react'
 import { NewButton } from '../theme/Button'
 import { Text } from '../theme/Text'
@@ -37,7 +38,7 @@ const ExerciseCard = ({
       <div className="d-flex flex-column flex-md-row mb-2">
         <div className={`mb-0 me-md-3 ${styles.exerciseCard__section}`}>
           <div className="fw-bold mb-2">Problem</div>
-          <pre className="bg-light py-3 px-4">{problem}</pre>
+          <Markdown className="bg-light py-3 px-4">{problem}</Markdown>
         </div>
         <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
           <div className="fw-bold mt-2 mt-md-0 mb-2">Your Answer</div>
@@ -88,11 +89,11 @@ const ExerciseCard = ({
           <hr />
           <div className="fw-bold mb-2">Answer</div>
           <div className="d-flex flex-column flex-md-row mb-2">
-            <pre
+            <Markdown
               className={`bg-light py-3 px-4 mb-2 mb-md-0 me-md-3 ${styles.exerciseCard__section}`}
             >
               {answer}
-            </pre>
+            </Markdown>
             <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
               {explanation}
             </div>
diff --git a/components/ExercisePreviewCard/ExercisePreviewCard.tsx b/components/ExercisePreviewCard/ExercisePreviewCard.tsx
index aff9210c8..82634de0d 100644
--- a/components/ExercisePreviewCard/ExercisePreviewCard.tsx
+++ b/components/ExercisePreviewCard/ExercisePreviewCard.tsx
@@ -1,3 +1,4 @@
+import Markdown from 'markdown-to-jsx'
 import React from 'react'
 import styles from './exercisePreviewCard.module.scss'
 
@@ -35,7 +36,7 @@ const ExercisePreviewCard = ({
         {state && <div className={`badge ${topMessageStyle}`}>{state}</div>}
       </div>
       <div className="mb-2">Problem</div>
-      <pre className="bg-light py-2 px-3">{problem}</pre>
+      <Markdown className="bg-light py-2 px-3">{problem}</Markdown>
     </section>
   )
 }

From ae24c28b06312cb542579efb4e949d6d8f7a6f4b Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sun, 2 Oct 2022 18:37:51 -0700
Subject: [PATCH 2/4] Update snapshots

---
 __tests__/__snapshots__/storyshots.test.js.snap | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index bf535dcf4..c45062739 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -5528,13 +5528,13 @@ exports[`Storyshots Components/ExerciseCard Basic 1`] = `
       >
         Problem
       </div>
-      <pre
+      <p
         className="bg-light py-3 px-4"
       >
         let a = 5
 a = a + 10
 // what is a?
-      </pre>
+      </p>
     </div>
     <div
       className="ms-md-3 exerciseCard__section"
@@ -5692,13 +5692,13 @@ exports[`Storyshots Components/ExercisePreviewCard Answered 1`] = `
   >
     Problem
   </div>
-  <pre
+  <p
     className="bg-light py-2 px-3"
   >
     const a = 5
 a = a + 10
 // what is a?
-  </pre>
+  </p>
 </section>
 `;
 
@@ -5728,13 +5728,13 @@ exports[`Storyshots Components/ExercisePreviewCard Not Answered 1`] = `
   >
     Problem
   </div>
-  <pre
+  <p
     className="bg-light py-2 px-3"
   >
     const a = 5
 a = a + 10
 // what is a?
-  </pre>
+  </p>
 </section>
 `;
 

From 3d7616c7f0a41b69a28f7a3fdaa9f010c7e54848 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sun, 2 Oct 2022 19:43:26 -0700
Subject: [PATCH 3/4] Make markdown display block in ExercisePreview and
 ExerciseCard

---
 components/ExerciseCard/ExerciseCard.tsx               | 4 ++--
 components/ExercisePreviewCard/ExercisePreviewCard.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
index b2e543a33..84c34a8c7 100644
--- a/components/ExerciseCard/ExerciseCard.tsx
+++ b/components/ExerciseCard/ExerciseCard.tsx
@@ -38,7 +38,7 @@ const ExerciseCard = ({
       <div className="d-flex flex-column flex-md-row mb-2">
         <div className={`mb-0 me-md-3 ${styles.exerciseCard__section}`}>
           <div className="fw-bold mb-2">Problem</div>
-          <Markdown className="bg-light py-3 px-4">{problem}</Markdown>
+          <Markdown className="d-block bg-light py-3 px-4">{problem}</Markdown>
         </div>
         <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
           <div className="fw-bold mt-2 mt-md-0 mb-2">Your Answer</div>
@@ -90,7 +90,7 @@ const ExerciseCard = ({
           <div className="fw-bold mb-2">Answer</div>
           <div className="d-flex flex-column flex-md-row mb-2">
             <Markdown
-              className={`bg-light py-3 px-4 mb-2 mb-md-0 me-md-3 ${styles.exerciseCard__section}`}
+              className={`d-block bg-light py-3 px-4 mb-2 mb-md-0 me-md-3 ${styles.exerciseCard__section}`}
             >
               {answer}
             </Markdown>
diff --git a/components/ExercisePreviewCard/ExercisePreviewCard.tsx b/components/ExercisePreviewCard/ExercisePreviewCard.tsx
index 82634de0d..412d7fdfb 100644
--- a/components/ExercisePreviewCard/ExercisePreviewCard.tsx
+++ b/components/ExercisePreviewCard/ExercisePreviewCard.tsx
@@ -36,7 +36,7 @@ const ExercisePreviewCard = ({
         {state && <div className={`badge ${topMessageStyle}`}>{state}</div>}
       </div>
       <div className="mb-2">Problem</div>
-      <Markdown className="bg-light py-2 px-3">{problem}</Markdown>
+      <Markdown className="d-block bg-light py-2 px-3">{problem}</Markdown>
     </section>
   )
 }

From d84f52e090ab89e285afc9cbc98b772081ae0957 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Sun, 2 Oct 2022 20:17:44 -0700
Subject: [PATCH 4/4] Update snapshots and make ExerciseCard explanation
 support markdown

---
 __tests__/__snapshots__/storyshots.test.js.snap | 6 +++---
 components/ExerciseCard/ExerciseCard.tsx        | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index c45062739..a5c6d16e4 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -5529,7 +5529,7 @@ exports[`Storyshots Components/ExerciseCard Basic 1`] = `
         Problem
       </div>
       <p
-        className="bg-light py-3 px-4"
+        className="d-block bg-light py-3 px-4"
       >
         let a = 5
 a = a + 10
@@ -5693,7 +5693,7 @@ exports[`Storyshots Components/ExercisePreviewCard Answered 1`] = `
     Problem
   </div>
   <p
-    className="bg-light py-2 px-3"
+    className="d-block bg-light py-2 px-3"
   >
     const a = 5
 a = a + 10
@@ -5729,7 +5729,7 @@ exports[`Storyshots Components/ExercisePreviewCard Not Answered 1`] = `
     Problem
   </div>
   <p
-    className="bg-light py-2 px-3"
+    className="d-block bg-light py-2 px-3"
   >
     const a = 5
 a = a + 10
diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
index 84c34a8c7..59c2db6ad 100644
--- a/components/ExerciseCard/ExerciseCard.tsx
+++ b/components/ExerciseCard/ExerciseCard.tsx
@@ -94,9 +94,11 @@ const ExerciseCard = ({
             >
               {answer}
             </Markdown>
-            <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
+            <Markdown
+              className={`d-block ms-md-3 ${styles.exerciseCard__section}`}
+            >
               {explanation}
-            </div>
+            </Markdown>
           </div>
         </>
       )}