css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <fieldset>
  <legend>Choose MathJax renderer</legend>
  <input id="html" type="radio" name="renderer" value="html" checked>
  <label for="html">HTML output</label><br>
  <input id="svg" type="radio" name="renderer" value="svg">
  <label for="svg">SVG output</label><br>
  <button id="mj">Process with MathJax</button>
</fieldset>
<h2>Real world content</h2>
<p>The examples below are not optimized in terms of the MathML itself (i.e., improving the structure and markup such as inserting mrows or invisible operators). The goal was take regular, in-the-wild samples and improve them with ARIA markup. (Note that one change that was made is the insertion of hacks for screenreader hints. You can compare with the original source.)</p>
<p>Some test runs are available <a href="https://www.youtube.com/playlist?list=PL1ATLkPgTEBqYOb7CYz7Kv6gNHh_pXbQq">as a YouTube playlist</a></p>
<p>Older versions are available via <a href="https://gist.github.com/pkra/3dc56add129faa2def1452602985983d">GitHub's gist</a></p>
<ol>
  <li>
    <math display="block">
    <mtable columnalign="right left right left right left right left right left right left" rowspacing="3pt" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" displaystyle="true"> 
      <mtr>
        <mtd>
          <mrow>
            <mover aria-label="derivative of x ">
              <mi>x</mi>
              <mo>&#x02D9;<!-- ˙ --></mo>
            </mover>
          </mrow>
        </mtd>
        <mtd>
          <mi></mi>
          <mo aria-label="is equal to ">=</mo>
          <mi aria-label="sigma ">&#x03C3;<!-- σ --></mi>
          <mrow>
          <mo aria-label="left parenthesis " stretchy="false">(</mo>
<!--      Test for SVG: content as label; genreally works in VoiceOver but lots of image/group noise   -->
          <mi aria-label="y ">y</mi>
          <mo aria-label="minus ">&#x2212;<!-- − --></mo>
          <mi aria-label="x ">x</mi>
          <mo aria-label="right parenthesis " stretchy="false">)</mo>
          </mrow>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mrow>
            <mover aria-label="derivative of y ">
              <mi>y</mi>
              <mo>&#x02D9;<!-- ˙ --></mo>
            </mover>
          </mrow>
        </mtd>
        <mtd>
          <mi></mi>
          <mo aria-label="is equal to ">=</mo>
          <mi aria-label="rho ">&#x03C1;<!-- ρ --></mi>
          <mi aria-label="x ">x</mi>
          <mo aria-label="minus ">&#x2212;<!-- − --></mo>
          <mi aria-label="y ">y</mi>
          <mo aria-label="minus ">&#x2212;<!-- − --></mo>
          <mi aria-label="x ">x</mi>
          <mi aria-label="z ">z</mi>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mrow>
            <mover aria-label="derivative of z ">
              <mi>z</mi>
              <mo>&#x02D9;<!-- ˙ --></mo>
            </mover>
          </mrow>
        </mtd>
        <mtd>
          <mi></mi>
          <mo aria-label="is equal to ">=</mo>
          <mo aria-label="minus ">&#x2212;<!-- − --></mo>
          <mi aria-label="beta ">&#x03B2;<!-- β --></mi>
          <mi aria-label="z ">z</mi>
          <mo aria-label="plus ">+</mo>
          <mi aria-label="x ">x</mi>
          <mi aria-label="y ">y</mi>
        </mtd>
      </mtr>
    </mtable>
</math>
  </li>
  <li>
    <math display="block">
    <mrow aria-label="P of E ">
      <mi>P</mi>
      <mo>(</mo>
      <mi>E</mi>
      <mo>)</mo>
     </mrow>
      <mo aria-label="equals">=</mo>
      <mrow aria-label="n choose k">
        <mrow>
           <mo>(</mo>
          <mfrac linethickness="0" >
            <mi>n</mi>
            <mi>k</mi>
          </mfrac>
            <mo>)</mo>
        </mrow>
      </mrow>
      <msup>
        <mi aria-label="p ">p</mi>
