MathJax in Teilen

git-svn-id: https://svn.libreccm.org/ccm/trunk@1735 8810af33-2d31-482b-a856-94f89814c4df
master
quasi 2012-06-27 12:30:01 +00:00
parent ec521a44ea
commit 54f1c32ab7
18 changed files with 1582 additions and 0 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>&#x2260;</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>&#x2212;</mo>
<mi>b</mi>
<mo>&#x00B1;</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>&#x2212;</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>

View File

@ -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>

View File

@ -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>

View File

@ -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>