Unable to render MathML content in Google Chrome
I have some MathML contents in HTML page and the page needs to be rendered in Google Chrome over HTTPS connection. So i tried to follow the approach said in the below link
but it did not work (I copied the script in my HTML page). Then I tried to install the MathJax plugin for chrome as an extension to Google Chrome. That seemed to render some of MathML in my file but for some I got an error. I found that MathJax can render Presentation MathML contents but cannot render Content MathML contents (I have both types of contents in my page). Also it did not work over HTTPS connection. It will be very helpful if I get some workarounds to solve this problem.
Regards, Anirban
Answer
The question linked to in the OP is somewhat dated and describes how to include MathML in xhtml (not html since that was not actually valid back then). With HTML5, it's much easier to include MathML.
Chrome does not support MathML so you'll need a polyfill. MathJax can render both Presentation and Content MathML; see the relevant documentation at http://docs.mathjax.org/en/latest/mathml.html.
However, the author needs to configure MathJax correctly to do so. FYI, plugins in the Chrome store are made by third parties; also, MathJax works over https just fine if done correctly.
Below is an example that shows how to enable all MathML features MathJax can provide, including the mml3.js extension for experimental features.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fullest MathML support using MathJax</title>
<script>window.MathJax = { MathML: { extensions: ["mml3.js", "content-mathml.js"]}};</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=MML_HTMLorMML"></script>
</head>
<body>
<math display="block">
<apply>
<plus/>
<ci>a</ci>
<apply>
<minus/>
<ci>b</ci>
<ci>c</ci>
</apply>
</apply>
</math>
<math display="block">
<mrow>
<mi>a</mi>
<mo>+</mo>
<mrow>
<mi>b</mi>
<mo>-</mo>
<mi>c</mi>
</mrow>
</mrow>
</math>
</body>
</html>