Tags:
math1Add my vote for this tag 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>

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

Topic revision: r2 - 2005-02-16 - CrawfordCurrie
 
Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Download TWiki
TWiki logo Powered by PerlIdeas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2012 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.