JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<p>Presentation MathML, plus annotations:</p>

<math display="block">
  <semantics>

    <!-- Presentation MathML -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>

    <!-- Content MathML -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus/>
        <apply>
          <power/>
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>

    <!-- annotate an image -->
    <annotation encoding="image/png" src="some/path/formula.png"/>

    <!-- annotate TeX -->
    <annotation encoding="application/x-tex">
      x^{2} + y 
    </annotation> 
   
  </semantics>
</math>

<p>Empty presentation MathML, plus annotations:</p>

<math display="block">
  <semantics>

    <!-- Presentation MathML -->
    <mrow></mrow>

    <!-- Content MathML -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus/>
        <apply>
          <power/>
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>

    <!-- annotate an image -->
    <annotation encoding="image/png" src="some/path/formula.png"/>

    <!-- annotate TeX -->
    <annotation encoding="application/x-tex">
      x^{2} + y 
    </annotation> 
   
  </semantics>
</math>

<p>No presentation MathML, only annotations:</p>

<math display="block">
  <semantics>

    <!-- Content MathML -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus/>
        <apply>
          <power/>
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>

    <!-- annotate an image -->
    <annotation encoding="image/png" src="some/path/formula.png"/>

    <!-- annotate TeX -->
    <annotation encoding="application/x-tex">
      x^{2} + y 
    </annotation> 
   
 ...

CSS

math {
    border: 2px solid red;
}

JavaScript

$('math').click(function() {
    var mrow = $(this).find('semantics>mrow');
    if (mrow.length === 0) {
        mrow = $('<mrow>');
        $(this).find('semantics').prepend(mrow);
    }
    mrow.contents().remove();
    mrow.append($('<mi>z</mi>'));
});