Support MathJaX v3 (#1221)

* Support MathJaX v3

* Update configuration of MathJaX

* Update config to export HTML

* Reset numbering

* Add scale option

* Fix typo

src/resources/hoedown.js

@@ -100,13 +100,14 @@ var updateHtml = function(html) {
     // finishLoading logic.
     // MathJax may be not loaded for now.
     if (VEnableMathjax && (typeof MathJax != "undefined")) {
-        try {
+        MathJax.texReset();
-            MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX],
+        MathJax
-                              ["Typeset", MathJax.Hub, contentDiv, postProcessMathJax]);
+            .typesetPromise([contentDiv])
-        } catch (err) {
+            .then(postProcessMathJax)
+            .catch(function (err) {
                 content.setLog("err: " + err);
                 finishOneAsyncJob();
-        }
+            });
     } else {
         finishOneAsyncJob();
     }

src/resources/markdown-it.js

@@ -195,13 +195,14 @@ var updateText = function(text) {
             eles.push(texToRender[i]);
         }
 
-        try {
+        MathJax.texReset();
-            MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX],
+        MathJax
-                              ["Typeset", MathJax.Hub, eles, postProcessMathJax]);
+            .typesetPromise(eles)
-        } catch (err) {
+            .then(postProcessMathJax)
+            .catch(function (err) {
                 content.setLog("err: " + err);
                 finishOneAsyncJob();
-        }
+            });
     } else {
         finishOneAsyncJob();
     }
@@ -244,7 +245,7 @@ var handleMetaData = function() {
 };
 
 var postProcessMathJaxWhenMathjaxReady = function() {
-    var all = MathJax.Hub.getAllJax();
+    var all = Array.from(MathJax.startup.document.math);
     for (var i = 0; i < all.length; ++i) {
         var node = all[i].SourceElement().parentNode;
         if (VRemoveMathjaxScript) {
@@ -281,11 +282,12 @@ var handleMathjaxReady = function() {
         eles.push(texToRender[i]);
     }
 
-    try {
+    MathJax.texReset();
-        MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX],
+    MathJax
-                          ["Typeset", MathJax.Hub, eles, postProcessMathJaxWhenMathjaxReady]);
+        .typesetPromise(eles)
-    } catch (err) {
+        .then(postProcessMathJaxWhenMathjaxReady)
+        .catch(function (err) {
             content.setLog("err: " + err);
             finishOneAsyncJob();
-    }
+        });
 };

src/resources/markdown_template.html

@@ -29,7 +29,14 @@
     <script src="qrc:/utils/highlightjs/highlight.pack.js"></script>
     <script src="qrc:/utils/clipboard.js/clipboard.min.js"></script>
     <!-- EXTRA_PLACE_HOLDER -->
-    <script src="JS_PLACE_HOLDER" defer></script>
+    <script>
+        MathJax = {
+          tex: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']]
+          }
+        };
+    </script>
+    <script src="JS_PLACE_HOLDER" defer id="MathJax-script"></script>
     <script src="qrc:/resources/common.js" defer></script>
     <script src="qrc:/resources/view_image.js" defer></script>
     <script src="qrc:/resources/markdown_template.js" defer></script>

src/resources/markdown_template.js