<!--"k" will (usually?) be ignored by AT (not combining accessible name with content for span). Could a redefined role=math help?-->
        <mi aria-label="to the power of k">k</mi>
      </msup>
      <msup>
        <mrow>
          <mo aria-label="left paren ">(</mo>
          <mn aria-label="one ">1</mn>
          <mo aria-label="minus ">&#x2212;<!-- − --></mo>
          <mi aria-label="p ">p</mi>
          <mo aria-label="right paren ">)</mo>
         </mrow>
        <mrow aria-label="to the power of n minus k">
          <mi>n</mi>
          <mo>&#x2212;<!-- − --></mo>
          <mi>k</mi>
        </mrow>
      </msup>
    </mrow>
</math>
  </li>
  <li>
    <math display="block">
    <mrow>
      <msup>
        <mrow>
          <mo>(</mo>
          <mrow>
            <munderover>
              <mo aria-label="sum from ">&#x2211;<!-- ∑ --></mo>
              <mrow>
                <mi aria-label="k ">k</mi>
                <mo aria-label="equals ">=</mo>
                <mn aria-label="one ">1</mn>
              </mrow>
              <mi aria-label="through n">n</mi>
            </munderover>
            <msub aria-label="a sub k ">
              <mi>a</mi>
              <mi>k</mi>
            </msub>
            <msub aria-label="b sub k ">
              <mi>b</mi>
              <mi>k</mi>
            </msub>
          </mrow>
          <mo>)</mo>
        </mrow>
        <mrow aria-label="squared ">
          <mspace width="negativethinmathspace" />
          <mspace width="negativethinmathspace" />
          <mn>2</mn>
        </mrow>
      </msup>
      <mo aria-label="is less or equal than ">&#x2264;<!-- ≤ --></mo>
      <mrow>
<!--HACK testing nasty hack to avoid empty span with label (which AT should ignore) -->
        <mrow aria-label="the product of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
        <mo>(</mo>
        <mrow>
             <munderover>
              <mo aria-label="sum from ">&#x2211;<!-- ∑ --></mo>
              <mrow>
                <mi  aria-label="k ">k</mi>
                <mo aria-label="equals ">=</mo>
                <mn aria-label="one ">1</mn>
              </mrow>
              <mi aria-label="through n ">n</mi>
            </munderover>
          <msubsup aria-label="a sub k, squared ">
            <mi>a</mi>
            <mi>k</mi>
            <mn>2</mn>
          </msubsup>
        </mrow>
        <mo>)</mo>
      </mrow>
      <mrow>
        <mo>(</mo>
        <mrow>
             <munderover>
              <mo aria-label="sum from">&#x2211;<!-- ∑ --></mo>
              <mrow>
                <mi aria-label="k ">k</mi>
                <mo aria-label="equals ">=</mo>
                <mn aria-label="one ">1</mn>
              </mrow>
              <mi aria-label="through n">n</mi>
            </munderover>
          <msubsup aria-label="b sub k, squared ">
            <mi>b</mi>
            <mi>k</mi>
            <mn>2</mn>
          </msubsup>
        </mrow>
        <mo>)</mo>
      </mrow>
