Website Services

How to use MathJax

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:

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

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

Comments:

Posted by Jarno Ralli on
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
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
Hi Jarno,
Glad you solved the problem.
I've added that code to this site now. Looking better.

Cheers!
Ian
Posted by mahamood on
hi
this 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
hi
correction 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
MathJax.Hub.Config({extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
},
"HTML-CSS": { availableFonts: ["TeX"] }});
Posted by Maitane on
Thank you very much!!
Posted by manoj on
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
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
the equation \(\pi=\sum\limits_{n=0}^{+\infty} \frac{{(n!)^2 2^{n+1}}}{(2n+1)!}\)
defines \(\pi\)
Posted by nw on
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
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
Leave a Reply



(Your email will not be publicly displayed.)


Captcha Code

Click the image to see another captcha.


We use cookies. By browsing our site you agree to our use of cookies.

I understand (removes this notice). Find out more