Merge pull request #2390 from bryanjenningz/add-markdown-support-to-e…

…xercise-card-and-exercise-preview

Add markdown support to exercise card and exercise preview

__tests__/__snapshots__/storyshots.test.js.snap

@@ -5528,13 +5528,13 @@ exports[`Storyshots Components/ExerciseCard Basic 1`] = `
       >
         Problem
       </div>
-      <pre
-        className="bg-light py-3 px-4"
+      <p
+        className="d-block 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
-    className="bg-light py-2 px-3"
+  <p
+    className="d-block 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
-    className="bg-light py-2 px-3"
+  <p
+    className="d-block bg-light py-2 px-3"
   >
     const a = 5
 a = a + 10
 // what is a?
-  </pre>
+  </p>
 </section>
 `;
 

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="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>
@@ -88,14 +89,16 @@ const ExerciseCard = ({
           <hr />
           <div className="fw-bold mb-2">Answer</div>
           <div className="d-flex flex-column flex-md-row mb-2">
-            <pre
-              className={`bg-light py-3 px-4 mb-2 mb-md-0 me-md-3 ${styles.exerciseCard__section}`}
+            <Markdown
+              className={`d-block bg-light py-3 px-4 mb-2 mb-md-0 me-md-3 ${styles.exerciseCard__section}`}
             >
               {answer}
-            </pre>
-            <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
+            </Markdown>
+            <Markdown
+              className={`d-block ms-md-3 ${styles.exerciseCard__section}`}
+            >
               {explanation}
-            </div>
+            </Markdown>
           </div>
         </>
       )}

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="d-block bg-light py-2 px-3">{problem}</Markdown>
     </section>
   )
 }