</math>
  </li>
  <li>
    <math display="block">
    <mrow>
      <mfrac>
        <mn aria-label="one over ">1</mn>
        <mrow>
          <mrow>
            <mo aria-label="left paren ">(</mo>
            <msqrt  aria-label="square root of ">
              <mi aria-label="phi ">&#x03D5;<!-- ϕ --></mi>
              <msqrt aria-label="square root of five ">
                <mn>5</mn>
              </msqrt>
            </msqrt>
            <mo aria-label="minus ">&#x2212;<!-- − --></mo>
            <mi aria-label="phi ">&#x03D5;<!-- ϕ --></mi>
            <mo aria-label="right paren ">)</mo>
          </mrow>
          <msup>
            <mi aria-label="e ">e</mi>
            <mrow>
            <mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
              <mfrac aria-label="two fifth ">
                <mn>2</mn>
                <mn>5</mn>
              </mfrac>
              <mi aria-label="pie ">&#x03C0;<!-- π --></mi>
            </mrow>
          </msup>
        </mrow>
      </mfrac>
      <mo aria-label="is equal to ">=</mo>
      <mn aria-label="one ">1</mn>
      <mo aria-label="plus ">+</mo>
      <mrow aria-label="continued fraction" ><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
      <mfrac>
        <msup>
          <mi aria-label="e ">e</mi>
          <mrow>
            <mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
            <mo aria-label="minus ">&#x2212;<!-- − --></mo>
            <mn aria-label="two ">2</mn>
            <mi aria-label="pie ">&#x03C0;<!-- π --></mi>
          </mrow>
        </msup>
        <mrow>
          <mrow aria-label="over "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
          <mn aria-label="one ">1</mn>
          <mo  aria-label="plus ">+</mo>
          <mrow aria-label="fraction "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
          <mfrac>
            <msup>
              <mi aria-label="e ">e</mi>
              <mrow class="MJX-TeXAtom-ORD">
            <mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
                <mo aria-label="minus ">&#x2212;<!-- − --></mo>
                <mn aria-label="four ">4</mn>
                <mi aria-label="pie ">&#x03C0;<!-- π --></mi>
              </mrow>
            </msup>
            <mrow>
              <mrow aria-label="over "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
              <mn aria-label="one ">1</mn>
              <mo aria-label="plus ">+</mo>
              <mrow aria-label="fraction "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
              <mfrac>
                <msup>
                  <mi aria-label="e ">e</mi>
                  <mrow class="MJX-TeXAtom-ORD">
            <mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
                    <mo aria-label="minus ">&#x2212;<!-- − --></mo>
                    <mn aria-label="six ">6</mn>
                    <mi aria-label="pie ">&#x03C0;<!-- π --></mi>
                  </mrow>
                </msup>
                <mrow>
                  <mrow aria-label="over "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
                  <mn aria-label="one ">1</mn>
                  <mo aria-label="plus ">+</mo>
                  <mrow aria-label="fraction"></mrow>
                  <mfrac>
                    <msup>
                      <mi aria-label="e ">e</mi>
                      <mrow class="MJX-TeXAtom-ORD">
            <mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
                        <mo aria-label="minus ">&#x2212;<!-- − --></mo>
                        <mn aria-label="eight ">8</mn>
                        <mi aria-label="pie ">&#x03C0;<!-- π --></mi>
                      </mrow>
                    </msup>
                    <mrow>
                      <mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
                      <mn aria-label="one ">1</mn>
                      <mo aria-label="plus ">+</mo>
                      <mo aria-label="… ">&#x2026;<!-- … --></mo>
                    </mrow>
                  </mfrac>
                </mrow>
              </mfrac>
            </mrow>
          </mfrac>
        </mrow>
      </mfrac>
    </mrow>
