A small-ish (compared to alternatives ~ 12kb gzipped) implementation of MathML using custom-elements.
Math-ML is implemented using custom elements. There's a corresponding element for every MathML node. The root
<math> node is replaced by
<math-ml>. For all other nodes, the prefix
m is replaces with
math-. For example,
This is available as a polyfill as well. If MathML is not detected on the browser (every browser except Firefox), the polyfill replaces all
<math> nodes with corresponding
Note: It's not feature complete with the MathML spec, but supports most complicates cases as seen in the Torture Test.
Install from npm:
npm install --save mathml-elements
or simply from unpkg:
Using Math-ML components:
<math-ml> <math-row> <math-sup> <math-i>x</math-i><math-n>2</math-n> </math-sup> <math-sup> <math-i>y</math-i><math-n>2</math-n> </math-sup> </math-row> </math-ml>
Raw MathML version:
<math> <mrow> <msup> <mi>x</mi><mn>2</mn> </msup> <msup> <mi>y</mi><mn>2</mn> </msup> </mrow> </math>
As a MathML Polyfill
Math-ML comes with a polyfill that will check if your browser has built in MathML support. If not, then it replaces all MathML elements with Math-ML custom elements.
To use the polyfill:
These examples are ported versions from Mozilla Dev Network.
Custom Element support
While most browsers (Chrome, Firefox, Safari) support custom elements, incluse the web-components polyfill to enabled them in unsupported ones