HowTos:Add TeX to your webpage - Revision history

Plazonic at 12:47, 28 July 2011

2011-07-28T12:47:07Z

Plazonic at 15:29, 8 March 2007

2007-03-08T15:29:05Z

Plazonic at 15:15, 8 March 2007

2007-03-08T15:15:46Z

Plazonic: url fix

2007-03-08T15:13:53Z

url fix

Plazonic: hyperlink fix

2007-03-08T15:13:37Z

hyperlink fix

Plazonic: /* Advanced Examples */

2007-03-08T15:11:20Z

Advanced Examples

Plazonic: more examples

2007-03-08T15:10:35Z

more examples

Plazonic: initial webpage

2007-03-08T15:06:40Z

initial webpage

New page

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

== 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.

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.

== Quick Start ==
To get started insert the following html code somewhere in the <head> section of your webpage:
<STYLE> #jsMath_Warning {display: none} </STYLE>
<SCRIPT>
jsMath = {
Autoload: {
loadFonts: ["msam10","msbm10"],
findTeXstrings: 0, // 1 to look for any tex-delimited math
findLaTeXstrings: 1 // 1 to look for $...$ and \[...\] only
}
}
</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 $
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).

== Advanced Use ==
For more advanced use please check the [http://www.math.union.edu/~dpvc/jsMath/|jsMath homepage] 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.

@@ 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 ==
-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 ==
 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:
                  \( 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:
@@ Line 31: / Line 21: @@
 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 ==
-== Control Panel ==
+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].

@@ Line 34: / Line 34: @@
 == 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.
 == 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.

@@ Line 32: / Line 32: @@
 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 ==
 == 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.

@@ Line 34: / Line 34: @@
 == Advanced Use ==
-For more advanced use please check the [http://www.math.union.edu/~dpvc/jsMath/|jsMath homepage] 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.
+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:

@@ Line 36: / Line 36: @@
 For more advanced use please check the [http://www.math.union.edu/~dpvc/jsMath/|jsMath homepage] 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 jsMath examples:
+This is taken from one of jsMath examples:
 \[
 \det\left|\,\matrix{

← Older revision		Revision as of 15:10, 8 March 2007
Line 35:		Line 35:
	== Advanced Use ==		== Advanced Use ==
	For more advanced use please check the [http://www.math.union.edu/~dpvc/jsMath/\|jsMath homepage] 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.		For more advanced use please check the [http://www.math.union.edu/~dpvc/jsMath/\|jsMath homepage] 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 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
		+	\]