</math>
  </li>
  <li>
    <math display="block">
    <mrow>
      <mrow>
      <mrow aria-label="sum of"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mrow></mrow>
      <mfrac>
        <msup aria-label="q squared">
          <mi>q</mi>
          <mn>2</mn>
        </msup>
        <mrow>
          <mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
          <mo stretchy="false">(</mo>
          <mn>1</mn>
          <mo>&#x2212;<!-- − --></mo>
          <mi>q</mi>
          <mo stretchy="false">)</mo>
        </mrow>
      </mfrac>
      <mo>+</mo>
      <mfrac>
        <msup aria-label="q to the six">
          <mi>q</mi>
          <mn>6</mn>
        </msup>
        <mrow>
          <mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
          <mo stretchy="false">(</mo>
          <mn>1</mn>
          <mo>&#x2212;<!-- − --></mo>
          <mi>q</mi>
          <mo stretchy="false">)</mo>
          <mo stretchy="false">(</mo>
          <mn>1</mn>
          <mo>&#x2212;<!-- − --></mo>
          <msup aria-label="q squared">
            <mi>q</mi>
            <mn>2</mn>
          </msup>
          <mo stretchy="false">)</mo>
        </mrow>
      </mfrac>
      <mo>+</mo>
      <mo>&#x22EF;<!-- ⋯ --></mo>
    </mrow>
      <mo>=</mo>
      <mrow>
      <munderover>
        <mo aria-label="product from">&#x220F;<!-- ∏ --></mo>
        <mrow class="MJX-TeXAtom-ORD">
          <mi>j</mi>
          <mo>=</mo>
          <mn>0</mn>
        </mrow>
        <mrow class="MJX-TeXAtom-ORD">
          <mrow aria-label="to"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
          <mi mathvariant="normal">&#x221E;<!-- ∞ --></mi>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <mrow>
          <mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
          <mrow>
          <mo stretchy="false">(</mo>
          <mn>1</mn>
          <mo>&#x2212;<!-- − --></mo>
          <msup>
            <mi>q</mi>
            <mrow class="MJX-TeXAtom-ORD">
              <mrow aria-label="to the power of"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
              <mn>5</mn>
              <mi>j</mi>
              <mo>+</mo>
              <mn>2</mn>
            </mrow>
          </msup>
          <mo stretchy="false">)</mo>
          </mrow>
          <mrow>
          <mo stretchy="false">(</mo>
          <mn>1</mn>
          <mo>&#x2212;<!-- − --></mo>
          <msup>
            <mi>q</mi>
            <mrow class="MJX-TeXAtom-ORD">
              <mrow aria-label="to the power of"></mrow>
              <mn>5</mn>
              <mi>j</mi>
              <mo>+</mo>
              <mn>3</mn>
            </mrow>
          </msup>
          <mo stretchy="false">)</mo>
          </mrow>
        </mrow>
      </mfrac>
        </mrow>
      <mrow>
      <mo>,</mo>
      <mspace width="1em" />
      <mspace width="1em" />
      <mrow>
        <mtext>for&#xA0;</mtext>
        <mrow class="MJX-TeXAtom-ORD">
          <mrow class="MJX-TeXAtom-ORD">
            <mo aria-label="absolute value of" stretchy="false">|</mo>
          </mrow>
          <mi>q</mi>
          <mrow class="MJX-TeXAtom-ORD">
            <mo role="presentation" stretchy="false">|</mo>
          </mrow>
          <mo aria-label="less than">&lt;</mo>
          <mn>1</mn>
        </mrow>
      </mrow>
      <mo>.</mo>
        </mrow>
    </mrow>
</math>
  </li>
  <li>
    <p>Finally, while display equations look good for a page of samples, the ability to mix math and text in a paragraph is also important. This expression <math>
    <mrow>
      <mrow aria-label="square root of"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
      <msqrt role="presentation">
        <mn aria-label="three ">3</mn>
        <mi aria-label=" x ">x</mi>
        <mo aria-label="minus">&#x2212;<!-- − --></mo>
        <mn aria-label=" one ">1</mn>
      </msqrt>
      <mo aria-label=" plus ">+</mo>
      <msup>
        <mrow>
          <mo stretchy="false" aria-label=" left parenthesis ">(</mo>
          <mn aria-label=" one ">1</mn>
          <mo aria-label=" plus ">+</mo>
          <mi aria-label=" x ">x</mi>
          <mo aria-label=" right parenthesis " stretchy="false">)</mo>
        </mrow>
        <mn aria-label=" squared ">2</mn>
      </msup>
    </mrow>
