MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.

No more setup for readers. No more browser plugins. No more font installations… It just works.

It is very easy to use, and because it is javascript based, it will probably work with most CMS systems such as Wordpress, Joomla, Concrete5 etc.

MathJax is very customisable, and full documentation is available from the official site. This little guide below should get you started.

**First, add the mathJax javascript code to your site by adding the following to the <head> section of your page html.**

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

(It can also go in the *body *if necessary, but the *head* is to be preferred.)

For example, on a Joomla site, edit the file *templates/[current_theme]/index.php*

To put mathematics in your web page, you can use *TeX* and *LaTeX* notation between these delimiters anywhere you have normal text on your site:

\(...\)

for example:

\(\begin{equation}

\frac{1}{k}\log_2 c(f)\;\tfrac{1}{k}\log_2 c(f)\;

\end{equation}\)

will show the following:

\(\begin{equation}

\frac{1}{k}\log_2 c(f)\;\tfrac{1}{k}\log_2 c(f)\;\end{equation}\)

The maths uses web fonts and will scale just like normal text. For example this equation is styled as a heading:

\(\pi=\sum\limits_{n=0}^{+\infty} \frac{{(n!)^2 2^{n+1}}}{(2n+1)!}\)

styled as H1 will show:

These delimirets may be used in-line for example:

the equation \(\pi=\sum\limits_{n=0}^{+\infty} \frac{{(n!)^2 2^{n+1}}}{(2n+1)!}\)

defines \(\pi\)

will show:

the equation \(\pi=\sum\limits_{n=0}^{+\infty} \frac{{(n!)^2 2^{n+1}}}{(2n+1)!}\) defines \(\pi\)

All this is configurable, and you can use MATHML instead of TeX or LaTex. See the MathJax documentation for details.

Colour is also supported using CSS styles.

\(\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }\)

There is a good **quick introduction to Maths in LaTeX** here. Skip down to the "Math in LaTeX" section.

**Find a LaTeX symbol** code quickly just by** drawing it** on this page http://detexify.kirelabs.org/classify.html

Posted by
Jarno Ralli
on
Aug 24th, 2011

Hi Ian,I'm using MathJax in Joomla and the integration symbol does not come out "right" (the height is too low). You can see it at http://atc.ugr.es/~jarnor/index.php/investigation/disparity under the "Extended model".

The code is:

\[\begin{equation} \min_{d} \int\limits_{\Omega} \Psi \Big( Edata(d)^2 \Big) dx + \alpha \int\limits_{\Omega} \Psi \Big( Esmooth(d) \Big) dx \end{equation}\]

Any ideas how to fix this?

Thanx in advance,

Jarno

Posted by
Jarno Ralli
on
Aug 24th, 2011

Update to the previous:In Linux-Firefox the problem is solved by adding the following:

MathJax.Hub.Config({

MMLorHTML: {

prefer: {Firefox: "HTML"}

}

});

Now everything renders fine!!!

Cheers,

Jarno

Posted by
Ian
on
Aug 24th, 2011

Hi Jarno,Glad you solved the problem.

I've added that code to this site now. Looking better.

Cheers!

Ian

Posted by
mahamood
on
Sep 8th, 2011

hithis is lines to be added to header..

MathJax.Hub.Config({

extensions: ["tex2jax.js"],

jax: ["input/TeX", "output/HTML-CSS"],

tex2jax: {

inlineMath: [ ['$','$'], ["\\(","\\)"] ],

displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

},

"HTML-CSS": { availableFonts: ["TeX"] }

});

Posted by
mahamood
on
Sep 8th, 2011

hicorrection to previous comment

MathJax.Hub.Config({

extensions: ["tex2jax.js"],

jax: ["input/TeX", "output/HTML-CSS"],

tex2jax: {

inlineMath: [ ['$','$'], ["\\(","\\)"] ],

displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

},

"HTML-CSS": { availableFonts: ["TeX"] }

});

Posted by
mahamood
on
Sep 8th, 2011

MathJax.Hub.Config({extensions: ["tex2jax.js"],jax: ["input/TeX", "output/HTML-CSS"],

tex2jax: {

inlineMath: [ ['$','$'], ["\\(","\\)"] ],

displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

},

"HTML-CSS": { availableFonts: ["TeX"] }});

Posted by
Maitane
on
Sep 18th, 2011

Thank you very much!!
Posted by
manoj
on
Oct 16th, 2011

Hi.. I added the code to the head section of my template(joomla). but the symbols are not getting displayed. Any suggestions please.. Iam using Firefox and Linux
Posted by
Ian
on
Oct 17th, 2011

Hi manoj, perhaps there is a javascrpt error? Check with firebug.Other help here http://www.mathjax.org/docs/1.1/platforms/index.html

or ask on the MathJax User Group http://groups.google.com/group/mathjax-users/

Good luck. Ian

Posted by
roomboy
on
Mar 25th, 2012

the equation \(\pi=\sum\limits_{n=0}^{+\infty} \frac{{(n!)^2 2^{n+1}}}{(2n+1)!}\)defines \(\pi\)

Posted by
nw
on
Feb 5th, 2014

Could you explain how changed the colour of the last example using CSS. I'm having a difficult time getting this working.Cheers.
Posted by
admin
on
Feb 5th, 2014

Hi,that specific example is just wrapped in a styled .

The actual html is:

<div style="background: #008800; color: pink;">

<p style="font-size: 24px;">\(\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }\)</p>

</div>

Hope that helps,

Ian