Unable to render MathML content in Google Chrome

This worked really well for me when i was in a similar situation..

Add these scripts in the <head>

<script type="text/x-mathjax-config">MathJax.Hub.Config({
  config: ["MMLorHTML.js"],
  jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML"],
  extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js"],
  TeX: {
    extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
  }
});</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Then,

add this <script> after the closing of the <body> tag

<script type="text/javascript">
  MathJax.Hub.Configured()
</script>

See the documentation

or

you can see this wonderfull example.. https://math.stackexchange.com/ .. Check the source of math.stackexchange..It will be really helpfull..

UPDATE

See page no 54 in this link..It says

MathJax supports the MathML3.0 mathematics tags, with some limitations. The MathML support is still under active development, so some tags are not yet implemented, and some features are not fully developed, but are coming. The deficiencies include:

• No support for alignment groups in tables.

• Not all attributes are supported for tables. E.g., columnspan and rowspan are not implemented yet.

•Experimental support for the elementary math tags: mstack, mlongdiv, msgroup, msrow, mscarries, and mscarry. (Via the mml3 extension, see below.)

• Experimental support for bidirectional mathematics.


It seems that it is possible to render MathML inside Chrome with the help of a CSS and by using HTML5, i.e. a Chrome version that supports unknown tags.

As an experiment, including some baby step fiddling with contenteditable="true" to test HTML5 editing, I was using this CSS here:
https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/test-mathml-css

Chrome Example without the CSS:

without CSS

Chrome Example with the CSS:

enter image description here

Source files are here:
https://gist.github.com/jburse/fb43afd01048feac7028b5642817af0a#file-mathml-html


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/ .

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>

Tags:

Html

Google Chrome

Mathml

Mathjax

Recent Posts