Embedding math with replacemath

Replacemath is still maintained and you should absolutely use it if it works for you. But nowadays there are other tools for putting math into webpages that you might find have more features and polish: Whatever you use, good luck!   —Randall

Replacemath lets you embed LaTeX code in your webpages, even if the server-side software -- like your wiki or blog program -- doesn't support it. 

To get started, put this HTML at the bottom of your webpage:

<script type="text/javascript" src="http://mathcache.s3.amazonaws.com/replacemath.js"></script>
<script type="text/javascript">
replaceMath( document.body );
</script>

Once you've done that, to create inline math, use standard LaTeX math delimiters -- for example, $ \LaTeX $ or \( \LaTeX \). Likewise, to insert display math, use $$ \LaTeX $$ or \[ \LaTeX \].

That's all!  TeX rendering is done with mathTeX by John Forkosh and pydvi2svg by Wojciech Muła, and cached using Google App Engine.  Here is some sample rendered math:

$$ \pi = 4 \sum_{k=1}^{\infty} \frac{(-1)^{k+1}}{2k-1}$$
$$ \int_0^1 \sqrt x \,dx = \int_0^1 x^{\frac{1}{2}} \,dx = \int_0^1 d \left({\textstyle \frac 2 3} x^{\frac{3}{2}}\right) = {\textstyle \frac 2 3} $$

If you can't insert script tags in your page, check out the bookmarklets in the next section, which you can use to compose blog posts and whatnot with the TeX image tags already in them.

Should you need to to prevent certain $ signs from triggering LaTeX rendering, replace $ with the equivalent HTML <span>$</span> or &#36;, or put the code inside a <pre> or <code> block if appropriate.

Math is rendered as SVG on browsers that support it, which makes it look nicer when printed or zoomed in. Math won't be rendered in contexts that don't support scripts, like RSS feeds, or for users who have scripts disabled.

Experimental: TeX bookmarklets for e-mail, etc. (Firefox and Safari only)

Drag the links below into your bookmarks toolbar in the latest versions of Firefox or Safari and you'll be able to convert TeX to image tags and back in the rich-text editors in GMail and some blog software. Sorry -- no Internet Explorer support.

TeX to images

Images to TeX

Macros

The rendering cache supports basic TeX macros and command definitions. Upload your .sty file below and you'll get a special JavaScript block you can use in your page:

To provide macro support, the server scans each TeX snippet for any of the commands you defined. Large macros, or .sty files that do more than simply define new commands with \def and \newcommand, may not work.

Pages with dark backgrounds

The default code produces images for pages with light backgrounds.  Here's code for pages with dark backgrounds:

<script src="http://mathcache.s3.amazonaws.com/replacemath.js" type="text/javascript"></script>
<script type="text/javascript">
window.mathPreamble =
    '\\usepackage{color}\\pagecolor{black}\\color{white} ';
replaceMath(document.body);
</script>

In general, you can set window.mathPreamble to any LaTeX that you'd like to be processed before your math.

Advanced: filtering specific parts of a page

The example code will search a whole page for math to replace.  You don't always want that. 

<script src="http://mathcache.s3.amazonaws.com/replacemath.js" type="text/javascript"></script>
window.mathPreamble =  // White text on dark background
    '\\parstyle\\usepackage{color}\\pagecolor[rgb]{.0863,.0784,.0627}\\color{white}\\large ';

// Instead of replaceMath(document.body), find <li> tags corresponding 
// to the comments and call replaceMath on them.
var ols = document.getElementsByTagName('ol');
for ( var i = 0; i < ols.length; ++i )
    if ( /commentlist/i.test( ols[i].className ) )      // munge only comments
        for ( var li = ols[i].firstChild; li; li = li.nextSibling )
             if ( li.tagName ) replaceMath(li);
</script>

You can also call replaceMath on dynamically generated elements.

Troubleshooting

LaTeX enclosed in $...$ isn't being rendered, but I did not set window.mathNoDollar.  Use $$..$$, \[...\], or \(...\). When the mathNoDollar option is off, heuristics are used to figure out whether text between $ signs is meant as LaTeX, and they can be wrong.

Plain text is being incorrectly treated as LaTeX.    This should be rare: dollar signs or some other LaTeX delimiter probably appeared in your webpage's text. Set window.mathNoDollar=1; before calling replaceMath(), or put the mishandled text in a <pre> or <code> block, or wrap one of the individual \ or $ characters involved in a <span> tag.

Author and license

Randall Farmer, .  Public domain, 2007-2011. Please e-mail me any questions or just let me know you're using the script!