jimthoburn/math.html

## math.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8" />
  <title>Math Equations as TeX (rendered with MathJax)</title>
  <link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  <style>
    body {
      background: white;
      font: 20px/normal 'Crimson Text', serif;
      margin: 0;
      padding: 40px 40px 40px 120px;
      color: #4d4d4d;
    }
    a {
      color: #889faf;
    }
    sub, sup { line-height: 0.1em; }
    #container {
      max-width: 650px;
      margin: 0 auto;
    }
    section {
      margin-top: 4em;
    }
    h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
    }
    h1 {
      font-size: 200%;
      margin-bottom: 0;
    }
    h2 {
      font-size: 150%;
    }
    h1 + h2 {
      margin-top: 0;
    }
    h3 {
      font-size: 125%;
      padding-bottom: 0.5em;
      border-bottom: 1px solid #ccc;
    }
    .demo,
    pre {
      background: #e8e8e8;
      border-radius: 2px;
      padding: 0.5em 1em;
      position: relative;

    }
    .demo {
      background: #d0d7e3;
    }
    pre {
      background: #dae1be;
    }
    .demo:before,
    pre:before {
      position: absolute;
      left: -7em;
      font-family: 'Crimson Text', serif;
      text-align: right;
      width: 6em;
    }
    .demo:before {
      content: "Example: ";
    }
    pre:before {
      content: "Code: ";
      line-height: 1;
    }
    .note {
      color: #cd7c69;
    }
  </style>
  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']]
    },
    displayAlign: "left",
  });
  </script>
  <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
  <section id="container">
    <header>
      <h1>Math Equations as TeX</h1>
      <h2>(rendered with <a href="http://www.mathjax.org/">MathJax</a>)</h2>
      <p class="note">Use a dollar sign ($) at the beginning and the end of your equation.</p>
    </header>
    <section>
      <h2>Basic Equation</h2>
      <p class="demo">Evaluate the equation, $ 9x + 8y = 1 $.</p>
      <pre><code>Evaluate the equation, $ 9x + 8y = 1 $.</code></pre>
    </section>
    <section>
      <h2>Square Root</h2>
      <p class="demo">$ y = \sqrt{3} $</p>
      <pre><code>$ y = \sqrt{3} $</code></pre>
    </section>
    <section>
      <h2>Fraction</h2>
      <p class="demo">$ \frac{1}{2} $</p>
      <pre><code>$ \frac{1}{2} $</code></pre>
    </section>
    <section>
      <h2>Greek Letters</h2>
      <p class="demo">$ \alpha \beta \pi $</p>
      <pre><code>$ \alpha \beta \pi $</code></pre>
    </section>
    <section>
      <h2>Less Than</h2>
      <p class="demo">$ 2x + \frac12 \lt 5x - 1 $</p>
      <pre><code>$ 2x + \frac12 \lt 5x - 1 $</code></pre>
    </section>
    <section>
      <h2>Greater Than</h2>
      <p class="demo">$ x \gt 0.5 $</p>
      <pre><code>$ x \gt 0.5 $</code></pre>
    </section>
    <section>
      <h2>Subscript</h2>
      <p class="demo">$ 2.2 \times 10_{-3} $</p>
      <pre><code>$ 2.2 \times 10_{-3} $</code></pre>
    </section>
    <section>
      <h2>Superscript</h2>
      <p class="demo">$ 2 = (2.0)^{a} $</p>
      <pre><code>$ 2 = (2.0)^{a} $</code></pre>
    </section>
    <section>
      <h2>Integral</h2>
      <p class="demo">$ \int_0^3 $</p>
      <pre><code>$ \int_0^3 $</code></pre>
    </section>
    <section>
      <h2>Set</h2>
      <p class="demo">$ \left\{{ x, y, z }\right\} $</p>
      <pre><code>$ \left\{{ x, y, z }\right\} $</code></pre>
    </section>
    <section>
      <h2>Big Parentheses (Left &amp; Right)</h2>
      <p class="demo">$ \left( \frac{1}{\sqrt{2}} \right) dx $</p>
      <pre><code>$ \left( \frac{1}{\sqrt{2}} \right) dx $</code></pre>
    </section>
    <section>
      <h2>Equation within a line of text</h2>
      <p class="demo">Evaluate the equation, $ 9x + 8y = 1 $.</p>
      <pre><code>Evaluate the equation, $ 9x + 8y = 1 $.</code></pre>
      <p class="note">Use a dollar sign ($) at the beginning and the end of your equation.</p>
    </section>
    <section>
      <h2>Equation on a separate line</h2>
      <p class="demo">Evaluate the following equation: $$ 9x + 8y = 1 $$</p>
      <pre><code>Evaluate the following equation: $$ 9x + 8y = 1 $$</code></pre>
      <p class="note">Use a double dollar sign ($$) at the beginning and the end of your equation.</p>
    </section>
    <section>
      <h2>Set of equations on separate lines</h2>
      <p class="demo">
        Evaluate x and y from the set of equations:
        $$
        \left\{{ \begin{aligned}
          x + 3y = 2\\
          3\frac{x}{y} = 3
        \end{aligned} }\right\}
        $$
      </p>
      <pre><code>Evaluate x and y from the set of equations:
