feat: enable MathJax for Project Euler challenges (#38017)

* feat: enable MathJax for Project Euler challenges

Enables MathJax to render mathematical formulae for some Project Euler problems

* refactor: DRY out script insertion

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/gatsby-ssr.js

@@ -64,7 +64,10 @@ export const onRenderBody = ({
     />
   ];
 
-  if (pathname.includes('/learn/coding-interview-prep/rosetta-code')) {
+  if (
+    pathname.includes('/learn/coding-interview-prep/rosetta-code') ||
+    pathname.includes('/learn/coding-interview-prep/project-euler')
+  ) {
     scripts.push(
       <script
         async={false}

client/src/templates/Challenges/components/Side-Panel.js

@@ -37,7 +37,9 @@ export class SidePanel extends Component {
   componentDidMount() {
     const MathJax = global.MathJax;
     const mathJaxMountPoint = document.querySelector('#mathjax');
-    const rosettaCodeChallenge = this.props.section === 'rosetta-code';
+    const mathJaxChallenge =
+      this.props.section === 'rosetta-code' ||
+      this.props.section === 'project-euler';
     if (MathJax) {
       // Configure MathJax when it's loaded and
       // users navigate from another challenge
@@ -45,15 +47,16 @@ export class SidePanel extends Component {
         tex2jax: {
           inlineMath: [['$', '$'], ['\\(', '\\)']],
           processEscapes: true,
-          processClass: 'rosetta-code'
+          processClass: 'rosetta-code|project-euler'
         }
       });
       MathJax.Hub.Queue([
         'Typeset',
         MathJax.Hub,
-        document.querySelector('.rosetta-code')
+        document.querySelector('.rosetta-code'),
+        document.querySelector('.project-euler')
       ]);
-    } else if (!mathJaxMountPoint && rosettaCodeChallenge) {
+    } else if (!mathJaxMountPoint && mathJaxChallenge) {
       mathJaxScriptLoader();
     }
   }

client/src/utils/scriptLoaders.js

@@ -39,12 +39,13 @@ export const mathJaxScriptLoader = () =>
       tex2jax: {
         inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
         processEscapes: true,
-        processClass: 'rosetta-code'
+        processClass: 'rosetta-code|project-euler'
       }
     });
     MathJax.Hub.Queue([
       'Typeset',
       MathJax.Hub,
-      document.querySelector('.rosetta-code')
+      document.querySelector('.rosetta-code'),
+      document.querySelector('.project-euler')
     ]);`
   );