</math> is an example of an inline equation. As you see, MathJax equations can be used this way as well, without unduly disturbing the spacing between lines.</p>
  </li>
  <li>
    <math display="block">
    <mrow>
      <msub aria-label=" bold V sub one ">
        <mrow class="MJX-TeXAtom-ORD">
          <mi mathvariant="bold">V</mi>
        </mrow>
        <mn>1</mn>
      </msub>
      <mo aria-label=" times ">&#x00D7;<!-- × --></mo>
      <msub>
        <mrow aria-label=" bold V sub 2" class="MJX-TeXAtom-ORD">
          <mi mathvariant="bold">V</mi>
        </mrow>
        <mn>2</mn>
      </msub>
      <mo aria-label=" equals">=</mo>
      <mrow>
        <mo aria-label=" the determinant of ">|</mo>
        <mtable rowspacing="4pt" columnspacing="1em">
          <mtr>
            <mtd>
              <mrow aria-label=" bold i " class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">i</mi>
              </mrow>
            </mtd>
            <mtd>
              <mrow aria-label=" bold j " class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">j</mi>
              </mrow>
            </mtd>
            <mtd>
              <mrow aria-label=" bold k " class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">k</mi>
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mfrac aria-label=" derivative of X by u " >
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>X</mi>
                </mrow>
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>u</mi>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mfrac aria-label=" derivative of Y by u " >
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>Y</mi>
                </mrow>
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>u</mi>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mn aria-label=" zero ">0</mn>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mfrac aria-label=" derivative of X by v " >
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>X</mi>
                </mrow>
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>v</mi>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mfrac aria-label=" derivative of Y by v " >
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>Y</mi>
                </mrow>
                <mrow>
                  <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
                  <mi>v</mi>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mn aria-label=" zero ">0</mn>
            </mtd>
          </mtr>
        </mtable>
        <mo>|</mo>
      </mrow>
    </mrow>
</math>
  </li>
  <li>
    <math display="block">
    <mtable columnalign="right left right left right left right left right left right left" rowspacing="3pt" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" displaystyle="true">
      <mtr>
        <mtd>
          <mi aria-label=" nabla " mathvariant="normal">&#x2207;<!-- ∇ --></mi>
          <mo aria-label=" times ">&#x00D7;<!-- × --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mover>
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">B</mi>
              </mrow>
              <mo stretchy="false">&#x2192;<!-- → --></mo>
            </mover>
          </mrow>
          <mo>&#x2212;<!-- − --></mo>
          <mspace width="thinmathspace" />
          <mfrac>
            <mn>1</mn>
            <mi>c</mi>
          </mfrac>
          <mspace width="thinmathspace" />
          <mfrac>
            <mrow>
              <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
              <mrow class="MJX-TeXAtom-ORD">
                <mover>
                  <mrow class="MJX-TeXAtom-ORD">
                    <mi mathvariant="bold">E</mi>
                  </mrow>
                  <mo stretchy="false">&#x2192;<!-- → --></mo>
                </mover>
              </mrow>
            </mrow>
            <mrow>
              <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
              <mi>t</mi>
            </mrow>
          </mfrac>
        </mtd>
        <mtd>
          <mi></mi>
          <mo>=</mo>
          <mfrac>
            <mrow>
              <mn>4</mn>
              <mi>&#x03C0;<!-- π --></mi>
            </mrow>
            <mi>c</mi>
          </mfrac>
          <mrow class="MJX-TeXAtom-ORD">
            <mover>
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">j</mi>
              </mrow>
              <mo stretchy="false">&#x2192;<!-- → --></mo>
            </mover>
          </mrow>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
          <mo>&#x22C5;<!-- ⋅ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mover>
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">E</mi>
              </mrow>
              <mo stretchy="false">&#x2192;<!-- → --></mo>
            </mover>
          </mrow>
        </mtd>
        <mtd>
          <mi></mi>
          <mo>=</mo>
          <mn>4</mn>
          <mi>&#x03C0;<!-- π --></mi>
          <mi>&#x03C1;<!-- ρ --></mi>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
          <mo>&#x00D7;<!-- × --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mover>
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">E</mi>
              </mrow>
              <mo stretchy="false">&#x2192;<!-- → --></mo>
            </mover>
          </mrow>
          <mspace width="thinmathspace" />
          <mo>+</mo>
          <mspace width="thinmathspace" />
          <mfrac>
            <mn>1</mn>
            <mi>c</mi>
          </mfrac>
          <mspace width="thinmathspace" />
          <mfrac>
            <mrow>
              <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
              <mrow class="MJX-TeXAtom-ORD">
                <mover>
                  <mrow class="MJX-TeXAtom-ORD">
                    <mi mathvariant="bold">B</mi>
                  </mrow>
                  <mo stretchy="false">&#x2192;<!-- → --></mo>
                </mover>
              </mrow>
            </mrow>
            <mrow>
              <mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
              <mi>t</mi>
            </mrow>
          </mfrac>
        </mtd>
        <mtd>
          <mi></mi>
          <mo>=</mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mover>
              <mrow class="MJX-TeXAtom-ORD">
                <mn mathvariant="bold">0</mn>
              </mrow>
              <mo stretchy="false">&#x2192;<!-- → --></mo>
            </mover>
          </mrow>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
          <mo>&#x22C5;<!-- ⋅ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mover>
              <mrow class="MJX-TeXAtom-ORD">
                <mi mathvariant="bold">B</mi>
              </mrow>
              <mo stretchy="false">&#x2192;<!-- → --></mo>
            </mover>
          </mrow>
        </mtd>
        <mtd>
          <mi></mi>
          <mo>=</mo>
          <mn>0</mn>
        </mtd>
      </mtr>
    </mtable>
    </math>
  </li>
