So, you’d like to be able to display inline latex in your pages, but setting up jsLatex is a hassle. Why not abuse what’s already there?
Google Chart API supports the creation of images of latex code via urls:
http://chart.apis.google.com/chart?cht=tx&chl=displaystyle%20exp(x)%20%3D%20sum_n%3D0inftyfracxnn!
kinda messy, right?
It wouldn’t be so good to hardcode this url each time, but using jquery, we can automate this process fairly well.
The Script
Put this somewhere in your page, probably within tags in the head.
function process_latex() {
$('pre.latex').each(function(e) {
var tex = $(this).text();
var url = "http://chart.apis.google.com/chart?cht=tx&chl=" + encodeURIComponent(tex);
var cls = $(this).attr('class');
var img = '<img src="' + url + '" alt="' + tex + '" class="' + cls + '"/>';
$(img).css('display', 'block').insertBefore($(this));
$(this).hide();
});
}
Then make sure the function is called on page load, i.e. add to your $(document).ready handler
$(document).ready(function() {process_latex();});
Usage
Type the latex within <pre class="latex"></pre> tags.
To give more control over styling the resulting images, the images will have whatever classes the
s also have.
Example Usage
<html>
<head>
<script src="script/jquery-1.4.2.js"></script>
<style>
.latex { vertical-align: middle;} /*default styling for latex imgs */
.bordered { border: 1px solid red;}
.block { display: block; }
</style>
<script>
function process_latex() {
$('pre.latex').each(function(e) {
var tex = $(this).text();
var url = "http://chart.apis.google.com/chart?cht=tx&chl=" + encodeURIComponent(tex);
var cls = $(this).attr('class');
var img = '<img src="' + url + '" alt="' + tex + '" class="' + cls + '"/>';
$(img).insertBefore($(this));
$(this).hide();
});
}
$(document).ready(function() {process_latex();});
</script>
</head>
<body>
Default look:
<pre class="latex">
\sin(x)
</pre>
how about an inlined, red bordered formula?
<pre class="latex bordered">
\sum_0^\infty \frac{x^n}{n!}
</pre>
Very nice! And if we give it the block class?
<pre class="latex block">
\int \int_{\mathbb{R}^2} \exp(-x^2 - y^2) dx dy
</pre>
See, it went on its own line. Magic!
</body>
</html>
Ardoris 
Just what I wanted.
However, I copied and paste the last code snippet into a html file and loaded the file. It didn’t show the equations.
I checked it both using Firefox and Chrome.
Am I missing something?
if you just pasted the last snipped verbatim, then it would have died since you don’t have jquery installed.
Go download the latest version of jquery, http://jquery.com/, edit the line to point at the latest version of jquery, cross your fingers, sacrifice a goat and hopefully it’ll work.