Computer Science Mojo

~ David's Notes on coding, software and computer science




Post

How to use MathJax to format HTML math expressions

Category: Web     Tag: HTML   MathJax   Web design  
By: David     On: Thu 27 August 2015      Pageviews: 172

formatting math expressions with HTML and CSS alone is possible yet pretty frustrating, a simpler and more beautiful alternative is to use MathJax, which is a JS display engine.

Software

Reading

1. Include MathJax

To start using MathJax, simple include the following code in head or body tag:

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

2. Formatting

MathJax allows the 3 following notations:

  • TeX and LaTeX
  • MathML
  • AsciiMath

The examples will be shown using TeX and LaTeX notation with delimiters for:
center display mathematics:

$$...$$

inline mathematics:

\(...\)

3. Examples:

Superscript:
\(x^2\)

\(x^2\)

Subscript:
\({xy}_0\)

\({xy}_0\)

Fraction:
\(a \over c\)

\(a \over c\)

Square root:
\(\sqrt{a + b}\)

\(\sqrt{a + b}\)

Not equal to:
\(a \ne 0\)

\(a \ne 0\)

Summation:
\(\sum_0^n\)

\(\sum_0^n\)

Integral:
\(\int_0^n\)

\(\int_0^n\)

Space:

\quad

Insert text:

\text{...}

Display mathematics: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$