How to incorporate TeX mathematics into a website?
To display mathematics on the web, you have a number of options. There is the MathML standard which has the advantage of being endorsed by the same body that maintains the HTML and CSS standards. This isn't however, LaTeX based. There are tools to translate LaTeX code into MathML.
- texmath
- LaTeXMathML
There is the "heavy duty" MathJax option. You can either install this on your server or use their CDN.
The simplest approach might be to use something like codecogs to produce images that you just include with html img
tags...
here you find an example for MathJaX:
http://latex.userpage.fu-berlin.de/math.html
the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Mathedemo</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<h2>Math in TeX notation</h2>
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}.$$
$$ \begin{array}{rcll}
y & = & x^{2}+bx+c\\
& = & x^{2}+2\times\dfrac{b}{2}x+c\\
& = & \underbrace{x^{2}+2\times\dfrac{b}{2}x+\left(\frac{b}{2}\right)^{2}}-
{\left(\dfrac{b}{2}\right)^{2}+c}\\
& & \qquad\left(x+{\dfrac{b}{2}}\right)^{2}\\
& = & \left(x+\dfrac{b}{2}\right)^{2}-\left(\dfrac{b}{2}\right)^{2}+c
& \left|+\left({\dfrac{b}{2}}\right)^{2}-c\right.\\
y+\left(\dfrac{b}{2}\right)^{2}-c & = & \left(x+
\dfrac{b}{2}\right)^{2} & \left|\strut(\textrm{vertex form})\right.\\
y-y_{S} & = & (x-x_{S})^{2}\\
S(x_{S};y_{S}) & \,\textrm{or}\,
& S\left(-\dfrac{b}{2};\,\left(\dfrac{b}{2}\right)^{2}-c\right)
\end{array} $$
<h2>Math in MathML notation</h2>
When <math><mi>a</mi><mo>≠</mo><mn>0</mn></math>,
there are two solutions to <math>
<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> and they are
<math mode="display">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</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>
</body>
</html>
I'll add two math rendering alternatives only for reference purposes. Personally, I prefer to stick with either MathML or MathJaX.
Both MimeTeX and MathTeX are cgi
programs written in C.
MimeTeX
MimeTeX, licensed under the gpl, lets you easily embed LaTeX math in your html pages. It parses a LaTeX math expression and immediately emits the corresponding
gif
image, rather than the usual TeXdvi
. And mimeTeX is an entirely separate little program that doesn't use TeX or its fonts in any way. It's just onecgi
that you put in your site'scgi-bin/
directory, with no other dependencies. So mimeTeX is very easy to install. And it's equally easy to use. Just place an html<img>
tag in your document wherever you want to see the corresponding LaTeX expression. For example,
<img src="../cgi-bin/mimetex.cgi?f(x)=\int_{-\infty}^xe^{-t^2}dt"
alt="" border=0 align=middle>
immediately generates the corresponding gif image on-the-fly, displaying wherever you put that
<img>
tag. MimeTeX doesn't need intermediatedvi-to-gif
conversion, and doesn't create separategif
files for each converted expression. (But you can cache images with mimeTeX's-DCACHEPATH=\"path/\"
compile option.)
MathTeX
MathTeX, licensed under the gpl, is a
cgi
program that lets you easily embed LaTeX math in your own html pages, blogs, wikis, etc. It parses a LaTeX math expression and immediately emits the correspondinggif
(orpng
) image, rather than the usual TeXdvi
. So just place an html<img>
tag in your document wherever you want to see the corresponding LaTeX expression. For example,
<img src="/cgi-bin/mathtex.cgi?f(x)=\int_{-\infty}^xe^{-t^2}dt"
alt="" border=0 align="middle">
immediately generates the corresponding
gif
, displaying wherever you put that<img>
tag.mathTeX dependencies
MathTeX's uses the
latex
anddvipng
programs, along with all necessary fonts, etc, from your TeX distribution. Occasionally, you may need to downloaddvipng
separately. If you can't, or don't want to, installdvipng
, then you may optionally specify the–DDVIPS
and–DCONVERT
switches when compiling mathTeX. Then mathTeX usesdvips
from your TeX distribution, and convert from the ImageMagick package, instead ofdvipng
.[...]
These dependencies - always
latex
and eitherdvipng
ordvips/convert
- must all be installed on your server before you can run mathTeX. Ask your ISP or sysadmin if you have any questions or problems installing them. Or see mimeTeX if you can't install them.