jsLaTeX

Embed LaTeX directly into your website or blog.

  • Language: JavaScript
    Framework: jQuery
  • Released: Apr 16, 2011
    Last Update: Apr 15, 2011

jsLaTeX is a plugin that lets you embed LaTeX directly into your website or blog.

The LaTeX engine that generates the rendered-output can be easily changed with the url parameter.

Code Examples:

$(".latex").latex();

$(".latex").latex({
    url: 'http://www.sitmo.com/gg/latex/latex2png.2.php?z=100&eq={e}'
});

$(".latex").latex({
    callback : function() {
        this.css({border: '1px solid black'});
    }                        
});
Hide

Usage Instructions

Download the jquery.jslatex.js file and add it to your page along with jQuery (if it is not already added):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script src="jquery.jslatex.js"></script>  

The simplest way to invoke the script is by calling the plugin with no parameters:

<script>  
$(function () {  
    $(".latex").latex();  
});  
</script>  

<div class="latex">  
    \int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi  
</div> 

The plugin works by taking the inner HTML of the specified container obviously assuming that it is valid LaTeX, and displays the image using CodeCogs LaTeX engine. The rendered output replaces the equation inside the container.


The plugin also accepts 3 optional parameters:

  • format
  • url
  • callback

[format]

The format parameter is used to specify the format of the returned output. There are currently 3 supported formats:

  • gif
  • png
  • swf

[url]

The url parameter is used to change the engine of the LaTeX generator. Let's take an example with a different engine, and in this case I will be using SITMO's LaTeX engine.

The url SITMO's engine uses to render the output is as follows:

http://www.sitmo.com/gg/latex/latex2png.2.php?z=100&eq=equation

where equation is the the LaTeX equation you wish to render.

Now we must tell the plugin where to put the equation and we do this by using the {e} specifier. This is how it can be used:

$(".latex").latex({url: 'http://www.sitmo.com/gg/latex/latex2png.2.php?z=100&eq={e}'});  

As you can see from the above example, we placed the {e} specifier where the equation should be and then the engine takes care of the rest.

The plugin currently supports another specifier: {f} and this is used for those engines that allow you to specify a file-format output. The file-types that are currently supported are the ones mentioned in the [format] section.

If we take the 'original' engine url, we can turn into a url with specifiers like such:

http://latex.codecogs.com/{f}.latex?{e}

Here are examples of Engines you can use (ready with specifiers):

  • http://latex.codecogs.com/{f}.latex?{e}
  • http://www.sitmo.com/gg/latex/latex2png.2.php?z=100&eq={e}
  • http://www.forkosh.dreamhost.com/mathtex.cgi?{e}
  • http://chart.apis.google.com/chart?cht=tx&chl={e}

[callback]

The callback parameter allows you to pass a function that will be executed after the image has been retrieved. In your callback function, this will refer to the newly created element (as a jQuery object) that contains the rendered output.

The following example will set a border around your rendered output.

$(".latex").latex({
    callback : function() {  
        this.css({border: '1px solid black'});  
    }                          
});  
You need to log-in or create an account
  • Create an account
  • Log-in

Please use your real name.

Activation link will be sent to this address.

Minimum 8 characters

Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

License » MIT license Download
  • This component does it's job very good and it is so easy to integrate it into any .html document.
    I guess it can't be any better.
    MB Marius Brandt
    3 years ago, 0 comments
    Was this helpful?
    Flag 2 of 2 people found this review helpful
Post a comment

Or enter your name and Email
No comments have been posted yet.