ocaml-sf · MNassimM · Feb 1, 2025 · Feb 4, 2025 · Feb 7, 2025
diff --git a/demo-repository/exercises/demo/descr.html b/demo-repository/exercises/demo/descr.html
@@ -78,3 +78,26 @@ <h2>The task</h2>
   So don't worry, you can try and break the system as much as you
   want, it should not break anything on our servers.
 </p>
+
+<h2>Displaying Mathematical Formulas</h2>
+
+<p>
+  This environment supports mathematical notation using MathJax.
+  To write a mathematical expression, you can use:
+</p>
+
+<ul>
+  <li>For <strong>inline math</strong>, enclose your expression between single dollar signs: <code>$...$</code>, or between escaped parentheses: <code>\(...\)</code>.</li>
+  <li>For <strong>displayed equations</strong> (centered on a new line), use double dollar signs: <code>$$...$$</code>, or escaped brackets: <code>\[...\]</code>.</li>
+</ul>
+
+<p>Example:</p>
+
+<ul>
+  <li>Inline formula: <code>$E = mc^2$</code> or <code>\(E = mc^2\)</code> → renders as: \(E = mc^2\).</li>
+  <li>Displayed formula: <code>$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$</code> or <code>\[\sum_{i=1}^{n} i = \frac{n(n+1)}{2}\]</code> → renders as:
+    \[
+    \sum_{i=1}^{n} i = \frac{n(n+1)}{2}
+    \]
+  </li>
+</ul>
diff --git a/src/app/learnocaml_common.ml b/src/app/learnocaml_common.ml
@@ -399,7 +399,7 @@ let render_rich_text ?on_runnable_clicked text =
     | Image _ :: _ -> assert false
     | Math code :: rest ->
         render
-          (H.txt ("`" ^ code ^ "`") :: acc)
+          (H.txt (" $" ^ code ^ "$ ") :: acc)
           rest in
   (render [] text
    :> [< Html_types.phrasing > `Code `Em `PCDATA ] H.elt list)
@@ -589,18 +589,17 @@ let stars_div stars =
 
 let exercise_text ex_meta exo =
   let mathjax_url =
-    api_server ^ "/js/mathjax/MathJax.js?delayStartupUntil=configured"
+    api_server ^ "/js/mathjax/es5/tex-chtml.js"
   in
   let mathjax_config =
-    "MathJax.Hub.Config({\n\
-    \  jax: [\"input/AsciiMath\", \"output/HTML-CSS\"],\n\
-    \  extensions: [],\n\
-    \  showMathMenu: false,\n\
-    \  showMathMenuMSIE: false,\n\
-    \  \"HTML-CSS\": {\n\
-    \    imageFont: null\n\
-    \  }
-          });"
+    "MathJax = {\n\
+    \  tex: {\n\
+    \    inlineMath: [[\"$\", \"$\"], [\"\\\\(\", \"\\\\)\"]]\n\
+    \  },\n\
+    \  svg: {\n\
+    \    fontCache: \"global\"\n\
+    \  }\n\
+    };"
     (* the following would allow comma instead of dot for the decimal separator,
        but should depend on the language the exercise is in, not the language of the
        app
@@ -625,13 +624,12 @@ let exercise_text ex_meta exo =
      <title>%s - exercise text</title>\
      <meta charset='UTF-8'>\
      <link rel='stylesheet' href='%s/css/learnocaml_standalone_description.css'>\
-     <script type='text/x-mathjax-config'>%s</script>
-            <script type='text/javascript' src='%s'></script>\
+     <script>%s</script>
+            <script type=\"text/javascript\" id=\"MathJax-script\" async src='%s'></script>\
      </head>\
      <body>\
      %s\
      </body>\
-     <script type='text/javascript'>MathJax.Hub.Configured()</script>\
      </html>"
     ex_meta.Exercise.Meta.title
     api_server

diff --git a/src/app/learnocaml_index_main.ml b/src/app/learnocaml_index_main.ml
@@ -536,6 +536,8 @@ let tutorial_tab : tab_handler =
   let next_button_state = button_state () in
   let prev_step_button_state = button_state () in
   let next_step_button_state = button_state () in
+  let reload_mathjax () =
+      ignore (Js.Unsafe.meth_call (Js.Unsafe.pure_js_expr "MathJax") "typeset" [||]) in
   let load_tutorial tutorial_name step_id () =
     retrieve ~ignore:{Tutorial.title = []; steps = []}
       (Learnocaml_api.Tutorial tutorial_name) >>= fun { Tutorial.steps; _ } ->
@@ -600,6 +602,7 @@ let tutorial_tab : tab_handler =
           phrases in
       render_phrases step.step_contents in
     Manip.replaceChildren step_items_container items ;
+    reload_mathjax () ;
     toplevel_launch >>= fun top ->
     Learnocaml_toplevel.scroll top ;
     Lwt.return () in

diff --git a/static/index.html b/static/index.html
@@ -11,6 +11,16 @@
     <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8" defer></script>
     <script language="JavaScript" src="/js/learnocaml-config.js"></script>
     <script language="JavaScript" src="/js/learnocaml-main.js" defer></script>
+    <script>
+      MathJax = {
+        tex: {
+          inlineMath: [["$", "$"], ["\\(", "\\)"]]
+        },
+        svg: {
+          fontCache: "global"
+        }
+      };</script>
+      <script id="MathJax-script" src="/js/mathjax/es5/tex-chtml.js"></script>
   </head>
   <body>
     <div style="display:none">

diff --git a/static/js/mathjax/.gitignore b/static/js/mathjax/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+
diff --git a/static/js/mathjax/.travis.yml b/static/js/mathjax/.travis.yml
@@ -0,0 +1,17 @@
+dist: focal
+language: node_js
+node_js:
+  - stable
+sudo: false
+script:
+  - npm test
+branches:
+  only:
+  - "/^\\d+\\.\\d+/"
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: rdvJ27qbw4DZJl49NSf/ybkeHWNWnk2MajS8Y8bMKwI8RaDyEGcAm3frA+CfBw+YHWl71KRJlQHL69YgVwp1nMSzKrGOpwrbL3TMFrFMdBC6tJ30dX1HSvAg9eU5K12E5672MM8qkTwJdYXsvEcyYlzRR+sogR8jTWRl3APuAwY=
+  on:
+    tags: true