HowTos:Add TeX to your webpage

From CompudocWiki
Revision as of 10:29, 8 March 2007 by Plazonic (talk | contribs)
Jump to navigation Jump to search

This HowTo provides basic instructions on how to add TeX based formulas to your webpages located on the math webserver by using jsMath.


The main math webserver as well as the cgi webserver have the jsMath package installed on them and you can very easily use it to add TeX based formulas/text to your webpages hosted on math webservers.

jsMath is a javascript based software that can interpret TeX/LaTeX formulas embedded in your webpage and replace them with fonts and images to make them look as close as possible to the TeX/LaTeX output. You can find extensive information about jsMath on jsMath homepage. Here we will just suggest a few quick ways to use it, for more extensive information check jsMath website.

Quick Start

To get started insert the following html code somewhere in the <head> section of your webpage:

               <STYLE> #jsMath_Warning {display: none} </STYLE>
               jsMath = {
                       Autoload: {
                               loadFonts: ["msam10","msbm10"],
                               findTeXstrings: 0,      // 1 to look for any tex-delimited math
                               findLaTeXstrings: 1     // 1 to look for \(...\) and \[...\] only
               <SCRIPT SRC="/jsMath/plugins/autoload.js"></SCRIPT>
               window.onload = function () {

This code will make sure jsMath is loaded if and only if you use LaTeX style formulas somewhere in the body of your document. That means that the following text:

               \( f(\alpha) = x+\beta \)

will get translated into inline formula as in: \( f(\alpha)=x+\beta \) - note how there is a small delay before the text gets converted into formulas. For displayed equations you can do:

               \[ \int_alpha^\beta x = \mathbb{A} \]

which gets translated like this: \[ \int_\alpha^\beta x = \mathbb{A} \]

By modifying findTeXstrigs:0 to findTeXstrings:1 you could also make jsMath interpret correctly formulas delimited with $ ... $ and $$ ... $$ but you should then be careful how you use $ symbol in your webpages (just like you have to be careful with it in a real TeX/LaTeX document).

Control Panel

If you look carefully to the bottom right corner of this webpage you will notice a tiny icon saying jsMath. That's the jsMath control panel and by clicking on it you can get tweak a few otions.

Printing jsMath webpages

If you print the webpages you may notice that symbols look jagged and in low resolution (plus you might have a big warning on the top of the page instructing you to use HiRes fonts). To produce a better printout first click on "HiRes Fonts for printing" button in the jsMath control panel and then proceed to print your webpage.

Advanced Use

For more advanced use please check the jsMath homepage. All of the plugins and fonts are installed on math webservers so they can be used immediately. jsMath is installed under /jsMath (or /jsmath) as shown in above examples.

Advanced Examples

This is taken from one of jsMath examples: \[ \det\left|\,\matrix{ c_0 & c_1 & c_2 & \ldots & c_{n\phantom{+1}}\cr c_1 & c_2 & c_3 & \ldots & c_{n+1}\cr c_2 & c_3 & c_4 & \ldots & c_{n+2}\cr \vdots & \vdots & \vdots & \ddots & \vdots \cr c_n & c_{n+1} & c_{n+2} & \ldots & c_{2n}} \right| > 0 \]