diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 5ca8442d0b8..5c8c887addb 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/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 = () => { diff --git a/client/src/templates/Challenges/components/side-panel.tsx b/client/src/templates/Challenges/components/side-panel.tsx index 2e141bc5525..cca3e69d768 100644 --- a/client/src/templates/Challenges/components/side-panel.tsx +++ b/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; 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 ( diff --git a/client/src/utils/math-jax.ts b/client/src/utils/math-jax.ts new file mode 100644 index 00000000000..3d9b6313f10 --- /dev/null +++ b/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, ''); +}; diff --git a/client/src/utils/script-loaders.ts b/client/src/utils/script-loaders.ts index 7f337181f65..6bcc8b941d5 100644 --- a/client/src/utils/script-loaders.ts +++ b/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') - ]);` - ); -} diff --git a/client/utils/tags.tsx b/client/utils/tags.tsx index f11d94c0aba..9984913f37a 100644 --- a/client/utils/tags.tsx +++ b/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); }