Using Mathjax

Photo

MathJax is a javascript system for rendereing math equations in Tex, Lex, MML, and AsciiMath. All it takes is inclusion of the MathJax javascript in your displayed page. A plugin is not needed, but it does make it easier for non programmers.

Here is an example using TEX formats

<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>

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}.$$`

And ASCIimath format

<p>
The two solutions: 
``x_(1,2)=(-b+-sqrt(b^2 - 4a c))/(2a)``
</p>

The two solutions: `x_(1,2)=(-b+-sqrt(b^2 - 4a c))/(2a)`

No Plugin Needed

All you need to do is include the Mathjax javascript on the pages where you want mathjax to work. So simply place in your template in the head section

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

Then make sure you put your content mathjax equations inside an html block element like <p> or <div>. If you don't then markdown will try to process it and screw it up.

Auto Include with META field on the page

Since you probably don't want that big script running on every page, you could use a meta field on the pages where it should run. Lets say mathjax: anyvalue or mathjax: to turn off. Then in your template/layout just place this:

{% if meta.mathjax %}
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>
{% endif %}

Try it as a plugin

So if you are a light user of mathjax the above solutions are enough. But if you use it a lot, maybe you want to expand your use. To do that I also created a mathjax plugin.

More about Using Mathjax

MathML files

These can be rendered by most browsers. MathJax supports them.

[include file="%CONTENT_DIR%\files\sampleequation.mathml"]

Produces

[include file="%CONTENT_DIR%\files\sampleequation.mathml"]

ASCIMATH

I like the ASCIIMATH formats of mathjax more than the TEX/LEX or MATHML formats. It works fine as long as you include it in a block element html tag.

<p>
Suppose `ax^2+b x+c=0`  and `a!=0`. We first divide by `a` to get `x^2+b/a x+c/a=0`. 

Then we complete the square and obtain `x^2+b/a x+(b/(2a))^2-(b/(2a))^2+c/a=0`. 
The first three terms factor to give `(x+b/(2a))^2=(b^2)/(4a^2)-c/a`.
Now we take square roots on both sides and get `x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a)`.

Finally we subtract `b/(2a)` from both sides and simplify to get the two solutions: 
`x_(1,2)=(-b+-sqrt(b^2 - 4a c))/(2a)`
</p>

That text in your page PRODUCES

Example: Solving the quadratic equation. Suppose `ax^2+b x+c=0` and `a!=0`. We first divide by `a` to get `x^2+b/a x+c/a=0`. Then we complete the square and obtain `x^2+b/a x+(b/(2a))^2-(b/(2a))^2+c/a=0`. The first three terms factor to give `(x+b/(2a))^2=(b^2)/(4a^2)-c/a`. Now we take square roots on both sides and get `x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a)`. Finally we subtract `b/(2a)` from both sides and simplify to get the two solutions: `x_(1,2)=(-b+-sqrt(b^2 - 4a c))/(2a)`

More ASCIImathMl

Don't forget, the true delimeter is a single backtick. The backtick does not show up properly in the source description below. But you get the idea. The single quote mark should be a backtick in your real pages.

You can verify this table at the original source.

ASCIMath Source Rendered by MathJax Notes
'x^2+y_1+z_12^34' `x^2+y_1+z_12^34`subscripts as in TeX, but numbers are treated as a unit
'sin^-1(x)' ``sin^-1(x)` function names are treated as constants
'd/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h' `d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h` complex subscripts are bracketed, displayed under lim
'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` (a) must be bracketed, else the numerator is only ``a``
'x^2+y_1+z_12^34'`x^2+y_1+z_12^34`subscripts as in TeX, but numbers are treated as a unit
'sin^-1(x)' `sin^-1(x)` function names are treated as constants
/= 'd/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h' =//= `d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h` =/complex subscripts are bracketed, displayed under lim
'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`(a) must be bracketed, else the numerator is only ``a``
'int_0^1f(x)dx' `int_0^1f(x)dx` subscripts must come before superscripts
/= '[[a,b],[c,d]]((n),(k))' =//=`[[a,b],[c,d]]((n),(k))` =/matrices and column vectors are simple to type
'x/x={(1,if x!=0),(text{undefined},if x=0):}' `x/x={(1,if x!=0),(text{undefined},if x=0):}` piecewise defined functions are based on matrix notation
'a//b' `a//b` use // for inline fractions
'(a/b)/(c/d)' `(a/b)/(c/d)` with brackets, multiple fraction work as expected
'a/b/c/d' `a/b/c/d` without brackets the parser chooses this particular expression
'((a*b))/c' `((a*b))/c` only one level of brackets is removed; * gives standard product
'sqrt sqrt root3x' `sqrt sqrt root3x` spaces are optional, only serve to split strings that should not match
'<`< a,b >`> and {:(x,y),(u,v):}' `<`< a,b >`> and {:(x,y),(u,v):}` angle brackets and invisible brackets
'(a,b]={x in RR | a < x <= b}' `(a,b]={x in RR | a < x <= b}` grouping brackets don't have to match
'abc-123.45^-1.1' `abc-123.45^-1.1` non-tokens are split into single characters, but decimal numbers are parsed with possible sign
'hat(ab) bar(xy) ulA vec v dotx ddot y' `hat(ab) bar(xy) ulA vec v dotx ddot y` accents can be used on any expression (work well in IE)
'bb{AB3}.bbb(AB].cc(AB).fr{AB}.tt[AB].sf(AB)'`bb{AB3}.bbb(AB].cc(AB).fr{AB}.tt[AB].sf(AB)` font commands; can use any brackets around argument
/= 'stackrel"def"= or \stackrel{\Delta}{=}" "("or ":=)' =//= `stackrel"def"= or \stackrel{\Delta}{=}" "("or ":=)` =/ symbols can be stacked
/= '{::}_(\ 92)^238U' =//= `{::}_(\ 92)^238U` =/ prescripts simulated by subsuperscripts
Click me to Leave a Comment.
Image




0 / 5000

In your text you can use *italic*, **bold**, [links](http://example.org). These comments are moderated and published manually as soon as possible.

Comments: 0