@@ -1385,7 +1385,7 @@ var getHtmlWithInlineStyles = function(container) {
 // Will be called after MathJax rendering finished.
 // Make <pre><code>math</code></pre> to <p>math</p>
 var postProcessMathJax = function() {
-    var all = MathJax.Hub.getAllJax();
+    var all = Array.from(MathJax.startup.document.math);
     for (var i = 0; i < all.length; ++i) {
         var node = all[i].SourceElement().parentNode;
         if (VRemoveMathjaxScript) {

src/resources/marked.js

@@ -79,13 +79,14 @@ var updateText = function(text) {
     // If you add new logics after handling MathJax, please pay attention to
     // finishLoading logic.
     if (VEnableMathjax) {
-        try {
+        MathJax.texReset();
-            MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX],
+        MathJax
-                              ["Typeset", MathJax.Hub, contentDiv, postProcessMathJax]);
+            .typesetPromise([contentDiv])
-        } catch (err) {
+            .then(postProcessMathJax)
+            .catch(function (err) {
                 content.setLog("err: " + err);
                 finishOneAsyncJob();
-        }
+            });
     } else {
         finishOneAsyncJob();
     }

src/resources/mathjax_preview.js

@@ -71,19 +71,16 @@ var previewMathJax = function(identifier, id, timeStamp, text, isHtml) {
     if (text.indexOf('$$') !== -1) {
         isBlock = true;
     }
-
+    MathJax
-    try {
+        .typesetPromise([p])
-        MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX],
+        .then(function () {
-                          ["Typeset",
+            postProcessMathJax(identifier, id, timeStamp, p, isBlock);
-                           MathJax.Hub,
+        }).catch(function (err) {
-                           p,
-                           [postProcessMathJax, identifier, id, timeStamp, p, isBlock]]);
-    } catch (err) {
             content.setLog("err: " + err);
             content.mathjaxResultReady(identifier, id, timeStamp, 'png', '');
             contentDiv.removeChild(p);
             delete p;
-    }
+        });
 };
 
 var postProcessMathJax = function(identifier, id, timeStamp, container, isBlock) {
@@ -93,7 +90,7 @@ var postProcessMathJax = function(identifier, id, timeStamp, container, isBlock)
         return;
     }
 
-    var hei = (isBlock ? container.clientHeight * 1.5 : container.clientHeight * 1.6) + 5;
+    var hei = container.clientHeight * 1.5 + (isBlock ? 20 : 5);
     domtoimage.toPng(container, { height: hei }).then(function (dataUrl) {
         var png = dataUrl.substring(dataUrl.indexOf(',') + 1);
         content.mathjaxResultReady(identifier, id, timeStamp, 'png', png);

src/resources/mathjax_preview_template.html

@@ -10,7 +10,17 @@
     <link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
     <script src="qrc:/resources/qwebchannel.js"></script>
     <!-- EXTRA_PLACE_HOLDER -->
-    <script src="JS_PLACE_HOLDER" async></script>
+    <script>
+        MathJax = {
+          tex: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']]
+          },
+          chtml: {
+            scale: 1 // http://docs.mathjax.org/en/latest/options/output/index.html#options-common-to-all-output-processors
+          }
+        };
+    </script>
+    <script src="JS_PLACE_HOLDER" defer id="MathJax-script"></script>
     <script src="qrc:/utils/dom-to-image/dom-to-image.js" defer></script>
     <script src="qrc:/resources/common.js" defer></script>
     <script src="qrc:/resources/mathjax_preview.js" defer></script>

src/resources/showdown.js

@@ -134,13 +134,14 @@ var updateText = function(text) {
     // If you add new logics after handling MathJax, please pay attention to
     // finishLoading logic.
     if (VEnableMathjax) {
-        try {
+        MathJax.texReset();
-            MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX],
+        MathJax
-                              ["Typeset", MathJax.Hub, contentDiv, postProcessMathJax]);
+            .typesetPromise([contentDiv])
-        } catch (err) {
+            .then(postProcessMathJax)
+            .catch(function (err) {
                 content.setLog("err: " + err);
                 finishOneAsyncJob();
-        }
+            });
     } else {
         finishOneAsyncJob();
     }

src/resources/vnote.ini

@@ -388,7 +388,7 @@ custom_export=
 markdownit_opt=html,break,linkify,metadata
 
 ; Location and configuration for Mathjax
-mathjax_javascript=https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_HTMLorMML
+mathjax_javascript=https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.1/es5/tex-mml-chtml.js
 
 ; Styles to be removed when copied
 ; style1,style2,style3

src/utils/vutils.cpp

@@ -788,23 +788,24 @@ QString VUtils::generateHtmlTemplate(const QString &p_template,
             mj.replace(reg, QString("\\1%1").arg("TeX-MML-AM_SVG"));
         }
 
-        extraFile += "<script type=\"text/x-mathjax-config\">"
+        extraFile += "<script>"
-                     "MathJax.Hub.Config({\n"
+                     "MathJax = {\n"
-                     "                    tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
+                     "    tex: {\n"
-                                                    "processEscapes: true,\n"
+                     "         inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
-                                                    "processClass: \"tex2jax_process|language-mathjax|lang-mathjax\"},\n"
+                     "         processEscapes: true,\n"
-                     "                    showProcessingMessages: false,\n"
+                     "         tags: 'ams'\n"
-                     "                    skipStartupTypeset: " + QString("%1,\n").arg(mathjaxTypeSetOnLoad ? "false" : "true") +
-                     "                    TeX: {\n"
-                     "                          Macros: {\n"
-                     "                              bm: [\"\\\\boldsymbol{#1}\", 1]\n"
                      "    },\n"
-                     "                          equationNumbers: {\n"
+                     "    options: {\n"
-                     "                              autoNumber: \"AMS\"\n"
+                     "         processHtmlClass: 'tex2jax_process|language-mathjax|lang-mathjax'\n"
+                     "    },\n"
+                     "    startup: {\n"
+                     "         typeset: " + QString("%1,\n").arg(mathjaxTypeSetOnLoad ? "true" : "false") +
+                     "         ready: function() {\n"
+                     "             MathJax.startup.defaultReady();\n"
+                     "             MathJax.startup.promise.then(handleMathjaxReady);\n"
                      "         }\n"
-                     "                    },\n"
+                     "    }\n"
-                     "                    messageStyle: \"none\"});\n"
+                     "}"
-                     "MathJax.Hub.Register.StartupHook(\"End\", function() { handleMathjaxReady(); });\n"
                      "</script>\n"
                      "<script type=\"text/javascript\" async src=\"" + mj + "\"></script>\n" +
                      "<script>var VEnableMathjax = true;</script>\n";
@@ -898,39 +899,22 @@ QString VUtils::generateExportHtmlTemplate(const QString &p_renderBg,
     QString templ = VNote::generateExportHtmlTemplate(g_config->getRenderBackgroundColor(p_renderBg));
     QString extra;
     if (p_includeMathJax) {
-        extra += "<script type=\"text/x-mathjax-config\">\n"
+        extra += "<script>"
-                 "MathJax.Hub.Config({\n"
+                 "MathJax = {\n"
-                 "                    showProcessingMessages: false,\n"
+                 "    tex: {\n"
-                 "                    messageStyle: \"none\",\n"
+                 "         inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
-                 "                    SVG: {\n"
+                 "         processEscapes: true,\n"
-                 "                          minScaleAdjust: 100,\n"
+                 "         tags: 'ams'\n"
-                 "                          styles: {\n"
-/*
-FIXME: Using wkhtmltopdf, without 2em, the math formula will be very small. However,
-with 2em, if there are Chinese characters in it, the font will be a mess.
-*/
-#if defined(Q_OS_WIN)
-                 "                                   \".MathJax_SVG\": {\n"
-                 "                                                      \"font-size\": \"2em !important\"\n"
-                 "                                   }\n"
-#endif
-                 "                          }\n"
                  "    },\n"
-                 "                    TeX: {\n"
+                 "    options: {\n"
-                 "                          Macros: {\n"
+                 "         processHtmlClass: 'tex2jax_process|language-mathjax|lang-mathjax'\n"
-                 "                                   bm: [\"\\\\boldsymbol{#1}\", 1]\n"
-                 "                          },\n"
-                 "                          equationNumbers: {\n"
-                 "                                            autoNumber: \"AMS\"\n"
                  "    }\n"
-                 "                    }\n"
+                 "}"
-                 "});\n"
                  "</script>\n";
-
         QString mj = g_config->getMathjaxJavascript();
         // Chante MathJax to be rendered as SVG.
-        QRegExp reg("(Mathjax\\.js\\?config=)\\S+", Qt::CaseInsensitive);
+        QRegExp reg("tex-mml-chtml\\.js\\S+", Qt::CaseInsensitive);
-        mj.replace(reg, QString("\\1%1").arg("TeX-MML-AM_SVG"));
+        mj.replace(reg, QString("tex-mml-svg.js"));
 
         extra += "<script type=\"text/javascript\" async src=\"" + mj + "\"></script>\n";
     }
@@ -996,26 +980,20 @@ QString VUtils::generateMathJaxPreviewTemplate()
                  "<script src=\"qrc" + VNote::c_flowchartJsFile + "\"></script>\n";
 
     // MathJax.
-    extraFile += "<script type=\"text/x-mathjax-config\">"
+    extraFile += "<script>"
-                 "MathJax.Hub.Config({\n"
+                 "MathJax = {\n"
-                 "                    tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
+                 "    tex: {\n"
-                                               "processEscapes: true,\n"
+                 "         inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
-                                               "processClass: \"tex2jax_process|language-mathjax|lang-mathjax\"},\n"
+                 "         processEscapes: true,\n"
-                 "                    \"HTML-CSS\": {\n"
+                 "         tags: 'ams'\n"
-                 "                                   scale: " + mathjaxScale + "\n"
                  "    },\n"
-                 "                    showProcessingMessages: false,\n"
+                 "    options: {\n"
-                 "                    TeX: {\n"
+                 "         processHtmlClass: 'tex2jax_process|language-mathjax|lang-mathjax'\n"
-                 "                          Macros: {\n"
-                 "                              bm: [\"\\\\boldsymbol{#1}\", 1]\n"
-                 "                          },\n"
-                 "                          equationNumbers: {\n"
-                 "                              autoNumber: \"AMS\"\n"
                  "    }\n"
-                 "                    },\n"
+                 "}"
-                 "                    messageStyle: \"none\"});\n"
                  "</script>\n";
 
+
     extraFile += "<script src=\"qrc" + VNote::c_wavedromThemeFile + "\"></script>\n" +
                  "<script src=\"qrc" + VNote::c_wavedromJsFile + "\"></script>\n";