enable MathJax in fenced code block

src/resources/hoedown.js

@@ -39,6 +39,9 @@ var updateHtml = function(html) {
                     --i;
                     continue;
                 }
+            } else if (VEnableMathjax && code.classList.contains('language-mathjax')) {
+                // Mathjax code block.
+                continue;
             }
 
             if (listContainsRegex(code.classList, /language-.*/)) {
@@ -55,7 +58,7 @@ var updateHtml = function(html) {
     // MathJax may be not loaded for now.
     if (VEnableMathjax && (typeof MathJax != "undefined")) {
         try {
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, finishLogics]);
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, postProcessMathJax]);
         } catch (err) {
             content.setLog("err: " + err);
             finishLogics();

src/resources/markdown-it.js

@@ -44,16 +44,19 @@ var mdit = window.markdownit({
     typographer: true,
     langPrefix: 'lang-',
     highlight: function(str, lang) {
-        if (lang) {
+        if (lang
+            && (!VEnableMathjax || lang != 'mathjax')
+            && (!VEnableMermaid || lang != 'mermaid')
+            && (!VEnableFlowchart || lang != 'flowchart')) {
             if (hljs.getLanguage(lang)) {
                 return hljs.highlight(lang, str).value;
             } else {
                 return hljs.highlightAuto(str).value;
             }
-        } else {
-            // Use external default escaping.
-            return '';
         }
+
+        // Use external default escaping.
+        return '';
     }
 });
 
@@ -111,7 +114,7 @@ var updateText = function(text) {
     // finishLoading logic.
     if (VEnableMathjax) {
         try {
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, finishLogics]);
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, postProcessMathJax]);
         } catch (err) {
             content.setLog("err: " + err);
             finishLogics();

src/resources/markdown_template.js

@@ -890,7 +890,12 @@ var renderCodeBlockLineNumber = function() {
     var codes = document.getElementsByTagName('code');
     for (var i = 0; i < codes.length; ++i) {
         var code = codes[i];
-        if (code.parentElement.tagName.toLowerCase() == 'pre') {
+        var pare = code.parentElement;
+        if (pare.tagName.toLowerCase() == 'pre') {
+            if (VEnableMathjax && pare.classList.contains("lang-mathjax")) {
+                continue;
+            }
+
             hljs.lineNumbersBlock(code);
         }
     }
@@ -911,8 +916,17 @@ var addClassToCodeBlock = function() {
     var codes = document.getElementsByTagName('code');
     for (var i = 0; i < codes.length; ++i) {
         var code = codes[i];
-        if (code.parentElement.tagName.toLowerCase() == 'pre') {
+        var pare = code.parentElement;
+        if (pare.tagName.toLowerCase() == 'pre') {
             code.classList.add(hljsClass);
+
+            if (VEnableMathjax
+                && (code.classList.contains("lang-mathjax")
+                    || code.classList.contains("language-mathjax"))) {
+                // Add the class to pre.
+                pare.classList.add("lang-mathjax");
+                pare.classList.add("language-mathjax");
+            }
         }
     }
 };
@@ -990,3 +1004,17 @@ var getHtmlWithInlineStyles = function(container) {
 
     return container.innerHTML;
 };
+
+// Will be called after MathJax rendering finished.
+var postProcessMathJax = function() {
+    var all = MathJax.Hub.getAllJax();
+    for (var i = 0; i < all.length; ++i) {
+        var node = all[i].SourceElement().parentNode;
+        if (node.tagName.toLowerCase() == 'code') {
+            node.classList.remove('hljs');
+            node.classList.add('mathjax-code');
+        }
+    }
+
+    finishLogics();
+};

src/resources/marked.js

@@ -17,7 +17,10 @@ renderer.heading = function(text, level) {
 // Highlight.js to highlight code block
 marked.setOptions({
     highlight: function(code, lang) {
-        if (lang) {
+        if (lang
+            && (!VEnableMathjax || lang != 'mathjax')
+            && (!VEnableMermaid || lang != 'mermaid')
+            && (!VEnableFlowchart || lang != 'flowchart')) {
             if (hljs.getLanguage(lang)) {
                 return hljs.highlight(lang, code).value;
             } else {
@@ -60,7 +63,7 @@ var updateText = function(text) {
     // finishLoading logic.
     if (VEnableMathjax) {
         try {
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, finishLogics]);
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, postProcessMathJax]);
         } catch (err) {
             content.setLog("err: " + err);
             finishLogics();

src/resources/showdown.js

@@ -49,7 +49,7 @@ var mdHasTocSection = function(markdown) {
     return n != -1;
 };
 
-var highlightCodeBlocks = function(doc, enableMermaid, enableFlowchart) {
+var highlightCodeBlocks = function(doc, enableMermaid, enableFlowchart, enableMathJax) {
     var codes = doc.getElementsByTagName('code');
     for (var i = 0; i < codes.length; ++i) {
         var code = codes[i];
@@ -57,9 +57,12 @@ var highlightCodeBlocks = function(doc, enableMermaid, enableFlowchart) {
             if (enableMermaid && code.classList.contains('language-mermaid')) {
                 // Mermaid code block.
                 continue;
-            } if (enableFlowchart && code.classList.contains('language-flowchart')) {
+            } else if (enableFlowchart && code.classList.contains('language-flowchart')) {
                 // Flowchart code block.
                 continue;
+            } else if (enableMathJax && code.classList.contains('language-mathjax')) {
+                // MathJax code block.
+                continue;
             }
 
             if (listContainsRegex(code.classList, /language-.*/)) {
@@ -75,7 +78,7 @@ var updateText = function(text) {
     placeholder.innerHTML = html;
     handleToc(needToc);
     insertImageCaption();
-    highlightCodeBlocks(document, VEnableMermaid, VEnableFlowchart);
+    highlightCodeBlocks(document, VEnableMermaid, VEnableFlowchart, VEnableMathjax);
     renderMermaid('language-mermaid');
     renderFlowchart('language-flowchart');
     addClassToCodeBlock();
@@ -85,7 +88,7 @@ var updateText = function(text) {
     // finishLoading logic.
     if (VEnableMathjax) {
         try {
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, finishLogics]);
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, postProcessMathJax]);
         } catch (err) {
             content.setLog("err: " + err);
             finishLogics();
@@ -100,7 +103,7 @@ var highlightText = function(text, id, timeStamp) {
 
     var parser = new DOMParser();
     var htmlDoc = parser.parseFromString("<div id=\"showdown-container\">" + html + "</div>", 'text/html');
-    highlightCodeBlocks(htmlDoc, false, false);
+    highlightCodeBlocks(htmlDoc, false, false, false);
 
     html = htmlDoc.getElementById('showdown-container').innerHTML;
 
@@ -114,7 +117,7 @@ var textToHtml = function(text) {
 
     var parser = new DOMParser();
     var htmlDoc = parser.parseFromString("<div id=\"showdown-container\">" + html + "</div>", 'text/html');
-    highlightCodeBlocks(htmlDoc, false, false);
+    highlightCodeBlocks(htmlDoc, false, false, false);
 
     html = htmlDoc.getElementById('showdown-container').innerHTML;
 

src/resources/themes/v_moonlight/v_moonlight.css

@@ -98,6 +98,17 @@ pre code {
     background-color: #2C313A;
 }
 
+code.mathjax-code {
+    display: inherit;
+    overflow-x: inherit;
+    padding: inherit;
+    color: inherit;
+    background: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: inherit;
+}
+
 aside {
     display: block;
     float: right;

src/resources/themes/v_pure/v_pure.css

@@ -98,6 +98,17 @@ pre code {
     background-color: #E0E0E0;
 }
 
+code.mathjax-code {
+    display: inherit;
+    overflow-x: inherit;
+    padding: inherit;
+    color: inherit;
+    background: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: inherit;
+}
+
 aside {
     display: block;
     float: right;

src/resources/themes/v_white/v_white.css

@@ -97,6 +97,17 @@ pre code {
     background-color: #E0E0E0;
 }
 
+code.mathjax-code {
+    display: inherit;
+    overflow-x: inherit;
+    padding: inherit;
+    color: inherit;
+    background: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: inherit;
+}
+
 aside {
     display: block;
     float: right;

src/utils/vutils.cpp

@@ -649,7 +649,9 @@ QString VUtils::generateHtmlTemplate(MarkdownConverterType p_conType, bool p_exp
     if (g_config->getEnableMathjax()) {
         extraFile += "<script type=\"text/x-mathjax-config\">"
                      "MathJax.Hub.Config({\n"
-                     "                    tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']]},\n"
+                     "                    tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']],\n"
+                                                   "processEscapes: true,\n"
+                                                   "processClass: \"tex2jax_process|language-mathjax|lang-mathjax\"},\n"
                      "                    showProcessingMessages: false,\n"
                      "                    messageStyle: \"none\"});\n"
                      "</script>\n"