Implement an API call to display LaTeX as inline image

One can use http://chart.apis.google.com/chart?cht=tx&chl= + LaTeX formula as URL for an image to display formulae, e.g. this (credit goes to Vortico for his comment on the Physics proposal at area51). It might be nice to add a separate button to the markdown editor or, even better, auto-expand $LATEX$ to http://chart.apis.google.com/chart?cht=tx&chl=LATEX

edit Since google's TeX really looks ugly compared to alternatives stated in some answers (thanks to all who mentioned this) another API might be better suited

-

An alternative to the Google Chart API and server-generated LaTeX images is the MathJax JavaScript library (pointed out by Nickoneill on Area51). The project is quite active and claims to release a stable version soon. Its function could be though of as a LaTeX to MathML converter, and many formats of TeX fonts are included, so its browser support is very good.

The MathJax project site claims the implementation is similar to the jsMath library.

-
MathJax is currently written by the very same maintainer of the jsMath library, so certain parts of the codebase have been around for longer than it appears. –  Nick Jun 23 '10 at 21:38
Since those SE sites with LaTeX enabled (e.g. math.stackexchange.com, physics.stackexchange.com) use MathJax, I re-accept this answer –  Tobias Kienzler Mar 14 '13 at 8:37

Actually the Google Chart API produces ugly equations. I don't know what they have done to the TeX setup to produce such bad results. Compare:

• $\iint_0^\infty\mathbf E\cdot d\mathbf S=\frac Q{\epsilon_0}\Leftrightarrow\nabla\cdot\mathbf E=\frac\rho{\epsilon_0}$

• mathcache.appspot.com

• Also http://latex.codecogs.com:

$\fn_cs \iint_0^\infty\mathbf E\cdot d\mathbf S=\frac Q{\varepsilon_0}\Leftrightarrow\nabla\cdot\mathbf E=\frac\rho{\varepsilon_0}$

Of course we also need to ensure a valid term of use, e.g. CodeCogs only permit 3,000 equations for free. Ideally one should setup a LaTeX rendering engine on sstatic.net, then we don't need external services.

Edit: I've found another LaTeX rendering service which is more flexible and is in "public domain".

-
thanks a lot for this comparison, you're definitely right about the other APIs looking better –  Tobias Kienzler Jul 26 '10 at 7:09

To implement this feature, I would suggest adding a button to the editor toolbar that will open a text box for the user to enter LaTeX markup. A sidebar including LaTeX elements may be added to quickly "type out" symbols such as \sum, \int, \infty, Greek letters, and matrix templates. I believe a preview button would also be necessary in order for users to guarantee that their equation is error-free. Finally, once the question/answer with LaTeX is posted, a user should be able to hover or click the equation and view the markup used, preferably in a JavaScript floating bubble. An example of this would be the Download button on Panic Coda's website.

On the technical side of the LaTeX feature, the JavaScript would need to URL encode all special characters (especially spaces and addition signs) before appending it to the API link. Also, PNG transparency could be included by adding the following tag. chf=bg,s,FFFFFF00

-

Math Overflow already does this, although they use jsMath. It might be useful, but how often do people type formulas on SO? Especially formulas complicated enough that LaTeX would make them easier to read?

Edit: Oh, is this for Area 51? You probably want to add that tag if so

-
Users who haven't got the jsMath fonts installed sometimes have problems visiting sites using it, up to browser lock-ups –  alexanderpas Jun 12 '10 at 22:26
What? You don't read latex as if it were typeset? –  dmckee Jun 14 '10 at 2:43
jsMath seems a little unstable to me. It may or may not work for different browsers and operating systems, and it's quite heavy on the JS code. Simple image tags would be the way to go. –  Vortico Jun 14 '10 at 22:39
@dmckee: Nope. Much of the text rendered using jsMath is actually HTML and system fonts. Only the irregular symbols (ie. integrals, matrices) are images. In fact, LaTeX does not come into play at all with the JavaScript library. This is why it is not ideal IMO. –  Vortico Jun 15 '10 at 5:01

A workaround is John Gietzen's greasemonky script, see here.

-