How to write Math equations in Blogger and WordPress site using MathJax

Write mathematical equations in web pages, Blogger and Wordpress sites:

The MathJax Library enables the writing of mathematical equations in Blogger and Wordpress websites as well as in any online web page. You will learn how to write complicated mathematical and scientific equations or formulas in "HTML" format in this article, which can then be added to static or dynamic website pages on platforms like Blogger, WordPress, Wix, Joomla, Drupal, Magento, etc.

How to write Math equations in Blogger and WordPress site using MathJax - www.pdfcup.com

With the help of the MathJax Library, it is possible to create sophisticated mathematical equations and formulas that can be simply loaded into the web pages and are supported by HTML5. There are two scripts that must be imported before working on MathJax syntax; these scripts can be added to any specific web page as needed or directly into the "head" portion of the page.

These MathJax Script needs to add first either in 'head' or 'body' section, after that MathJax syntax will work properly.
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"> </script>
</body>

Note: MathJax script should only be added to specific web pages where formulas and equations are intended to be included. If it is added to the head section of a webpage, it will always be rendered even on pages that do not contain MathJax formulas. This will have an effect on how quickly a webpage loads.

Example 1: Write "Roots of Quadratic Equation" formula in XHTML using MathJax:

'Roots of Quadratic Equation' created by using MathJax Library:

$a x^{2} + b x + c = 0$

And, when $a \ne 0$, the another solution of 'Roots of Quadratic Equation' are:

$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a} .$

<html>
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
<p>
  <math xmlns="http://www.w3.org/1998/Math/MathML"  display="block">
  <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>  
  </p> 
</p>
</body>
</html>

<!-- 
Output:   $a x^{2} + b x + c = 0$ 
-->

<html>
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" asyncsrc="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
<p>
  <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>
</body>
</html>

<!-- 
Output:  $x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a} .$ 
-->

<!--
This is an Shortcut option to create any equation but it's require proper knowledge of MathJax syntax otherwise it will not work. 
Therefore, I recommended you to go with HTML option, once you understand the basics syntax then you can write every Mathematic Equations
-->

<html>
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" asyncsrc="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
<p>  
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
</body>
</html>


<!-- 
Output: 
When  $a \neq 0$ ,there are two solutions to  $a x^{2} + b x + c = 0$  and they are
 $x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a} .$ 
-->

Syntax: Write Mathematic equations using ASCIIMathML notation supported by MathJax:

The ASCIIMathML notation provides more flexibility to write the complex equations in english readable form. To active this notation an another script needs to be add into the web page.

<script>
		MathJax = {
				loader: {load: ['input/asciimath',  'output/chtml'] }
		 	     }
</script>

