MathJax in Teilen
git-svn-id: https://svn.libreccm.org/ccm/trunk@1735 8810af33-2d31-482b-a856-94f89814c4dfmaster
parent
ec521a44ea
commit
54f1c32ab7
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Example Page</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<style>
|
||||
li {margin-top: .2em}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>MathJax Example Pages</h1>
|
||||
|
||||
View the page source for any of these examples to see how they work.
|
||||
|
||||
<ul>
|
||||
<li><a href="sample-tex.html">Page using TeX notation</a></li>
|
||||
<li><a href="sample-mml.html">Page using MathML notation</a></li>
|
||||
<li><a href="sample-asciimath.html">Page using AsciiMath notation</a></li>
|
||||
<li><a href="sample.html">Page included several examples TeX equations</a></li>
|
||||
<li><a href="sample-eqnum.html">Page of TeX equations with automatic numbering</a></li>
|
||||
<li><a href="sample-eqrefs.html">Page of TeX equations with equation references</a></li>
|
||||
<p>
|
||||
<li><a href="sample-macros.html">Example of defining TeX macros</a></li>
|
||||
<li><a href="sample-autoload.html">Defining macros to autoload the extensions in
|
||||
which they are implemented</a></li>
|
||||
<p>
|
||||
<li><a href="sample-all-at-once.html">Example of waiting until all the
|
||||
math is typeset before displaying the page (avoids "flicker")</a></li>
|
||||
<p>
|
||||
<li><a href="sample-dynamic-steps.html">Showing an equation one step at a time</a></li>
|
||||
<li><a href="sample-dynamic.html">Display an equation typed in by a user</a></li>
|
||||
<li><a href="sample-dynamic-2.html">Preview text containing math typed in by a user</a></li>
|
||||
<p>
|
||||
<li><a href="sample-loader.html">Loading MathJax into a page after it is loaded</a></li>
|
||||
<li><a href="sample-loader-config.html">Loading MathJax dynamically with in-line configuration</a></li>
|
||||
<p>
|
||||
<li><a href="sample-signals.html">Page showing MathJax signals during page processing</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Test Page</title>
|
||||
<!-- Copyright (c) 2009-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
//
|
||||
// Do NOT use this page as a template for your own pages. It includes
|
||||
// code that is needed for testing your site's installation of MathJax,
|
||||
// and that should not be used in normal web pages. Use sample.html as
|
||||
// the example for how to call MathJax in your own pages.
|
||||
//
|
||||
MathJax.HTML.Cookie.Set("menu",{});
|
||||
MathJax.Hub.Config({
|
||||
extensions: ["tex2jax.js"],
|
||||
jax: ["input/TeX","output/HTML-CSS"],
|
||||
"HTML-CSS": {
|
||||
availableFonts:[], preferredFont: null, webFont: null,
|
||||
styles: {".MathJax_Preview": {visibility: "hidden"}}
|
||||
}
|
||||
});
|
||||
|
||||
(function (HUB) {
|
||||
|
||||
var MINVERSION = {
|
||||
Firefox: 3.0,
|
||||
Opera: 9.52,
|
||||
MSIE: 6.0,
|
||||
Chrome: 0.3,
|
||||
Safari: 2.0,
|
||||
Konqueror: 4.0,
|
||||
Unknown: 10000.0 // always disable unknown browsers
|
||||
};
|
||||
|
||||
if (!HUB.Browser.versionAtLeast(MINVERSION[HUB.Browser]||0.0)) {
|
||||
HUB.Config({
|
||||
jax: [], // don't load any Jax
|
||||
extensions: [], // don't load any extensions
|
||||
"v1.0-compatible": false // skip warning message due to no jax
|
||||
});
|
||||
setTimeout('document.getElementById("badBrowser").style.display = ""',0);
|
||||
}
|
||||
|
||||
if (HUB.Browser.isMSIE && !HUB.Browser.versionAtLeast("7.0")) {
|
||||
setTimeout('document.getElementById("MSIE6").style.display = ""');
|
||||
}
|
||||
|
||||
})(MathJax.Hub);
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js"></script>
|
||||
|
||||
<style>
|
||||
.warning {
|
||||
color: #800020;
|
||||
background-color: #FFF8F8;
|
||||
border: 2px solid red;
|
||||
margin: 1em 5em;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>
|
||||
<div style="color:#CC0000; text-align:center">
|
||||
<b>Warning: <a href="http://www.mathjax.org/">MathJax</a>
|
||||
requires JavaScript to process the mathematics on this page.<br />
|
||||
If your browser supports JavaScript, be sure it is enabled.</b>
|
||||
</div>
|
||||
<hr>
|
||||
</noscript>
|
||||
|
||||
<blockquote>
|
||||
|
||||
<h1>MathJax Test Page</h1>
|
||||
|
||||
<p>
|
||||
If you see typeset mathematics below, then MathJax is working. If you see
|
||||
TeX code instead, MathJax is not working for you.
|
||||
</p>
|
||||
<!------------------------------------------------------------------------>
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
\[
|
||||
\frac{-b\pm\sqrt{b^2-4ac}}{2a}
|
||||
\]
|
||||
</p>
|
||||
|
||||
<div style="color:green">
|
||||
<div style="text-align:center; color:red; font-size:120%" class="MathJax_Preview">
|
||||
MathJax is not working!
|
||||
</div><script type="math/tex; mode=display">
|
||||
\bf MathJax\ Image\ Fonts\ Appear\ to\ be\ Working!
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<div id="badBrowser" style="display:none">
|
||||
<div class="warning">
|
||||
<b>WARNING</b>: The browser you are using does not appear to support
|
||||
MathJax, so we can't test if MathJax is working. Please try a different
|
||||
browser, or a newer version of your browser in order to test MathJax.
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<div id="MSIE6" style="display:none">
|
||||
<div class="warning">
|
||||
<b>WARNING</b>: Internet Explorer 6 does not display images with
|
||||
alpha-channel transparency very well, so this test will not look good.
|
||||
But in practice, IE6 will use web-based fonts rather than image fonts
|
||||
(unless the page forces images, as this one does) so the poor quality
|
||||
rendering on this test page does not indicate a problem with MathJax.
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
If the mathematics does not show up properly, you may not have not
|
||||
installed the MathJax web fonts correctly. Follow the steps in the
|
||||
<a href="../docs/html/installation.html">installation instructions</a>.
|
||||
<p>
|
||||
|
||||
</blockquote>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Test Page</title>
|
||||
<!-- Copyright (c) 2009-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
//
|
||||
// Do NOT use this page as a template for your own pages. It includes
|
||||
// code that is needed for testing your site's installation of MathJax,
|
||||
// and that should not be used in normal web pages. Use sample.html as
|
||||
// the example for how to call MathJax in your own pages.
|
||||
//
|
||||
MathJax.HTML.Cookie.Set("menu",{});
|
||||
MathJax.Hub.Config({
|
||||
extensions: ["tex2jax.js"],
|
||||
jax: ["input/TeX","output/HTML-CSS"],
|
||||
"HTML-CSS": {
|
||||
availableFonts:[],
|
||||
styles: {".MathJax_Preview": {visibility: "hidden"}}
|
||||
}
|
||||
});
|
||||
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
|
||||
var FONT = MathJax.OutputJax["HTML-CSS"].Font;
|
||||
FONT.loadError = function (font) {
|
||||
MathJax.Message.Set("Can't load web font TeX/"+font.directory,null,2000);
|
||||
document.getElementById("noWebFont").style.display = "";
|
||||
};
|
||||
FONT.firefoxFontError = function (font) {
|
||||
MathJax.Message.Set("Firefox can't load web fonts from a remote host",null,3000);
|
||||
document.getElementById("ffWebFont").style.display = "";
|
||||
};
|
||||
});
|
||||
|
||||
(function (HUB) {
|
||||
|
||||
var MINVERSION = {
|
||||
Firefox: 3.0,
|
||||
Opera: 9.52,
|
||||
MSIE: 6.0,
|
||||
Chrome: 0.3,
|
||||
Safari: 2.0,
|
||||
Konqueror: 4.0,
|
||||
Unknown: 10000.0 // always disable unknown browsers
|
||||
};
|
||||
|
||||
if (!HUB.Browser.versionAtLeast(MINVERSION[HUB.Browser]||0.0)) {
|
||||
HUB.Config({
|
||||
jax: [], // don't load any Jax
|
||||
extensions: [], // don't load any extensions
|
||||
"v1.0-compatible": false // skip warning message due to no jax
|
||||
});
|
||||
setTimeout('document.getElementById("badBrowser").style.display = ""',0);
|
||||
}
|
||||
|
||||
})(MathJax.Hub);
|
||||
|
||||
MathJax.Hub.Register.StartupHook("End",function () {
|
||||
var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
|
||||
if (HTMLCSS && HTMLCSS.imgFonts) {document.getElementById("imageFonts").style.display = ""}
|
||||
});
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js"></script>
|
||||
|
||||
<style>
|
||||
.warning {
|
||||
color: #800020;
|
||||
background-color: #FFF8F8;
|
||||
border: 2px solid red;
|
||||
margin: 1em 5em;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>
|
||||
<div style="color:#CC0000; text-align:center">
|
||||
<b>Warning: <a href="http://www.mathjax.org/">MathJax</a>
|
||||
requires JavaScript to process the mathematics on this page.<br />
|
||||
If your browser supports JavaScript, be sure it is enabled.</b>
|
||||
</div>
|
||||
<hr>
|
||||
</noscript>
|
||||
|
||||
<blockquote>
|
||||
|
||||
<h1>MathJax Test Page</h1>
|
||||
|
||||
<p>
|
||||
If you see typeset mathematics below, then MathJax is working. If you see
|
||||
TeX code instead, MathJax is not working for you.
|
||||
</p>
|
||||
<!------------------------------------------------------------------------>
|
||||
<hr>
|
||||
|
||||
|
||||
<p>
|
||||
\[
|
||||
\frac{-b\pm\sqrt{b^2-4ac}}{2a}
|
||||
\]
|
||||
</p>
|
||||
|
||||
<div style="color:green">
|
||||
<div style="text-align:center; color:red; font-size:120%" class="MathJax_Preview">
|
||||
MathJax is not working!
|
||||
</div><script type="math/tex; mode=display">
|
||||
\bf MathJax\ Appears\ to\ be\ Working!
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<div id="badBrowser" style="display:none">
|
||||
<div class="warning">
|
||||
<b>WARNING</b>: The browser you are using does not appear to support
|
||||
MathJax, so we can't test if MathJax is working. Please try a different
|
||||
browser, or a newer version of your browser in order to test MathJax.
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<div id="imageFonts" style="display:none">
|
||||
<div class="warning">
|
||||
<b>WARNING</b>: The browser you are using does not seem to support web-based
|
||||
fonts, so we can't test the MathJax web fonts with this browser (image fonts
|
||||
have been used instead). Please try a different browser, or a newer version
|
||||
of your browser in order to test MathJax's web-based fonts.
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<div id="noWebFont" style="display:none">
|
||||
<div class="warning">
|
||||
<b>WARNING</b>: MathJax's web fonts don't seem to be available. Be sure you have
|
||||
the <code>MathJax/fonts</code> directory in place before continuing.
|
||||
If you fail to install these fonts, MathJax will not
|
||||
work properly with some browsers. If you can't install the image fonts,
|
||||
be sure to set the <code>noImageFonts</code> parameter in your MathJax configuration
|
||||
(either <code>MathJax/config/MathJax.js</code>, or the
|
||||
<code>MathJax.Hub.Config()</code> call in your web page).
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<div id="ffWebFont" style="display:none">
|
||||
<div class="warning">
|
||||
<b>WARNING</b>: You are trying to load MathJax from a remote site where the
|
||||
web-based fonts are not set up to be shipped to Firefox properly. See the
|
||||
<a href="../docs/html/installation.html#notes-about-shared-installations">discussion
|
||||
of Firefox's same-origin policy</a> in the MathJax documentation for more
|
||||
details.
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!------------------------------------------------------------------------>
|
||||
|
||||
<p>
|
||||
Once you have MathJax working properly, view the <a
|
||||
href="index-images.html">image mode test page</a> to make sure that the
|
||||
image fallback mode is working as well.
|
||||
</p>
|
||||
|
||||
</blockquote>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wait Until MathJax is Finished Before Showing Page</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<!--
|
||||
|
|
||||
| This shows how to prevent the page from being displayed until after
|
||||
| MathJax has finished typesetting all the math. This avoids the
|
||||
| "flicker" that occurs as source TeX code is removed from the page and
|
||||
| then typeset. You probably don't want to do this on a page with lots
|
||||
| of math.
|
||||
|
|
||||
|-->
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
//
|
||||
// The document is hidden until MathJax is finished, then
|
||||
// this function runs, making it visible again.
|
||||
//
|
||||
MathJax.Hub.Queue(function () {
|
||||
document.getElementById("hide_page").style.visibility = "";
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
|
||||
<style>
|
||||
h1 {text-align:center}
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
background-color: #DDDDDD;
|
||||
padding: .2em .5em;
|
||||
margin-top: 1.5em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 2px solid #999999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--
|
||||
|
|
||||
| This DIV keeps the page blank until after the math is typeset.
|
||||
|-->
|
||||
<div id="hide_page" style="visibility:hidden">
|
||||
|
||||
<noscript>
|
||||
<div style="color:#CC0000; text-align:center">
|
||||
<b>Warning: <a href="http://www.mathjax.org/">MathJax</a>
|
||||
requires JavaScript to process the mathematics on this page.<br />
|
||||
If your browser supports JavaScript, be sure it is enabled.</b>
|
||||
</div>
|
||||
<hr>
|
||||
</noscript>
|
||||
|
||||
<h1>Sample MathJax Equations</h1>
|
||||
|
||||
<blockquote>
|
||||
|
||||
<h2>The Lorenz Equations</h2>
|
||||
|
||||
<p>
|
||||
\begin{align}
|
||||
\dot{x} & = \sigma(y-x) \\
|
||||
\dot{y} & = \rho x - y - xz \\
|
||||
\dot{z} & = -\beta z + xy
|
||||
\end{align}
|
||||
</p>
|
||||
|
||||
<h2>The Cauchy-Schwarz Inequality</h2>
|
||||
|
||||
<p>\[
|
||||
\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
|
||||
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
|
||||
\]</p>
|
||||
|
||||
<h2>A Cross Product Formula</h2>
|
||||
|
||||
<p>\[
|
||||
\mathbf{V}_1 \times \mathbf{V}_2 =
|
||||
\begin{vmatrix}
|
||||
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
|
||||
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
|
||||
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
|
||||
\end{vmatrix}
|
||||
\]</p>
|
||||
|
||||
<h2>The probability of getting \(k\) heads when flipping \(n\) coins is:</h2>
|
||||
|
||||
<p>\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]</p>
|
||||
|
||||
<h2>An Identity of Ramanujan</h2>
|
||||
|
||||
<p>\[
|
||||
\frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
|
||||
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
|
||||
{1+\frac{e^{-8\pi}} {1+\ldots} } } }
|
||||
\]</p>
|
||||
|
||||
<h2>A Rogers-Ramanujan Identity</h2>
|
||||
|
||||
<p>\[
|
||||
1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
|
||||
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
|
||||
\quad\quad \text{for $|q|<1$}.
|
||||
\]</p>
|
||||
|
||||
<h2>Maxwell's Equations</h2>
|
||||
|
||||
<p>
|
||||
\begin{align}
|
||||
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
|
||||
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
|
||||
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
|
||||
\nabla \cdot \vec{\mathbf{B}} & = 0
|
||||
\end{align}
|
||||
</p>
|
||||
|
||||
<h2>In-line Mathematics</h2>
|
||||
|
||||
<p>Finally, while display equations look good for a page of samples, the
|
||||
ability to mix math and text in a paragraph is also important. This
|
||||
expression \(\sqrt{3x-1}+(1+x)^2\) is an example of an inline equation. As
|
||||
you see, MathJax equations can be used this way as well, without unduly
|
||||
disturbing the spacing between lines.</p>
|
||||
|
||||
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax AsciiMath Test Page</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/javascript" src="../MathJax.js?config=AM_HTMLorMML-full"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are
|
||||
</p>
|
||||
<p style="text-align:center">
|
||||
`x = (-b +- sqrt(b^2-4ac))/(2a) .`
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Example of defining a macro that autoloads an extension</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<!--
|
||||
|
|
||||
| This page shows how to define macros that autoloads an extension
|
||||
| where those macros are implemented.
|
||||
|
|
||||
| The \cancel, \bcancel, \xcancel, and \cancelto macros are
|
||||
| all defined within the cancel extension, so we tie these
|
||||
| macros to the function that loads an extension, passing it
|
||||
| the name of the extension to load.
|
||||
|
|
||||
|-->
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
|
||||
MathJax.Hub.Insert(MathJax.InputJax.TeX.Definitions.macros,{
|
||||
cancel: ["Extension","cancel"],
|
||||
bcancel: ["Extension","cancel"],
|
||||
xcancel: ["Extension","cancel"],
|
||||
cancelto: ["Extension","cancel"]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
This page makes <code>\cancel</code>, <code>\bcancel</code>,
|
||||
<code>\xcancel</code>, and <code>\cancelto</code> all be defined so that
|
||||
they will load the <code>cancel.js</code> extension when first used.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Here is the first usage: \(\cancel{x+1}\). It will cause the cancel
|
||||
package to be loaded automatically.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dynamic Preview of Textarea with MathJax Content</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
showProcessingMessages: false,
|
||||
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
|
||||
<script>
|
||||
var Preview = {
|
||||
delay: 150, // delay after keystroke before updating
|
||||
|
||||
preview: null, // filled in by Init below
|
||||
buffer: null, // filled in by Init below
|
||||
|
||||
timeout: null, // store setTimout id
|
||||
mjRunning: false, // true when MathJax is processing
|
||||
oldText: null, // used to check if an update is needed
|
||||
|
||||
//
|
||||
// Get the preview and buffer DIV's
|
||||
//
|
||||
Init: function () {
|
||||
this.preview = document.getElementById("MathPreview");
|
||||
this.buffer = document.getElementById("MathBuffer");
|
||||
},
|
||||
|
||||
//
|
||||
// Switch the buffer and preview, and display the right one.
|
||||
// (We use visibility:hidden rather than display:none since
|
||||
// the results of running MathJax are more accurate that way.)
|
||||
//
|
||||
SwapBuffers: function () {
|
||||
var buffer = this.preview, preview = this.buffer;
|
||||
this.buffer = buffer; this.preview = preview;
|
||||
buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
|
||||
preview.style.position = ""; preview.style.visibility = "";
|
||||
},
|
||||
|
||||
//
|
||||
// This gets called when a key is pressed in the textarea.
|
||||
// We check if there is already a pending update and clear it if so.
|
||||
// Then set up an update to occur after a small delay (so if more keys
|
||||
// are pressed, the update won't occur until after there has been
|
||||
// a pause in the typing).
|
||||
// The callback function is set up below, after the Preview object is set up.
|
||||
//
|
||||
Update: function () {
|
||||
if (this.timeout) {clearTimeout(this.timeout)}
|
||||
this.timeout = setTimeout(this.callback,this.delay);
|
||||
},
|
||||
|
||||
//
|
||||
// Creates the preview and runs MathJax on it.
|
||||
// If MathJax is already trying to render the code, return
|
||||
// If the text hasn't changed, return
|
||||
// Otherwise, indicate that MathJax is running, and start the
|
||||
// typesetting. After it is done, call PreviewDone.
|
||||
//
|
||||
CreatePreview: function () {
|
||||
Preview.timeout = null;
|
||||
if (this.mjRunning) return;
|
||||
var text = document.getElementById("MathInput").value;
|
||||
if (text === this.oldtext) return;
|
||||
this.buffer.innerHTML = this.oldtext = text;
|
||||
this.mjRunning = true;
|
||||
MathJax.Hub.Queue(
|
||||
["Typeset",MathJax.Hub,this.buffer],
|
||||
["PreviewDone",this]
|
||||
);
|
||||
},
|
||||
|
||||
//
|
||||
// Indicate that MathJax is no longer running,
|
||||
// and swap the buffers to show the results.
|
||||
//
|
||||
PreviewDone: function () {
|
||||
this.mjRunning = false;
|
||||
this.SwapBuffers();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
// Cache a callback to the CreatePreview action
|
||||
//
|
||||
Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
|
||||
Preview.callback.autoReset = true; // make sure it can run more than once
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Type text in the box below:<br/>
|
||||
|
||||
<textarea id="MathInput" cols="60" rows="10" onkeyup="Preview.Update()" style="margin-top:5px">
|
||||
</textarea>
|
||||
<br/><br/>
|
||||
Preview is shown here:
|
||||
<div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div>
|
||||
<div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; margin-top:5px;
|
||||
visibility:hidden; position:absolute; top:0; left: 0"><div>
|
||||
|
||||
<script>
|
||||
Preview.Init();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Dynamic Steps Test Page</title>
|
||||
<!-- Copyright (c) 2011-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
//
|
||||
// Make displayed equations be aligned left and indented
|
||||
//
|
||||
MathJax.Hub.Config({
|
||||
displayAlign: "left",
|
||||
displayIndent: "2em"
|
||||
});
|
||||
//
|
||||
// Enable the step button after the equation is typeset
|
||||
//
|
||||
MathJax.Hub.Queue(function () {
|
||||
document.getElementById("step").disabled = false;
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//
|
||||
// Use a closure to hide the local variable
|
||||
//
|
||||
(function () {
|
||||
var n = 1;
|
||||
|
||||
//
|
||||
// Make the current step be visible, and increment the step.
|
||||
// If it is the last step, disable the step button.
|
||||
// Once a step is taken, the reset button is made available.
|
||||
//
|
||||
window.ShowStep = function () {
|
||||
document.getElementById("Step"+n).style.visibility = "visible"; n++;
|
||||
if (!document.getElementById("Step"+n)) {document.getElementById("step").disabled = true}
|
||||
document.getElementById("reset").disabled = false;
|
||||
}
|
||||
|
||||
//
|
||||
// Enable the step button and disable the reset button.
|
||||
// Hide the steps.
|
||||
//
|
||||
window.ResetSteps = function () {
|
||||
document.getElementById("step").disabled = false;
|
||||
document.getElementById("reset").disabled = true;
|
||||
var i = 1, step; n = 1;
|
||||
while (step = document.getElementById("Step"+i)) {step.style.visibility = "hidden"; i++}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*
|
||||
* Start with the steps being hidden
|
||||
*/
|
||||
#Step1, #Step2, #Step3, #Step4, #Step5 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background: #CCCCCC;
|
||||
padding: .2em 1em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 3px solid #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Dynamic Equations in MathJax</h1>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
Expand the following:
|
||||
\begin{align}
|
||||
(x+1)^2
|
||||
&\cssId{Step1}{= (x+1)(x+1)}\\
|
||||
&\cssId{Step2}{= x(x+1) + 1(x+1)}\\
|
||||
&\cssId{Step3}{= (x^2+x) + (x+1)}\\
|
||||
&\cssId{Step4}{= x^2 + (x + x) + 1}\\
|
||||
&\cssId{Step5}{= x^2+2x+1}\\
|
||||
\end{align}
|
||||
</p>
|
||||
|
||||
<input type="button" onclick="ShowStep()" value="Show Next Step" id="step" disabled="true" />
|
||||
<input type="button" onclick="ResetSteps()" value="Reset" id="reset" disabled="true" />
|
||||
</blockquote>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Dynamic Math Test Page</title>
|
||||
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
|
||||
<style>
|
||||
input {margin-top: .7em}
|
||||
.output {
|
||||
border: 1px solid black;
|
||||
padding: 1em;
|
||||
width: auto;
|
||||
position: absolute; top: 0; left: 2em;
|
||||
min-width: 20em;
|
||||
}
|
||||
.box {position: relative}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
//
|
||||
// Use a closure to hide the local variables from the
|
||||
// global namespace
|
||||
//
|
||||
(function () {
|
||||
var QUEUE = MathJax.Hub.queue; // shorthand for the queue
|
||||
var math = null, box = null; // the element jax for the math output, and the box it's in
|
||||
|
||||
//
|
||||
// Hide and show the box (so it doesn't flicker as much)
|
||||
//
|
||||
var HIDEBOX = function () {box.style.visibility = "hidden"}
|
||||
var SHOWBOX = function () {box.style.visibility = "visible"}
|
||||
|
||||
//
|
||||
// Get the element jax when MathJax has produced it.
|
||||
//
|
||||
QUEUE.Push(function () {
|
||||
math = MathJax.Hub.getAllJax("MathOutput")[0];
|
||||
box = document.getElementById("box");
|
||||
SHOWBOX(); // box is initially hidden so the braces don't show
|
||||
});
|
||||
|
||||
//
|
||||
// The onchange event handler that typesets the math entered
|
||||
// by the user. Hide the box, then typeset, then show it again
|
||||
// so we don't see a flash as the math is cleared and replaced.
|
||||
//
|
||||
window.UpdateMath = function (TeX) {
|
||||
QUEUE.Push(HIDEBOX,["Text",math,"\\displaystyle{"+TeX+"}"],SHOWBOX);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<p>
|
||||
Type some \(\rm\TeX\) code and press RETURN:<br />
|
||||
<input id="MathInput" size="80" onchange="UpdateMath(this.value)" />
|
||||
</p>
|
||||
|
||||
<p>You typed:</p>
|
||||
<div class="box" id="box" style="visibility:hidden">
|
||||
<div id="MathOutput" class="output">$${}$$</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//
|
||||
// IE doesn't fire onchange events for RETURN, so
|
||||
// use onkeypress to do a blur (and refocus) to
|
||||
// force the onchange to occur
|
||||
//
|
||||
if (MathJax.Hub.Browser.isMSIE) {
|
||||
MathInput.onkeypress = function () {
|
||||
if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Equation Numbering</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({ TeX: { equationNumbers: {autoNumber: "AMS"} } });
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML"></script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
background: #CCCCCC;
|
||||
padding: .2em 1em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 3px solid #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<h1>A test of Equation Numbering</h1>
|
||||
</center>
|
||||
|
||||
<div style="padding:0 2em">
|
||||
<hr>
|
||||
Equation:
|
||||
|
||||
\begin{equation}
|
||||
E = mc^2
|
||||
\end{equation}
|
||||
|
||||
Equation*:
|
||||
|
||||
\begin{equation*}
|
||||
E = mc^2
|
||||
\end{equation*}
|
||||
|
||||
<hr>
|
||||
Brackets:
|
||||
|
||||
\[E = mc^2\]
|
||||
|
||||
Brackets tagged:
|
||||
|
||||
\[E = mc^2\tag{x}\]
|
||||
|
||||
<hr>
|
||||
Split:
|
||||
|
||||
\begin{equation}
|
||||
\begin{split}
|
||||
a& =b+c-d\\
|
||||
& \quad +e-f\\
|
||||
& =g+h\\
|
||||
& =i
|
||||
\end{split}
|
||||
\end{equation}
|
||||
|
||||
<hr>
|
||||
Multline:
|
||||
|
||||
\begin{multline}
|
||||
a+b+c+d+e+f+g\\
|
||||
M+N+O+P+Q\\
|
||||
R+S+T\\
|
||||
u+v+w+x+y+z
|
||||
\end{multline}
|
||||
|
||||
Multline*:
|
||||
|
||||
\begin{multline*}
|
||||
a+b+c+d+e+f+g\\
|
||||
M+N+O+P+Q\\
|
||||
R+S+T\\
|
||||
u+v+w+x+y+z
|
||||
\end{multline*}
|
||||
|
||||
<hr>
|
||||
Gather:
|
||||
|
||||
\begin{gather}
|
||||
a_1=b_1+c_1\\
|
||||
a_2=b_2+c_2-d_2+e_2
|
||||
\end{gather}
|
||||
|
||||
Gather*:
|
||||
|
||||
\begin{gather*}
|
||||
a_1=b_1+c_1\\
|
||||
a_2=b_2+c_2-d_2+e_2
|
||||
\end{gather*}
|
||||
|
||||
<hr>
|
||||
Align:
|
||||
|
||||
\begin{align}
|
||||
a_1& =b_1+c_1\\
|
||||
a_2& =b_2+c_2-d_2+e_2
|
||||
\end{align}
|
||||
|
||||
Align*:
|
||||
|
||||
\begin{align*}
|
||||
a_1& =b_1+c_1\\
|
||||
a_2& =b_2+c_2-d_2+e_2
|
||||
\end{align*}
|
||||
|
||||
Align:
|
||||
|
||||
\begin{align}
|
||||
a_{11}& =b_{11}& a_{12}& =b_{12}\\
|
||||
a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22}
|
||||
\end{align}
|
||||
|
||||
Align with \notag and \tag:
|
||||
|
||||
\begin{align}
|
||||
a_{11}& =b_{11}& a_{12}& =b_{12}\notag\\
|
||||
a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22} \tag{y}
|
||||
\end{align}
|
||||
|
||||
Align* with \tag:
|
||||
|
||||
\begin{align*}
|
||||
a_1& =b_1+c_1\tag{z}\\
|
||||
a_2& =b_2+c_2-d_2+e_2
|
||||
\end{align*}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Equation References</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({ TeX: { equationNumbers: {autoNumber: "all"} } });
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML"></script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
background: #CCCCCC;
|
||||
padding: .2em 1em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 3px solid #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<center>
|
||||
<h1>A test of Equation References</h1>
|
||||
</center>
|
||||
|
||||
<div style="padding:0 2em">
|
||||
<hr>
|
||||
Here is a labeled equation:
|
||||
$$x+1\over\sqrt{1-x^2}\label{ref1}$$
|
||||
with a reference to ref1: \ref{ref1},
|
||||
and another numbered one with no label:
|
||||
$$x+1\over\sqrt{1-x^2}$$
|
||||
This one uses \nonumber:
|
||||
$$x+1\over\sqrt{1-x^2}\nonumber$$
|
||||
<p>
|
||||
<HR>
|
||||
<p>
|
||||
Here's one using the equation environment:
|
||||
\begin{equation}
|
||||
x+1\over\sqrt{1-x^2}
|
||||
\end{equation}
|
||||
and one with equation* environment:
|
||||
\begin{equation*}
|
||||
x+1\over\sqrt{1-x^2}
|
||||
\end{equation*}
|
||||
<p>
|
||||
<HR>
|
||||
<p>
|
||||
This is a forward reference [\ref{ref2}] and another \eqref{ref2} for the
|
||||
following equation:
|
||||
$$x+1\over\sqrt{1-x^2}\label{ref2}$$
|
||||
More math:
|
||||
$$x+1\over\sqrt{1-x^2}$$
|
||||
Here is a ref inside math: $\ref{ref2}+1$ and text after it.
|
||||
|
||||
\begin{align}
|
||||
x& = y_1-y_2+y_3-y_5+y_8-\dots
|
||||
&& \text{by \eqref{ref1}}\\
|
||||
& = y'\circ y^* && \text{(by \eqref{ref3})}\\
|
||||
& = y(0) y' && \text {by Axiom 1.}
|
||||
\end{align}
|
||||
|
||||
Here's a bad ref [\ref{ref4}] to a nonexistent label.
|
||||
<p>
|
||||
<HR>
|
||||
<p>
|
||||
An alignment:
|
||||
\begin{align}
|
||||
a&=b\label{ref3}\cr
|
||||
&=c+d
|
||||
\end{align}
|
||||
and a starred one:
|
||||
\begin{align*}
|
||||
a&=b\cr
|
||||
&=c+d
|
||||
\end{align*}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Load MathJax with in-line configuration after the page is ready</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/javascript">
|
||||
//
|
||||
// We wait for the onload function to show that MathJax is laoded after
|
||||
// the page is ready, and then use setTimeout to prove that MathJax is
|
||||
// definitely loaded after the page is displayed and active. MathJax is
|
||||
// loaded two seconds after the page is ready.
|
||||
//
|
||||
window.onload = function () {
|
||||
setTimeout(function () {
|
||||
var head = document.getElementsByTagName("head")[0], script;
|
||||
script = document.createElement("script");
|
||||
script.type = "text/x-mathjax-config";
|
||||
script[(window.opera ? "innerHTML" : "text")] =
|
||||
"MathJax.Hub.Config({\n" +
|
||||
" tex2jax: { inlineMath: [['$','$'], ['\\\\(','\\\\)']] }\n" +
|
||||
"});"
|
||||
head.appendChild(script);
|
||||
script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.src = "../MathJax.js?config=TeX-AMS-MML_HTMLorMML";
|
||||
head.appendChild(script);
|
||||
},2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
background: #CCCCCC;
|
||||
padding: .2em 1em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 3px solid #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Adding MathJax with In-Line Configuration</h1>
|
||||
|
||||
<p>
|
||||
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
|
||||
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Load MathJax after the page is ready</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/javascript">
|
||||
//
|
||||
// We wait for the onload function to show that MathJax is laoded after
|
||||
// the page is ready, and then use setTimeout to prove that MathJax is
|
||||
// definitely loaded after the page is displayed and active. MathJax is
|
||||
// loaded two seconds after the page is ready.
|
||||
//
|
||||
window.onload = function () {
|
||||
setTimeout(function () {
|
||||
var script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.src = "../MathJax.js?config=TeX-AMS-MML_HTMLorMML";
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
},2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
background: #CCCCCC;
|
||||
padding: .2em 1em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 3px solid #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Adding MathJax After the Page is Loaded</h1>
|
||||
|
||||
<p>
|
||||
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
|
||||
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Example of defining a macro that autoloads an extension</title>
|
||||
<!-- Copyright (c) 2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<!--
|
||||
|
|
||||
| This page shows how to define macros in your configuration, or as part
|
||||
| of the body of the page itself.
|
||||
|
|
||||
|-->
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
TeX: {
|
||||
Macros: {
|
||||
RR: '{\\bf R}', // a simple string replacement
|
||||
bold: ['\\boldsymbol{#1}',1] // this macro has one parameter
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--
|
||||
|
|
||||
| Here we use a math block that contains nothing but definitions in
|
||||
| standard TeX format. It is enclosed in a DIV that doesn't display, so
|
||||
| that there are no extra spaces generated by having the extra
|
||||
| mathematics in the text.
|
||||
|
|
||||
| The first macro makes it easy to display vectors using \<x,y,z>
|
||||
| the second uses \newcommand to create a macro
|
||||
|
|
||||
|-->
|
||||
<div style="display:none">
|
||||
\(
|
||||
\def\<#1>{\left<#1\right>}
|
||||
\newcommand{\CC}{\mathbf{C}}
|
||||
\)
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This page uses two different methods to define macros: either putting them
|
||||
in JavaScript notation in the MathJax configuration, or in TeX notation in
|
||||
the body of the document.
|
||||
</p>
|
||||
|
||||
<p>Some math that used the definitions:
|
||||
\[
|
||||
f\colon\RR\to\RR^3 \hbox{ by } f(t)=\< t+1,{1\over 1+t^2}, \sqrt{t^2+1} >
|
||||
\]
|
||||
and
|
||||
\[
|
||||
\{\,z\in\CC \mid z^2 = \bold{\alpha}\,\}
|
||||
\]
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax MathML Test Page</title>
|
||||
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/javascript" src="../MathJax.js?config=MML_HTMLorMML-full"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
When
|
||||
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
||||
<mi>a</mi><mo>≠</mo><mn>0</mn>
|
||||
</math>,
|
||||
there are two solutions to
|
||||
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
||||
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
|
||||
<mo>+</mo> <mi>b</mi><mi>x</mi>
|
||||
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
|
||||
</math>
|
||||
and they are
|
||||
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
|
||||
<mi>x</mi> <mo>=</mo>
|
||||
<mrow>
|
||||
<mfrac>
|
||||
<mrow>
|
||||
<mo>−</mo>
|
||||
<mi>b</mi>
|
||||
<mo>±</mo>
|
||||
<msqrt>
|
||||
<msup><mi>b</mi><mn>2</mn></msup>
|
||||
<mo>−</mo>
|
||||
<mn>4</mn><mi>a</mi><mi>c</mi>
|
||||
</msqrt>
|
||||
</mrow>
|
||||
<mrow> <mn>2</mn><mi>a</mi> </mrow>
|
||||
</mfrac>
|
||||
</mrow>
|
||||
<mtext>.</mtext>
|
||||
</math>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Signals Test Page</title>
|
||||
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<!--
|
||||
| This example shows how to use MathJax's signal mechanism to find out
|
||||
| about what MathJax is doing, and to hook into various events as they
|
||||
| occur.
|
||||
-->
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
|
||||
//
|
||||
// Configure MathJax
|
||||
//
|
||||
MathJax.Hub.Config({
|
||||
extensions: ["tex2jax.js","TeX/noUndefined.js"],
|
||||
jax: ["input/TeX","output/HTML-CSS"],
|
||||
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
|
||||
TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]}
|
||||
});
|
||||
//
|
||||
// Display messages when these files are loaded
|
||||
// (Note the difference between extensions and TeX.extensions,
|
||||
// and the difference between when noUndefind is loaded compared
|
||||
// to when it signals that it is ready)
|
||||
//
|
||||
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/noUndefined.js",
|
||||
function () {MathJax.Hub.Startup.signal.Post("*** noUndefined Loaded ***")});
|
||||
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/AMSmath.js",
|
||||
function () {MathJax.Hub.Startup.signal.Post("*** AMSmath Loaded ***")});
|
||||
|
||||
//
|
||||
// Display a message that we are in the configuration code
|
||||
// (The Message function is not yet defined when this code
|
||||
// runs, so we can't use that here. Post a signal
|
||||
// of our own, so it will be displayed along with all
|
||||
// the other signals).
|
||||
//
|
||||
MathJax.Hub.Startup.signal.Post("*** In Startup Configuration code ***");
|
||||
|
||||
//
|
||||
// When the "onLoad" message is posted, display a message.
|
||||
// (Since this hook is registered before the ones in the main body
|
||||
// below, it runs before the code to print the "Startup: onLoad"
|
||||
// message, so this message shows up first in the output.)
|
||||
//
|
||||
MathJax.Hub.Register.StartupHook("onLoad",function () {
|
||||
Message("*** The onLoad handler has run, page is ready to process ***");
|
||||
});
|
||||
|
||||
//
|
||||
// This will be performed after MathJax has completed its
|
||||
// setup and typesetting run, which have already been
|
||||
// pushed onto the queue.
|
||||
// (Since the Message function isn't defined yet when this code
|
||||
// runs, we need to enclose it in a function so it will be
|
||||
// looked up later when it is defined.)
|
||||
//
|
||||
MathJax.Hub.Queue(function () {Message("*** MathJax is done ***")});
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js"></script>
|
||||
|
||||
<style>
|
||||
.output {
|
||||
background-color: #F0F0F0;
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
padding: 3px 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
|
||||
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Messages about mathematics:
|
||||
<pre id="MathMessages" class="output">
|
||||
</pre>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
All Messages:
|
||||
<pre id="AllMessages" class="output">
|
||||
</pre>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
//
|
||||
// The output areas
|
||||
//
|
||||
var math = document.getElementById("MathMessages");
|
||||
var all = document.getElementById("AllMessages");
|
||||
|
||||
//
|
||||
// A function to display messages in the "AllMessages" area.
|
||||
// We make it global so it can be used in the startup code above.
|
||||
//
|
||||
window.Message = function (message) {
|
||||
MathJax.HTML.addText(all,message);
|
||||
MathJax.HTML.addElement(all,"br");
|
||||
};
|
||||
|
||||
//
|
||||
// Find out about "New Math" messages from the Hub and display them.
|
||||
// (Look up the TeX code for each new math element)
|
||||
//
|
||||
MathJax.Hub.Register.MessageHook("New Math",function (message) {
|
||||
var script = MathJax.Hub.getJaxFor(message[1]).SourceElement();
|
||||
MathJax.HTML.addText(math,message.join(" ")+": '"+script.text+"'");
|
||||
MathJax.HTML.addElement(math,"br");
|
||||
});
|
||||
|
||||
//
|
||||
// Find out about ALL startup and hub messages
|
||||
//
|
||||
MathJax.Hub.Startup.signal.Interest(function (message) {Message("Startup: "+message)});
|
||||
MathJax.Hub.signal.Interest(function (message) {Message("Hub: "+message)});
|
||||
//
|
||||
// Since signals are remembered, registering an interest will cause
|
||||
// use to receive all the past signals as well as new ones.
|
||||
// This marks the point were the above routines were called.
|
||||
//
|
||||
Message("##### events above this have already occurred #####");
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax TeX Test Page</title>
|
||||
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
|
||||
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MathJax Test Page</title>
|
||||
<!-- Copyright (c) 2009-2012 Design Science, Inc. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
extensions: ["tex2jax.js"],
|
||||
jax: ["input/TeX","output/HTML-CSS"],
|
||||
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="../MathJax.js"></script>
|
||||
|
||||
<style>
|
||||
h1 {text-align:center}
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
background-color: #DDDDDD;
|
||||
padding: .2em .5em;
|
||||
margin-top: 1.5em;
|
||||
border-top: 3px solid #666666;
|
||||
border-bottom: 2px solid #999999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>
|
||||
<div style="color:#CC0000; text-align:center">
|
||||
<b>Warning: <a href="http://www.mathjax.org/">MathJax</a>
|
||||
requires JavaScript to process the mathematics on this page.<br />
|
||||
If your browser supports JavaScript, be sure it is enabled.</b>
|
||||
</div>
|
||||
<hr>
|
||||
</noscript>
|
||||
|
||||
<h1>Sample MathJax Equations</h1>
|
||||
|
||||
<blockquote>
|
||||
|
||||
<h2>The Lorenz Equations</h2>
|
||||
|
||||
<p>
|
||||
\begin{align}
|
||||
\dot{x} & = \sigma(y-x) \\
|
||||
\dot{y} & = \rho x - y - xz \\
|
||||
\dot{z} & = -\beta z + xy
|
||||
\end{align}
|
||||
</p>
|
||||
|
||||
<h2>The Cauchy-Schwarz Inequality</h2>
|
||||
|
||||
<p>\[
|
||||
\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
|
||||
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
|
||||
\]</p>
|
||||
|
||||
<h2>A Cross Product Formula</h2>
|
||||
|
||||
<p>\[
|
||||
\mathbf{V}_1 \times \mathbf{V}_2 =
|
||||
\begin{vmatrix}
|
||||
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
|
||||
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
|
||||
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
|
||||
\end{vmatrix}
|
||||
\]</p>
|
||||
|
||||
<h2>The probability of getting \(k\) heads when flipping \(n\) coins is:</h2>
|
||||
|
||||
<p>\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]</p>
|
||||
|
||||
<h2>An Identity of Ramanujan</h2>
|
||||
|
||||
<p>\[
|
||||
\frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
|
||||
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
|
||||
{1+\frac{e^{-8\pi}} {1+\ldots} } } }
|
||||
\]</p>
|
||||
|
||||
<h2>A Rogers-Ramanujan Identity</h2>
|
||||
|
||||
<p>\[
|
||||
1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
|
||||
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
|
||||
\quad\quad \text{for $|q|<1$}.
|
||||
\]</p>
|
||||
|
||||
<h2>Maxwell's Equations</h2>
|
||||
|
||||
<p>
|
||||
\begin{align}
|
||||
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
|
||||
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
|
||||
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
|
||||
\nabla \cdot \vec{\mathbf{B}} & = 0
|
||||
\end{align}
|
||||
</p>
|
||||
|
||||
<h2>In-line Mathematics</h2>
|
||||
|
||||
<p>Finally, while display equations look good for a page of samples, the
|
||||
ability to mix math and text in a paragraph is also important. This
|
||||
expression \(\sqrt{3x-1}+(1+x)^2\) is an example of an inline equation. As
|
||||
you see, MathJax equations can be used this way as well, without unduly
|
||||
disturbing the spacing between lines.</p>
|
||||
|
||||
|
||||
</blockquote>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue