´╗┐Embedding math with replacemath2.js

This is a script to make it easy to embed math notation in your webpages using John Forkosh's mathTeX, even if the server-side software -- your wiki or blog program -- doesn't support . 

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

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

Then include math anywhere in your webpage using standard TeX and LaTeX control characters; you can type $ \LaTeX $ or \( \LaTeX \) to insert inline math, or $$ \LaTeX $$ or \[ \LaTeX \] to insert display math.

TeX rendering is done by mathTeX by John Forkosh. 

Custom colors, servers, and sizes

The script will produce black equations on a white background by default.  If your webpage has a different color scheme, you can use commands from LaTeX's "color" package to make the math match.  Furthermore, the script allows you to set a global "window.mathPreamble" variable that can contain any LaTeX commands commands to set color and so forth before rendering each piece of math.  Here's an example:

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

Advanced: filtering specific parts of a page

The example code above will search a whole page for math to replace.  You don't always want that: if $...$ will only be used in the comments section of a blog, you might as well only filter that section.  Similarly, in blog comments and forum posts, you might want to filter each post or comment individually so that an unclosed \[ in one post doesn't screw up anything outside that post.  Here's the example above, modified to filter only comments on a WordPress blog:

<script src="http://mathcache.appspot.com/static/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);

You can also call replaceMath on dynamically generated elements.


Math enclosed in $...$ isn't being rendered.  The script is written to avoid treating regular uses of the dollar sign (as in "$5 million") as math.  Specifically, the spacing on either side of the expression matters: $ a $ is treated as math, and so is $a$, but $a $ and $ a$ are not.  Also, there must not be any HTML tags other than <br> between two $ signs.

I'd like to use $$, \(, or the like without it being treated as math.  Wrap the $ or \ characters in <span> tags.

Author and license

Randall Farmer, twotwotwo at gmail.  Public domain, 2007.