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.
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).
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>
Equations will look better if you download some
TeX bitmap fonts
and restart your browser.
You can install either of these options site-wide by modifying view.*.tmpl and preview.tmpl: add the SCRIPT to the HEAD and onLoad="convert();" (or onLoad="jsMath.Process();") attribute to the BODY.
--
JonathanGraehl - 05 Aug 2004