Difference between revisions of "HowTos:Add TeX to your webpage"

From CompudocWiki
Jump to navigation Jump to search
(url fix)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
This HowTo provides basic instructions on how to add TeX based formulas to your webpages located on the math webserver by using jsMath.
+
This HowTo provides basic instructions on how to add TeX based formulas to your webpages located on the math webserver by using MathJax.
  
 
== Introduction ==
 
== Introduction ==
−
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.   
+
The main math webserver as well as the cgi webserver have the MathJax 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 [http://www.math.union.edu/~dpvc/jsMath/ jsMath homepage].  Here we will just suggest a few quick ways to use it, for more extensive information check jsMath website.
+
MathJax 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 MathJax on [http://www.mathjax.org MathJax homepage].  Here we will just suggest a few quick ways to use it, for more extensive information check jsMath website.
  
 
== Quick Start ==
 
== Quick Start ==
 
To get started insert the following html code somewhere in the <head> section of your webpage:
 
To get started insert the following html code somewhere in the <head> section of your webpage:
−
                <STYLE> #jsMath_Warning {display: none} </STYLE>
+
  <SCRIPT SRC="/mathjax/MathJax.js">
−
                <SCRIPT>
+
    MathJax.Hub.Config({
−
                jsMath = {
+
      extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
−
                        Autoload: {
+
      jax: ["input/TeX","output/HTML-CSS"],
−
                                loadFonts: ["msam10","msbm10"],
+
      tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]],  processEscapes: true}
−
                                findTeXstrings: 0,     // 1 to look for any tex-delimited math
+
    });
−
                                findLaTeXstrings: 1    // 1 to look for \(...\) and \[...\] only
+
  </SCRIPT>
−
                        }
+
This code will make sure MathJax is loaded if and only if you use LaTeX style formulas somewhere in the body of your document. That means that the following text:
−
                }
 
−
                </SCRIPT>
 
−
                <SCRIPT SRC="/jsMath/plugins/autoload.js"></SCRIPT>
 
−
                <SCRIPT>
 
−
                window.onload = function () {
 
−
                        jsMath.Autoload.Check();
 
−
                        jsMath.Process(document);
 
−
                }
 
−
                </SCRIPT>
 
−
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 \)
 
                 \( 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:
 
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:
Line 31: Line 21:
 
which gets translated like this: \[ \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).
+
== More Information ==
−
 
+
To see more information on how to tweak and use MathJax please refer to their website, in particular the [http://www.mathjax.org/docs/1.1/configuration.html configuration webpage].
−
== Advanced Use ==
 
−
For more advanced use please check the [http://www.math.union.edu/~dpvc/jsMath/ 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
 
−
\]
 

Latest revision as of 07:47, 28 July 2011

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

Introduction

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

MathJax 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 MathJax on MathJax 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: 

 <SCRIPT SRC="/mathjax/MathJax.js">
   MathJax.Hub.Config({
     extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
     jax: ["input/TeX","output/HTML-CSS"],
     tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]],  processEscapes: true}
   });
 </SCRIPT>

This code will make sure MathJax 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} \]

More Information

To see more information on how to tweak and use MathJax please refer to their website, in particular the configuration webpage.

Retrieved from "https://cgi.math.princeton.edu/compudocwiki/index.php?title=HowTos:Add_TeX_to_your_webpage&oldid=1910"