fix(client): project euler mathjax (#57292)

client/src/templates/Challenges/classic/show.tsx

@@ -394,6 +394,8 @@ function ShowClassic({
           <ChallengeDescription
             description={description}
             instructions={instructions}
+            superBlock={superBlock}
+            block={block}
           />
         }
         challengeTitle={

client/src/templates/Challenges/components/challenge-description.tsx

@@ -6,18 +6,28 @@ import './challenge-description.css';
 type Props = {
   description?: string;
   instructions?: string;
+  superBlock?: string;
+  block?: string;
+};
+const ChallengeDescription = ({
+  description,
+  instructions,
+  superBlock,
+  block
+}: Props) => {
+  const sbClass = superBlock ? superBlock : '';
+  const bClass = block ? block : '';
+  return (
+    <div
+      className={`challenge-instructions ${sbClass} ${bClass}`}
+      data-playwright-test-label='challenge-description'
+    >
+      {description && <PrismFormatted text={description} />}
+      {instructions && description && <hr />}
+      {instructions && <PrismFormatted text={instructions} />}
+    </div>
+  );
 };
-
-const ChallengeDescription = ({ description, instructions }: Props) => (
-  <div
-    className={'challenge-instructions'}
-    data-playwright-test-label='challenge-description'
-  >
-    {description && <PrismFormatted text={description} />}
-    {instructions && description && <hr />}
-    {instructions && <PrismFormatted text={instructions} />}
-  </div>
-);
 
 ChallengeDescription.displayName = 'ChallengeDescription';