$$
\left\{{ \begin{aligned}
  x + 3y = 2\\
  3\frac{x}{y} = 3
\end{aligned} }\right\}
$$
</code></pre>
    </section>
    <section>
      <h2>Further Reference</h2>
      <p><a href="http://www.mathjax.org/demos/tex-samples/">TeX Examples</a></p>
      <p><a href="http://en.wikibooks.org/wiki/LaTeX/Mathematics">LaTeX/Mathematics</a></p>
      <p><a href="http://www.proofwiki.org/wiki/Symbols:Set_Operations_and_Relations">Proof Wiki</a></p>
    </section>
  </section>
</body>
</html>
	<!DOCTYPE html>
	<html dir="ltr" lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Math Equations as TeX (rendered with MathJax)</title>
	<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
	<style>
	body {
	background: white;
	font: 20px/normal 'Crimson Text', serif;
	margin: 0;
	padding: 40px 40px 40px 120px;
	color: #4d4d4d;
	}
	a {
	color: #889faf;
	}
	sub, sup { line-height: 0.1em; }
	#container {
	max-width: 650px;
	margin: 0 auto;
	}
	section {
	margin-top: 4em;
	}
	h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	}
	h1 {
	font-size: 200%;
	margin-bottom: 0;
	}
	h2 {
	font-size: 150%;
	}
	h1 + h2 {
	margin-top: 0;
	}
	h3 {
	font-size: 125%;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ccc;
	}
	.demo,
	pre {
	background: #e8e8e8;
	border-radius: 2px;
	padding: 0.5em 1em;
	position: relative;

	}
	.demo {
	background: #d0d7e3;
	}
	pre {
	background: #dae1be;
	}
	.demo:before,
	pre:before {
	position: absolute;
	left: -7em;
	font-family: 'Crimson Text', serif;
	text-align: right;
	width: 6em;
	}
	.demo:before {
	content: "Example: ";
	}
	pre:before {
	content: "Code: ";
	line-height: 1;
	}
	.note {
	color: #cd7c69;
	}
	</style>
	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
	tex2jax: {
	inlineMath: [['$','$'], ['\\(','\\)']]
	},
	displayAlign: "left",
	});
	</script>
	<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
	</head>
	<body>
	<section id="container">
	<header>
	<h1>Math Equations as TeX</h1>
	<h2>(rendered with <a href="http://www.mathjax.org/">MathJax</a>)</h2>
	<p class="note">Use a dollar sign ($) at the beginning and the end of your equation.</p>
	</header>
	<section>
	<h2>Basic Equation</h2>
	<p class="demo">Evaluate the equation, $ 9x + 8y = 1 $.</p>
	<pre><code>Evaluate the equation, $ 9x + 8y = 1 $.</code></pre>
	</section>
	<section>
	<h2>Square Root</h2>
	<p class="demo">$ y = \sqrt{3} $</p>
	<pre><code>$ y = \sqrt{3} $</code></pre>
	</section>
	<section>
	<h2>Fraction</h2>
	<p class="demo">$ \frac{1}{2} $</p>
	<pre><code>$ \frac{1}{2} $</code></pre>
	</section>
	<section>
	<h2>Greek Letters</h2>
	<p class="demo">$ \alpha \beta \pi $</p>
	<pre><code>$ \alpha \beta \pi $</code></pre>
	</section>
	<section>
	<h2>Less Than</h2>
	<p class="demo">$ 2x + \frac12 \lt 5x - 1 $</p>
	<pre><code>$ 2x + \frac12 \lt 5x - 1 $</code></pre>
	</section>
	<section>
	<h2>Greater Than</h2>
	<p class="demo">$ x \gt 0.5 $</p>
	<pre><code>$ x \gt 0.5 $</code></pre>
	</section>
	<section>
	<h2>Subscript</h2>
	<p class="demo">$ 2.2 \times 10_{-3} $</p>
	<pre><code>$ 2.2 \times 10_{-3} $</code></pre>
	</section>
	<section>
	<h2>Superscript</h2>
	<p class="demo">$ 2 = (2.0)^{a} $</p>
	<pre><code>$ 2 = (2.0)^{a} $</code></pre>
	</section>
	<section>
	<h2>Integral</h2>
	<p class="demo">$ \int_0^3 $</p>
	<pre><code>$ \int_0^3 $</code></pre>
	</section>
	<section>
	<h2>Set</h2>
	<p class="demo">$ \left\{{ x, y, z }\right\} $</p>
	<pre><code>$ \left\{{ x, y, z }\right\} $</code></pre>
	</section>
	<section>
	<h2>Big Parentheses (Left & Right)</h2>
	<p class="demo">$ \left( \frac{1}{\sqrt{2}} \right) dx $</p>
	<pre><code>$ \left( \frac{1}{\sqrt{2}} \right) dx $</code></pre>
	</section>
	<section>
	<h2>Equation within a line of text</h2>
	<p class="demo">Evaluate the equation, $ 9x + 8y = 1 $.</p>
	<pre><code>Evaluate the equation, $ 9x + 8y = 1 $.</code></pre>
	<p class="note">Use a dollar sign ($) at the beginning and the end of your equation.</p>
	</section>
	<section>
	<h2>Equation on a separate line</h2>
	<p class="demo">Evaluate the following equation: $$ 9x + 8y = 1 $$</p>
	<pre><code>Evaluate the following equation: $$ 9x + 8y = 1 $$</code></pre>
	<p class="note">Use a double dollar sign ($$) at the beginning and the end of your equation.</p>
	</section>
	<section>
	<h2>Set of equations on separate lines</h2>
	<p class="demo">
	Evaluate x and y from the set of equations:
	$$
	\left\{{ \begin{aligned}
	x + 3y = 2\\
	3\frac{x}{y} = 3
	\end{aligned} }\right\}
	$$
	</p>
	<pre><code>Evaluate x and y from the set of equations:
	$$
	\left\{{ \begin{aligned}
	x + 3y = 2\\
	3\frac{x}{y} = 3
	\end{aligned} }\right\}
	$$
	</code></pre>
	</section>
	<section>
	<h2>Further Reference</h2>
	<p><a href="http://www.mathjax.org/demos/tex-samples/">TeX Examples</a></p>
	<p><a href="http://en.wikibooks.org/wiki/LaTeX/Mathematics">LaTeX/Mathematics</a></p>
	<p><a href="http://www.proofwiki.org/wiki/Symbols:Set_Operations_and_Relations">Proof Wiki</a></p>
	</section>
	</section>
	</body>
	</html>