fix(client): render MathJax in jaws header (#53370)

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

@@ -62,6 +62,7 @@ import {
   enhancePrismAccessibility,
   setScrollbarArrowStyles
 } from '../utils/index';
+import { initializeMathJax } from '../../../utils/math-jax';
 import { getScrollbarWidth } from '../../../utils/scrollbar-width';
 import { isProjectBased } from '../../../utils/curriculum-layout';
 import LowerJaw from './lower-jaw';
@@ -395,6 +396,7 @@ const Editor = (props: EditorProps): JSX.Element => {
       addContentChangeListener();
       resetAttempts();
       showEditableRegion(editor);
+      initializeMathJax();
     }
 
     const storedAccessibilityMode = () => {

client/src/templates/Challenges/components/side-panel.tsx

@@ -3,7 +3,8 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Test } from '../../../redux/prop-types';
 
-import { mathJaxScriptLoader } from '../../../utils/script-loaders';
+import { SuperBlocks } from '../../../../../shared/config/superblocks';
+import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import TestSuite from './test-suite';
 import ToolPanel from './tool-panel';
@@ -23,7 +24,7 @@ interface SidePanelProps {
   guideUrl: string;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
   showToolPanel: boolean;
-  superBlock: string;
+  superBlock: SuperBlocks;
   tests: Test[];
   videoUrl: string;
 }
@@ -40,36 +41,11 @@ export function SidePanel({
   videoUrl
 }: SidePanelProps): JSX.Element {
   useEffect(() => {
-    const MathJax = global.MathJax;
-    const mathJaxMountPoint = document.querySelector('#mathjax');
     const mathJaxChallenge =
       block === 'rosetta-code' ||
-      superBlock === 'project-euler' ||
+      superBlock === SuperBlocks.ProjectEuler ||
       block === 'intermediate-algorithm-scripting';
-    if (MathJax) {
-      // Configure MathJax when it's loaded and
-      // users navigate from another challenge
-      MathJax.Hub.Config({
-        tex2jax: {
-          inlineMath: [
-            ['$', '$'],
-            ['\\(', '\\)']
-          ],
-          processEscapes: true,
-          processClass:
-            'rosetta-code|project-euler|intermediate-algorithm-scripting'
-        }
-      });
-      MathJax.Hub.Queue([
-        'Typeset',
-        MathJax.Hub,
-        document.querySelector('.intermediate-algorithm-scripting'),
-        document.querySelector('.rosetta-code'),
-        document.querySelector('.project-euler')
-      ]);
-    } else if (!mathJaxMountPoint && mathJaxChallenge) {
-      mathJaxScriptLoader();
-    }
+    initializeMathJax(mathJaxChallenge);
   }, [block, superBlock]);
 
   return (

client/src/utils/math-jax.ts

@@ -0,0 +1,51 @@
+import { scriptLoader } from './script-loaders';
+
+export const mathJaxSrc =
+  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML';
+
+export const isMathJaxAllowed = (pathname: string) =>
+  [
+    '/learn/javascript-algorithms-and-data-structures-v8',
+    '/learn/project-euler/',
+    '/learn/rosetta-code',
+    '/learn/scientific-computing-with-python'
+  ].some(allowedPath => pathname.includes(allowedPath));
+
+const configure = () => {
+  if (!global.MathJax) return;
+  const MathJax = global.MathJax;
+  MathJax.Hub.Config({
+    tex2jax: {
+      inlineMath: [
+        ['$', '$'],
+        ['\\(', '\\)']
+      ],
+      processEscapes: true,
+      processClass:
+        'rosetta-code|project-euler|intermediate-algorithm-scripting|description-container'
+    }
+  });
+  MathJax.Hub.Queue([
+    'Typeset',
+    MathJax.Hub,
+    document.querySelector('.intermediate-algorithm-scripting'),
+    document.querySelector('.rosetta-code'),
+    document.querySelector('.project-euler'),
+    document.querySelector('.description-container')
+  ]);
+};
+
+export const initializeMathJax = (mathJaxChallenge = true) => {
+  const mathJaxMountPoint = document.querySelector('#mathjax');
+  if (global.MathJax) {
+    // Configure MathJax when it's loaded and
+    // users navigate from another challenge
+    configure();
+  } else if (!mathJaxMountPoint && mathJaxChallenge) {
+    mathJaxScriptLoader();
+  }
+};
+
+export const mathJaxScriptLoader = () => {
+  scriptLoader('mathjax', false, mathJaxSrc, configure, '');
+};

client/src/utils/script-loaders.ts

@@ -21,27 +21,3 @@ export function scriptRemover(id: string): void {
     script.remove();
   }
 }
-
-export function mathJaxScriptLoader(): void {
-  scriptLoader(
-    'mathjax',
-    false,
-    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
-      '2.7.4/MathJax.js?config=TeX-AMS_HTML',
-    null,
-    `MathJax.Hub.Config({
-      tex2jax: {
-        inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
-        processEscapes: true,
-        processClass: 'rosetta-code|project-euler|intermediate-algorithm-scripting'
-      }
-    });
-    MathJax.Hub.Queue([
-      'Typeset',
-      MathJax.Hub,
-      document.querySelector('intermediate-algorithm-scripting'),
-      document.querySelector('.rosetta-code'),
-      document.querySelector('.project-euler')
-    ]);`
-  );
-}

client/utils/tags.tsx

@@ -2,6 +2,8 @@ import { withPrefix } from 'gatsby';
 import i18next from 'i18next';
 import React from 'react';
 
+import { isMathJaxAllowed, mathJaxSrc } from '../src/utils/math-jax';
+
 export function getheadTagComponents(): JSX.Element[] {
   const socialImage =
     'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png';
@@ -59,15 +61,12 @@ export function getPostBodyComponents(pathname: string): JSX.Element[] {
       async={false}
       id='mathjax'
       key='mathjax'
-      src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'
+      src={mathJaxSrc}
       type='text/javascript'
     />
   );
 
-  if (
-    pathname.includes('/learn/rosetta-code') ||
-    pathname.includes('/learn/project-euler/')
-  ) {
+  if (isMathJaxAllowed(pathname)) {
     scripts.push(mathJaxScriptElement);
   }