Tags:
math1 create new tag
, view all tags
After look into some LaTeX-style math equation rendering plugins (e.g. LaTeXToMathMLPlugin), I noticed that there are two reasonable Javascript-only markup solutions. MathML itself is too verbose, and can't display at all in IE without a plugin, or in Netscape/Mozilla unless you send back an XML content-type.

## Method 1 (AsciiMathML)

First:

<script src="http://www1.chapman.edu/~jipsen/mathml/ASCIIMathML.js"></script>

The javascript is at http://www1.chapman.edu/~jipsen/mathml/ASCIIMathML.js

You can write more-or-less intuitive plain text equations, surrounded by backticks, like this:

\sum_(x=1)^y (x+2)/y
(which renders as \sum_(x=1)^y (x+2)/y)

A backtick looks like \, and is usually on the key to the left of the 1 key and above TAB; it's the same key that you shift to get a tilde (~).

The parser also supports (roughly) LaTeX math syntax as well as the simpler ASCII math. You can experiment in real time with this javascript editor: http://www1.chapman.edu/~jipsen/mathml/asciimatheditor/

If you want to change the color from red, use:

<script>mathcolor="Black"</script>

If you want to include backticks in your text for purposes other than delimiting equations, surround your text in <pre> or <code> HTML tags, or just precede the backtick with a backslash, like so:

\

Finally:

<script>translate();</script>

For my own use, I slightly modified the javascript so that it doesn't use \$ as a delimiter, and so it doesn't process text inside CODE tags (in addition to the default PRE and TEXTAREA).

## Method 2 (jsMath)

This is the prettier-looking option, if you take the time to install special fonts. It requires a little copy/paste boilerplate, though.

Paste this on top of a page you want to display LaTeX-style math in:

<SCRIPT SRC="http://www.math.union.edu/~dpvc/jsMath/jsMath/jsMath.js"></SCRIPT>

Inline math, written:

<SPAN CLASS="math"> f(x) = x+2 </SPAN>
looks like this:
If f(x) = x+2 , then f(4) = 6 .

Display mode math, written:

<DIV CLASS="math"> \sum_{i=1}^{n} i = {n(n+1)\over 2} </DIV>
looks like this:
\sum_{i=1}^{n} i = {n(n+1)\over 2}

Paste this at the bottom of the page to actually render the equations:

<SCRIPT> jsMath.Process() </SCRIPT>