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)


<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:


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:




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

Edit | Attach | Watch | Print version | History: r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r2 - 2005-02-16 - CrawfordCurrie
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.