<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title>MathJax MathML</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    pre{
      color: #0f0;
      background: #000;
    }
  </style>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
  <header>
    <h1>MathJax MathML</h1>
  </header>
  <main>
    <article>
      <section>
        <p>
          When
          <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mi>a</mi><mo>&#x2260;</mo><mn>0</mn>
          </math>,
          there are two solutions to
          <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
            <mo>+</mo> <mi>b</mi><mi>x</mi>
            <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
          </math>
          and they are
          <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
            <mi>x</mi> <mo>=</mo>
            <mrow>
              <mfrac>
                <mrow>
                  <mo>&#x2212;</mo>
                  <mi>b</mi>
                  <mo>&#x00B1;</mo>
                  <msqrt>
                    <msup><mi>b</mi><mn>2</mn></msup>
                    <mo>&#x2212;</mo>
                    <mn>4</mn><mi>a</mi><mi>c</mi>
                  </msqrt>
                </mrow>
                <mrow> <mn>2</mn><mi>a</mi> </mrow>
              </mfrac>
            </mrow>
            <mtext>.</mtext>
          </math>
        </p>
      </section>
    </article>
<pre>
  &lt;p&gt;
    When
    &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
      &lt;mi&gt;a&lt;/mi&gt;&lt;mo&gt;&amp;#x2260;&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;
    &lt;/math&gt;,
    there are two solutions to
    &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
      &lt;mi&gt;a&lt;/mi&gt;&lt;msup&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
      &lt;mo&gt;+&lt;/mo&gt; &lt;mi&gt;b&lt;/mi&gt;&lt;mi&gt;x&lt;/mi&gt;
      &lt;mo&gt;+&lt;/mo&gt; &lt;mi&gt;c&lt;/mi&gt; &lt;mo&gt;=&lt;/mo&gt; &lt;mn&gt;0&lt;/mn&gt;
    &lt;/math&gt;
    and they are
    &lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;&gt;
      &lt;mi&gt;x&lt;/mi&gt; &lt;mo&gt;=&lt;/mo&gt;
      &lt;mrow&gt;
        &lt;mfrac&gt;
          &lt;mrow&gt;
            &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
            &lt;mi&gt;b&lt;/mi&gt;
            &lt;mo&gt;&amp;#x00B1;&lt;/mo&gt;
            &lt;msqrt&gt;
              &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
              &lt;mo&gt;&amp;#x2212;&lt;/mo&gt;
              &lt;mn&gt;4&lt;/mn&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mi&gt;c&lt;/mi&gt;
            &lt;/msqrt&gt;
          &lt;/mrow&gt;
          &lt;mrow&gt; &lt;mn&gt;2&lt;/mn&gt;&lt;mi&gt;a&lt;/mi&gt; &lt;/mrow&gt;
        &lt;/mfrac&gt;
      &lt;/mrow&gt;
      &lt;mtext&gt;.&lt;/mtext&gt;
    &lt;/math&gt;
  &lt;/p&gt;
</pre>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2020</p>
  </footer>
  <!-- js -->
  <script>
    const log = console.log;
  </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.