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)

## Method 2 (jsMath)

If f(x) = x+2 , then f(4) = 6 .

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

Edit | Attach | ~~Watch~~ | Print version | History: r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions

Topic revision: r2 - 2005-02-16 - CrawfordCurrie

Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.

Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.

Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.