Add MathJax to properly format code

.gitignore

@@ -375,3 +375,5 @@ output
 
 # content dumped from ZIM file to test ZIM UI
 zimui/public/content
+zimui/public/mathjax
+scraper/src/fcc2zim/mathjax

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove obsolete/missing arabic code
 - Add missing support for swahili (#66)
 - Do not parse the whole markdown as YAML, but only the frontmatter (#64)
+- Properly parse/present mathjax code (#57)
 
 ## [1.2.0] - 2025-01-16
 

CONTRIBUTING.md

@@ -58,10 +58,10 @@ docker run --rm -it -v "$PWD/output":/output local-freecodecamp fcc2zim --course
 Extract interesting ZIM content and move it to `public` folder.
 
 ```
-rm -rf zimui/public/content
+rm -rf zimui/public/content zimui/public/mathjax
 docker run -it --rm -v $(pwd)/output:/data ghcr.io/openzim/zim-tools:latest zimdump dump --dir=/data/tests_en_freecodecamp /data/tests_en_freecodecamp.zim
 sudo chown -R $(id -u -n):$(id -g -n) output/tests_en_freecodecamp
-mv output/tests_en_freecodecamp/content zimui/public
+mv output/tests_en_freecodecamp/content output/tests_en_freecodecamp/mathjax zimui/public
 rm -rf output/tests_en_freecodecamp
 ```
 
@@ -74,8 +74,6 @@ yarn dev
 
 Do not forget to cleanup `public/content` folder before building the docker image again, otherwise all assets will be pushed to the ZIM.
 
-Note that some assets (e.g. icomoon fonts on LibreTexts Geoscience) having a question mark in their URL are not properly working in the yarn dev server. This is OK inside the ZIM. See https://github.com/openzim/mindtouch/issues/34.
-
 ```
 rm -rf zimui/public/content
 ```

scraper/openzim.toml

@@ -0,0 +1,9 @@
+[files.assets.config]
+target_dir="src/fcc2zim"
+
+[files.assets.actions."mathjax"]
+action="extract_items"
+source="https://github.com/mathjax/MathJax/archive/refs/tags/3.2.2.zip"
+zip_paths=["MathJax-3.2.2"]
+target_paths=["mathjax"]
+remove = ["mathjax/.github","mathjax/.gitignore","mathjax/.travis.yml","mathjax/bower.json","mathjax/composer.json","mathjax/CONTRIBUTING.md","mathjax/package.json"]

scraper/pyproject.toml

@@ -1,5 +1,5 @@
 [build-system]
-requires = ["hatchling", "hatch-openzim==0.2.1"]
+requires = ["hatchling", "hatch-openzim>=0.2.0"]
 build-backend = "hatchling.build"
 
 [project]
@@ -19,6 +19,8 @@ dynamic = ["authors", "classifiers", "keywords", "license", "version", "urls"]
 kind = "scraper"
 additional-keywords = ["fcc","freecodecamp"]
 
+[tool.hatch.build.hooks.openzim-build]
+
 [project.optional-dependencies]
 scripts = [
   "invoke==2.2.0",

scraper/src/fcc2zim/build.py

@@ -57,6 +57,20 @@ def build_command(
 ):
     logger.info("Scraper: build phase starting")
 
+    mathjax = (Path(__file__) / "../mathjax").resolve()
+    count_mathjax_files = len(list(mathjax.rglob("*")))
+    logger.info(f"Adding {count_mathjax_files} MathJax files in {mathjax}")
+    for file in mathjax.rglob("*"):
+        if not file.is_file():
+            continue
+        path = str(Path(file).relative_to(mathjax.parent))
+        logger.debug(f"Adding {path} to ZIM")
+        creator.add_item_for(
+            path=path,
+            fpath=file,
+            is_front=False,
+        )
+
     # Add zimui files
     for file in zimui_dist.rglob("*"):
         if file.is_dir():

zimui/public/custom.css

@@ -26,3 +26,7 @@ a[href^="https://"]:after
   background-repeat: no-repeat;
   margin-left: 5px;
 }
+
+.MathJax svg {
+  display: inline;
+}

zimui/src/services/mathjax.ts

@@ -0,0 +1,43 @@
+/*
+Service to handle DOM manipulation to add/remove MathJax everytime needed.
+
+This is a bit hackhish to remove and and back MathJax, but it is the only reliable
+solution found so far, and probably the most robust one.
+
+The dynamic behavior of removing / adding back MathJax is wanted/necessary because we
+need to dynamically set the PageIndex macro to dynamically display proper figures
+/ equations / ... numbering.
+
+MathJax settings are an adaptation of libretexts.org settings, for MathJax 3 (including
+extensions now removed or not yet supported or included by default).
+*/
+
+class MathJaxService {
+  removeMathJax() {
+    const script = document.getElementById('mathjax-script')
+    if (script) script.remove()
+    if (window.MathJax) delete window.MathJax
+  }
+
+  addMathJax() {
+    window.MathJax = {
+      tex: {
+        inlineMath: [
+          ['$', '$'],
+          ['\\(', '\\)']
+        ],
+        processEscapes: true
+      }
+    }
+    const script = document.createElement('script', {
+      id: 'mathjax-script'
+    } as ElementCreationOptions)
+    script.src = './mathjax/es5/tex-svg.js'
+    document.head.appendChild(script)
+  }
+}
+
+const mathjaxService = new MathJaxService()
+Object.freeze(mathjaxService)
+
+export default mathjaxService

zimui/src/stores/main.ts

@@ -4,6 +4,7 @@ import type { Locales } from '../types/locales.ts'
 import type { ChallengeInfo, ChallengesMeta } from '../types/challenges.ts'
 import { parseChallenge } from '@/utils/parseChallenge.ts'
 import type { Challenge } from '@/utils/parseChallenge.ts'
+import mathjaxService from '@/services/mathjax'
 
 export type RootState = {
   locales: Locales | null
@@ -98,6 +99,8 @@ export const useMainStore = defineStore('main', {
           this.isLoading = false
           this.challenge = parseChallenge(response.data as string)
           this.resetSolution()
+          mathjaxService.removeMathJax()
+          mathjaxService.addMathJax()
         },
         (error) => {
           this.isLoading = false

zimui/src/types/mathjax.d.ts

@@ -0,0 +1,9 @@
+//  declare window.MathJax so that we can manipulate it without TS errors
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    MathJax: any
+  }
+}
+
+export {}