Guia de modelos prontos do MathML

Eai galera! Recentemente tive que aprender um pouco do MathML para colocar problemas matemáticos no site que estamos fazendo.

Então... Para facilitar, acabei montando um modelo com todos os formatos que ia precisar e me ajudou muitoo, por isso decidi publicar aqui, para ver se consigo ajudar vocês tambem.

1° Equação do 2° grau:

x^2 + x + 5 = 0

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msup>
        <mi>x</mi>
        <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mi>x</mi>
    <mo>+</mo>
    <mn>5</mn>
    <mo>=</mo>
    <mn>0</mn>
</math>

2° Exemplo de fração:

Com expressão no numerador:

\frac{x^2 + y}{z}

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
        <mrow>
            <msup>
                <mi>x</mi>
                <mn>2</mn>
            </msup>
            <mo>+</mo>
            <mi>y</mi>
        </mrow>
        <mi>z</mi>
    </mfrac>
</math>

Fração Simples:

\frac{1}{2}

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
        <mn>1</mn>
        <mn>2</mn>
    </mfrac>
</math>

3° Exemplo de notação científica:

3 \times 10^2

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mn>3</mn>
    <mo>&times;</mo>
    <msup>
        <mn>10</mn>
        <mn>2</mn>
    </msup>
</math>

4° Exemplo Quantidade do Átomo:

H₂O

H_xSO₂

<span>
    H<sub>2</sub>O
</span>
<p>
    H<sub>x</sub>SO<sub>2</sub>
</p>

5 °Exemplo de raiz quadrada:

\sqrt{9} \times \sqrt{a + b}

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msqrt>
        <mn>9</mn>
    </msqrt>
    <mo>&times;</mo>
    <msqrt>
        <mrow>
            <mi>a</mi>
            <mo>+</mo>
            <mi>b</mi>
        </mrow>
    </msqrt>
</math>

6° Exemplo de exponenciação simples:

Com MathML:

x^2

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msup>
        <mi>x</mi>
        <mn>2</mn>
    </msup>
</math>

Sem MathML:

x²

<span>x<sup>2</sup></span>

7° Exemplo de número com expoente e subscrito:

_{x_{a}^{b}}

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msubsup>
        <mi>x</mi>
        <mi>a</mi>
        <mi>b</mi>
    </msubsup>
</math>

8° Exemplo de Função:

g(x) = 2x + 3

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <mi>g</mi>
        <mo>(</mo>
        <mi>x</mi>
        <mo>)</mo>
        <mo>=</mo>
        <mn>2</mn>
        <mi>x</mi>
        <mo>+</mo>
        <mn>3</mn>
    </mrow>
</math>

9° Exemplo de um número elevado a uma fração:

2^{\frac{1}{2}}

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msup>
        <mn>2</mn>
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
    </msup>
</math>

10° Exemplo Logaritimo:

\log_{10}(x)

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msub>
        <mi>log</mi> <!-- Função logarítmica -->
        <mn>10</mn> <!-- Base do logaritmo -->
    </msub>
    <mo>(</mo>
    <mi>x</mi> <!-- Argumento do logaritmo -->
    <mo>)</mo>
</math>

11° Exemplo de vetor:

\vec{A}

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mover>
        <mi>A</mi>
        <mo>&rarr;</mo>
    </mover>
</math>

🏆 Bônus!

Expressão díficil que mistura conceitos aprendidos acima:

E^{\mathring{}}(\text{Fe}^{2+}|Fe) = -0,44\, \text{V} ; E^{\mathring{}}(\text{H}^+|H_2) = 0,00\, \text{V} ; E^{\mathring{}}(\text{Cu}^{2+}|Cu) = +0,34\, \text{V}

<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <msup>
        <mi>E</mi>
        <mi>ꝋ</mi>
    </msup>
    <mi>&lpar;</mi>
    <msup>
        <mi>Fe</mi>
        <mrow>
            <mn>2+</mn>
        </mrow>
    </msup>
    <mi>|Fe</mi>
    <mi>&rpar;</mi>
    <mo>= -</mo>
    <mn>0,44</mn>
    <mspace width="0.2em"></mspace>
    <mtext>V</mtext>
</math>
;
<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <msup>
        <mi>E</mi>
        <mi>ꝋ</mi>
    </msup>
    <mi>&lpar;</mi>
    <msup>
        <mi>H</mi>
        <mo>+</mo>
    </msup>
    <mi>|</mi>
    <msub>
        <mi>H</mi>
        <mn>2</mn>
    </msub>
    <mi>&rpar;</mi>
    <mo>=</mo>
    <mn>0,00</mn>
    <mspace width="0.2em"></mspace>
    <mtext>V</mtext>
</math>
; e 
<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <msup>
        <mi>E</mi>
        <mi>ꝋ</mi>
    </msup>
    <mi>&lpar;</mi>
    <msup>
        <mi>Cu</mi>
        <mrow>
            <mn>2+</mn>
        </mrow>
    </msup>
    <mi>|Cu</mi>
    <mi>&rpar;</mi>
    <mo>=</mo>
    <mn>+0,34</mn>
    <mspace width="0.2em"></mspace>
    <mtext>V</mtext>
</math>

Bom... É isso, espero que ajude vocês como ajudou no meu projeto, obrigado por ter lido até aqui e até a próxima 👋