And creat the whole "Quadratic Equation" by just writing the following syntax along with "back-ticks" ( ` ) symbol:

<body>
<p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are</p>
<p style="text-align:center">	`x = (-b +- sqrt(b^2-4ac))/(2a) . ` </p>
</body>

Output:
When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are

`x = (-b +- sqrt(b^2-4ac))/(2a) . `

Example 2: Write "Roots of Quadratic Equation" using ASCIIMathML notation supported by MathJax:

<html>
<head>
	<script>
		MathJax = {
				loader: {load: ['input/asciimath', 'output/chtml']}
			}
	</script>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
	<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"> </script>
</head>
<body>
	<p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are</p>
	<p style="text-align:center">
	`x = (-b +- sqrt(b^2-4ac))/(2a) .`
	</p>
</body>
</html>

Output:

When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are

`x = (-b +- sqrt(b^2-4ac))/(2a) .`

As you can see, AscIIMath is much more flexible and simple to use when writing complex mathematical equations. Therefore, we will learn how to write equations in AscIIMath and MathML format in greater depth.

Example 3: Write Quotient Rule of Derivatives (Differentiation) formula in MathML and AscIIMath:

`frac{d}{dx}[frac{f(x)}{g(x)}] =(frac{d}{dx}[f(x)].g(x)- f(x). frac{d}{dx}[g(x)] )/[g(x)]^2`

<html>
<head>
	<script>
		MathJax = {
				loader: {load: ['input/asciimath', 'output/chtml']}
			}
	</script>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
	<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"> </script>
</head>
<body>
    <p>
		`frac{d}{dx}[frac{f(x)}{g(x)}]	=(frac{d}{dx}[f(x)].g(x)- f(x). frac{d}{dx}[g(x)] )/[g(x)]^2`
	</p>
</body>
</html>

Output: `frac{d}{dx}[frac{f(x)}{g(x)}] =` `(frac{d}{dx}[f(x)].g(x)- f(x). frac{d}{dx}[g(x)] )/[g(x)]^2`

<html>
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" asyncsrc="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
 <mstyle displaystyle="true">
    <mfrac>
      <mrow>
        <mi>d</mi>
      </mrow>
      <mrow>
        <mrow>
          <mi>d</mi>
          <mi>x</mi>
        </mrow>
      </mrow>
    </mfrac>
    <mrow>
      <mo>[</mo>
      <mfrac>
        <mrow>
          <mrow>
            <mi>f</mi>
            <mrow>
              <mo>(</mo>
              <mi>x</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
        </mrow>
        <mrow>
          <mrow>
            <mi>g</mi>
            <mrow>
              <mo>(</mo>
              <mi>x</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
        </mrow>
      </mfrac>
      <mo>]</mo>
    </mrow>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mfrac>
          <mrow>
            <mi>d</mi>
          </mrow>
          <mrow>
            <mrow>
              <mi>d</mi>
              <mi>x</mi>
            </mrow>
          </mrow>
        </mfrac>
        <mrow>
          <mo>[</mo>
          <mrow>
            <mi>f</mi>
            <mrow>
              <mo>(</mo>
              <mi>x</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
          <mo>]</mo>
        </mrow>
        <mo>.</mo>
        <mrow>
          <mi>g</mi>
          <mrow>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
          </mrow>
        </mrow>
        <mo>-</mo>
        <mrow>
          <mi>f</mi>
          <mrow>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
          </mrow>
        </mrow>
        <mo>.</mo>
        <mfrac>
          <mrow>
            <mi>d</mi>
          </mrow>
          <mrow>
            <mrow>
              <mi>d</mi>
              <mi>x</mi>
            </mrow>
          </mrow>
        </mfrac>
        <mrow>
          <mo>[</mo>
          <mrow>
            <mi>g</mi>
            <mrow>
              <mo>(</mo>
              <mi>x</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
          <mo>]</mo>
        </mrow>
      </mrow>
      <msup>
        <mrow>
          <mo>[</mo>
          <mrow>
            <mi>g</mi>
            <mrow>
              <mo>(</mo>
              <mi>x</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
          <mo>]</mo>
        </mrow>
        <mn>2</mn>
      </msup>
    </mfrac>
  </mstyle>
</math>
</p>
</body>
</html>

Output: `frac{d}{dx}[frac{f(x)}{g(x)}] =(frac{d}{dx}[f(x)].g(x)- f(x). frac{d}{dx}[g(x)] )/[g(x)]^2`

AscIIMath Syntax Table

Operation symbols
AscIIMath Input Type	Tex alt	AscIIMath Output
+		`+`
-		`-`
*	cdot	`*`
**	ast	`**`
***	star	`***`
//		`//`
\\	backslash setminus	`\\`
xx	times	`xx`
-:	div	`-:`
\|><	ltimes	`\|><`
><\|	rtimes	`><\|`
\|><\|	bowtie	`\|><\|`
@	circ	`@`
o+	oplus	`o+`
ox	otimes	`ox`
o.	odot	`o.`
sum		`sum`
prod		`prod`
^^	wedge	`^^`
^^^	bigwedge	`^^^`
vv	vee	`vv`
vvv	bigvee	`vvv`
nn	cap	`nn`
nnn	bigcap	`nnn`
uu	cup	`uu`
uuu	bigcup	`uuu`

Miscellaneous symbols
AscIIMath Input Type	TeX alt	AscIIMath Output
2/3	frac{2}{3}	`2/3`
2^3		`2^3`
sqrt x		`sqrt x`
root(3)(x)		`root(3)(x)`
int		`int`
oint		`oint`
del	partial	`del`
grad	nabla	`grad`
+-	pm	`+-`
O/	emptyset	`O/`
oo	infty	`oo`
aleph		`aleph`
:.	therefore	`:.`
:'	because	`:'`
\|...\|	\|ldots\|	`\|...\|`
\|cdots\|		`\|cdots\|`
vdots		`vdots`
ddots		`ddots`
\|\ \|		`\|\ \|`
\|quad\|		`\|quad\|`
/_	angle	`/_`
frown		`frown`
/_\	triangle	`/_\`
diamond		`diamond`
square		`square`
\|__	lfloor	`\|__`
__\|	rfloor	`__\|`
\|~	lceiling	`\|~`
~\|	rceiling	`~\|`
CC		`CC`
NN		`NN`
QQ		`QQ`
RR		`RR`
ZZ		`ZZ`
"hi"	text(hi)	`"hi"`

Relation symbols
AscIIMath Input Type	TeX alt	AscIIMath Output
=		`=`
!=	ne	`!=`
<	lt	`<`
>	gt	`>`
<=	le	`<=`
>=	ge	`>=`
mlt	ll	`mlt`
mgt	gg	`mgt`
-<	prec	`-<`
-<=	preceq	`-<=`
>-	succ	`>-`
>-=	succeq	`>-=`
in		`in`
!in	notin	`!in`
sub	subset	`sub`
sup	supset	`sup`
sube	subseteq	`sube`
supe	supseteq	`supe`
-=	equiv	`-=`
~=	cong	`~=`
~~	approx	`~~`
prop	propto	`prop`

Logical symbols
AscIIMath Input Type	TeX alt	AscIIMath Output
and		`and`
or		`or`
not	neg	`not`
=>	implies	`=>`
if		`if`
<=>	iff	`<=>`
AA	forall	`AA`
EE	exists	`EE`
_\|_	bot	`_\|_`
TT	top	`TT`
\|--	vdash	`\|--`
\|==	models	`\|==`

Complex Solution
AscIIMath Input Type	AscIIMath Output
x^2+y_1+z_12^34	`x^2+y_1+z_12^34`
sin^-1(x)	`sin^-1(x)`
d/dxf(x) = lim_(h->0)(f(x+h)-f(x))/h	`d/dxf(x) = lim_(h->0)(f(x+h)-f(x))/h`
f(x) = sum_(n=0)^oo (f^((n))(a))/(n!)(x-a)^n	`f(x) = sum_(n=0)^oo (f^((n))(a))/(n!)(x-a)^n`
int_0^1f(x)dx	`int_0^1f(x)dx`
[[a,b],[c,d]]((n),(k))	`[[a,b],[c,d]]((n),(k))`
x/x = {(1,if x!=0),(text{undefined},if x=0):}	`x/x = {(1,if x!=0),(text{undefined},if x=0):}`
(a/b)/(c/d)	`(a/b)/(c/d)`
sqrt sqrt root3x	`sqrt sqrt root3x`
a/b/c/d	`a/b/c/d`
<< a,b >> and {:(x,y),(u,v):}	`<< a,b >> and {:(x,y),(u,v):}`
(a,b]={x in RR \| a < x <= b}	`(a,b]={x in RR \| a < x <= b}`
hat(ab) bar(xy) ulA vec v dotx ddot y	`hat(ab) bar(xy) ulA vec v dotx ddot y`
{::}_(\ 92)^238U	`{::}_(\ 92)^238U`
\stackrel"def"= or \stackrel{\Delta}{=}" "("or ":=)	`\stackrel"def"= or \stackrel{\Delta}{=}" "("or ":=)`
\|==	`\|==`

Grouping brackets
AscIIMath Input Type	TeX alt	AscIIMath Output
(		`(`
)		`)`
[		`[`
]		`]`
{		`{`
}		`}`
(:	langle	`(:`
:)	rangle	`:)`
<<		`<<`
>>		`>>`
{: x )		`{: x )`
( x :}		`( x :}`
abs(x)		`abs(x)`
floor(x)		`floor(x)`
ceil(x)		`ceil(x)`
norm(vecx)		`norm(vecx)`

Arrows
AscIIMath Input Type	TeX alt	AscIIMath Output
uarr	uparrow	`uarr`
darr	downarrow	`darr`
rarr	rightarrow	`rarr`
->	to	`->`
>->	rightarrowtail	`>->`
->>	twoheadrightarrow	`->>`
>->>	twoheadrightarrowtail	`>->>`
\|->	mapsto	`\|->`
larr	leftarrow	`larr`
harr	leftrightarrow	`harr`
rArr	Rightarrow	`rArr`
lArr	Leftarrow	`lArr`
hArr	Leftrightarrow	`hArr`

Accents
AscIIMath Input Type	TeX alt	AscIIMath Output
hat x		`hat x`
bar x	overline x	`bar x`
ul x	underline x	`ul x`
vec x		`vec x`
tilde x		`tilde x`
dot x		`dot x`
ddot x		`ddot x`
overset(x)(=)	overset(x)(=)	`overset(x)(=)`
underset(x)(=)		`underset(x)(=)`
ubrace(1+2)	underbrace(1+2)	`ubrace(1+2)`
obrace(1+2)	overbrace(1+2)	`obrace(1+2)`
color(red)(x)		`color(red)(x)`
cancel(x)		`cancel(x)`

Greek Letters
AscIIMath Input Type	AscIIMath Output	AscIIMath Input Type	AscIIMath Output
alpha	`alpha`
beta	`beta`
gamma	`gamma`	Gamma	`Gamma`
delta	`delta`	Delta	`Delta`
epsilon	`epsilon`
varepsilon	`varepsilon`
zeta	`zeta`
eta	`eta`
theta	`theta`	Theta	`Theta`
vartheta	`vartheta`
iota	`iota`
kappa	`kappa`
lambda	`lambda`	Lambda	`Lambda`
mu	`mu`
nu	`nu`
xi	`xi`	Xi	`Xi`
pi	`pi`	Pi	`Pi`
rho	`rho`
sigma	`sigma`	Sigma	`Sigma`
tau	`tau`
upsilon	`upsilon`
phi	`phi`	Phi	`Phi`
varphi	`varphi`
chi	`chi`
psi	`psi`	Psi	`Psi`
omega	`omega`	Omega	`Omega`

Font commands
AscIIMath Input Type	TeX alt	AscIIMath Output
bb "AaBbCc"	mathbf "AaBbCc"	`bb "AaBbCc"`
bbb "AaBbCc"	mathbb "AaBbCc"	`bbb "AaBbCc"`
cc "AaBbCc"	mathcal "AaBbCc"	`cc "AaBbCc"`
tt "AaBbCc"	mathtt "AaBbCc"	`tt "AaBbCc"`
fr "AaBbCc"	mathfrak "AaBbCc"	`fr "AaBbCc"`
sf "AaBbCc"	mathsf "AaBbCc"	`sf "AaBbCc"`

PDFcup.com