TeX and LaTeX in HTML documents
HTML Special Characters
Keep in mind that your mathematics is part of an HTML document, so you
need to be aware of the special characters used by HTML as part of its
markup. There cannot be HTML tags within the math delimiters (other
than <br>
, <wbr>
, and HTML comments) as TeX-formatted math
does not include HTML tags. Also, since the mathematics is initially
given as text in the page, you need to be careful that your
mathematics doesn’t look like HTML tags to the browser, which parses
the page before MathJax gets to see it. In particular, that means
that you have to be careful about things like less-than and
greater-than signs (<
and >
), and ampersands (&
), which
have special meaning to web browsers. For example,
... when $x<y$ we have ...
will cause a problem, because the browser will think <y
is the
beginning of a tag named y
(even though there is no such tag in
HTML). When this happens, the browser will think the tag continues up
to the next >
in the document (typically the end of the next
actual tag in the HTML file), and you may notice that you are missing
part of the text of the document. In the example above, the “<y
”
and “we have ...
” will not be displayed because the browser thinks
it is part of the tag starting at <y
. This is one indication you
can use to spot this problem; it is a common error and should be
avoided.
Usually, it is sufficient simply to put spaces around these symbols to cause the browser to avoid them, so
... when $x < y$ we have ...
should work. Alternatively, you can use the HTML entities <
,
>
and &
to encode these characters so that the browser
will not interpret them, but MathJax will. E.g.,
... when $x < y$ we have ...
Finally, there are \lt
and \gt
macros defined to make it
easier to enter <
and >
using TeX-like syntax:
... when $x \lt y$ we have ...
Again, keep in mind that the browser interprets your text before MathJax does.
Interactions with Content-Management Systems
Another source of difficulty is when MathJax is used in
content-management systems that have their own document processing
commands that are interpreted before the HTML page is created. For
example, many blogs and wikis use formats like Markdown to allow you
to create the content of your pages. In Markdown, the underscore is
used to indicate italics, and this usage will conflict with MathJax’s
use of the underscore to indicate a subscript. Since Markdown is
applied to the page first, it may convert your subscript markers into
italics (inserting <i>
or <em>
tags into your mathematics,
which will cause MathJax to ignore the math).
Such systems need to be told not to modify the mathematics that appears between math delimiters. That usually involves modifying the content-management system itself, which is beyond the means of most page authors. If you are lucky, someone else will already have done this for you, and you may be able to find a MathJax plugin for your system using a web search.
If there is no plugin for your system, or if the plugin doesn’t handle
the subtleties of isolating the mathematics from the other markup that
it supports, then you may have to “trick” the content-management
system into leaving your mathematics untouched. Most
content-management systems provide some means of indicating text that
should not be modified (“verbatim” text), often for giving code
snippets for computer languages. You may be able use that to enclose
your mathematics so that the system leaves it unchanged and MathJax
can process it. For example, in Markdown, the back-tick (`
) is
used to mark verbatim text, so
... we have `\(x_1 = 132\)` and `\(x_2 = 370\)` and so ...
may be able to protect the underscores from being processed by Markdown.
Alternatively, some content-management systems use the backslash
(\
) as a special character for “escaping” other characters, and
you may be able to use that to prevent it from converting underscores
to italics. That is, you might be able to use
... we have $x\_1 = 132$ and $x\_2 = 370$ and so ...
to avoid the underscores from making 1 = 132$ and $x
into italics.
If your system uses backslashes in this way, that can help with italics, but it also causes difficulties in other ways. Because TeX uses this character to indicate a macro name, you need to be able to pass a backslash along to the page so that MathJax will be able to identify macro names; but if the content-management system is using them as escapes, it will remove the backslashes as part of its processing, and they won’t make it into the final web page. In such systems, you may have to double the backslashes in order to obtain a single backslash in your HTML page. For example, you may have to do
\\begin{array}{cc}
a & b \\\\
c & c
\\end{array}
to get an array with the four entries a, b, c, and d in two
rows. Note in particular that if you want \\
you will have to
double both backslashes, giving \\\\
.
That may also affect how you enter the math delimiters. Since the
defaults are \(...\)
and \[...\]
, if your system uses \
as
an escape of its own, you may need to use \\(...\\)
and
\\[...\\]
instead in order to get \(...\)
and \[...\]
into
the page where MathJax can process it.
Finally, if you have enabled single dollar signs as math delimiters
and you want to include a literal dollar sign in your web page (one
that doesn’t represent a math delimiter), you will need to prevent
MathJax from using it as a math delimiter. If you also enable the
processEscapes
configuration parameter (it is enabled by default),
then you can use \$
in the text of your page to get a dollar sign
(without the backslash) in the end. Alternatively, you can use
something like <span>$</span>
to isolate the dollar sign so that
MathJax will not use it as a delimiter.