cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <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="http://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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console