how to use MathML in HTML
Asked Answered
H

3

5

I'm trying to displaying math formula on a web page. But when I write html code like following

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Binomial Theorem</title>
</head>
<body>
<p>Binomial Theorem:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <msup>
            <mfenced>
                <mrow>
                    <mi>a</mi>
                    <mo>+</mo>
                    <mi>b</mi>
                </mrow>
            </mfenced>
            <mn>2</mn>
        </msup>
        <mo>=</mo>
        <msup>
            <mrow>
                <mi>a</mi>
            </mrow>
            <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
            <mrow>
                <mi>b</mi>
            </mrow>
            <mn>2</mn>
        </msup>
        <mo>+</mo>
        <mrow>
            <mn>2</mn>
            <mi>a</mi>
            <mi>b</mi>
        </mrow>
    </mrow>
</math>
</body>
</html>

And the result is just

Binomial Theorem:

a + b 2 = a 2 + b 2 + 2 a b

It is not like a formula

help me to use MathML in HTML Thanks,

Hygrograph answered 24/1, 2017 at 6:3 Comment(1)
MathML is not well supported caniuse.com/#feat=mathmlCircumspect
C
4

MathML isn't supported by all popular user agents. Firefox 3.5 or later releases, for example, do support it:

The MathML snippet rendered by Firefox 3.5

Cairngorm answered 24/1, 2017 at 6:8 Comment(1)
Bob Mathews answer below works well for all browsers. Tested in Chrome, IE and FireFoxFully
B
4

I would make 3 changes to your page:

  1. Include a DOCTYPE declaration as the first line of code. <!DOCTYPE html> identifies this page to the browser as an HTML5 page.
  2. I'd omit the namespace declaration from the html element. It doesn't hurt anything to have it there, but it's not necessary. You're probably going to include it on each math element anyway.
  3. If you add this as the last line above </head>, the math will be visible in all browsers, not just Firefox:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Bigod answered 31/1, 2017 at 16:21 Comment(1)
Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips.Deragon
Q
1

MathML is currently supported only on Firefox browsers. Try on Firefox browser.

Q answered 24/1, 2017 at 6:7 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.