</ol>

<p><a href="https://cdn.mathjax.org/mathjax/latest/test/sample.html">Original Source</a></p>

            
          
!
            
              var renderMath = function() {
  var maths = document.querySelectorAll('math');
  for (let i = 0; i < maths.length; i++) {
    let mathy = maths[i];
    let math = mathy.cloneNode(true);
    let span = document.createElement('span');
    span.setAttribute('style', 'visibility:hidden;');
    span.appendChild(math);
    // hack for IE11
    span.innerHTML = span.innerHTML;
    document.body.appendChild(span);
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, span]);
    MathJax.Hub.Queue(function() {
      let output = span.firstChild.nextSibling;
      // hack for IE11
      mathy.parentNode.insertBefore(output.cloneNode(true), mathy);
      mathy.parentNode.removeChild(mathy);
      document.body.removeChild(span);
    });
  }
}

window.MathJax = {
  skipStartupTypeset: true,
  "fast-preview": {
    disable: true
  },
  "AssistiveMML": {
    disabled: true
  },
  SVG: {
    addMMLclasses: true,
    useGlobalCache: false
  },
  AuthorInit: function() {
    MathJax.Hub.Register.StartupHook("Begin", function() {
      MathJax.Hub.Queue(
        renderMath()
      );
    });
    MathJax.Hub.Register.MessageHook("End Math", function() {
      MathJax.Hub.Queue(function() {
        let img = document.querySelectorAll('svg');
        [].forEach.call(img, function(x) {
          x.removeAttribute('role');
          let descendants = x.querySelectorAll('*');
          [].forEach.call(descendants, function(y){
            if (!y.getAttribute('aria-label')) y.setAttribute('role', 'presentation');
            // else y.setAttribute('role', 'figure') // would like to find a HACK role to avoid "graphics" in NVDA/IE11
          })
        });
      });
    });
  }
};

var mj = function() {
  var radio = document.getElementById('html');
  var renderer = '';
  if (radio.checked) renderer = 'CHTML';
  else renderer = 'SVG'
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_' + renderer + '-full';
  document.getElementsByTagName('head')[0].appendChild(script);
  this.setAttribute('disabled', true);
}
var button = document.getElementById('mj');
button.addEventListener("click", mj);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console