rosinality/mathology.html

## mathology.html
<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>Mathology</title>
	<style>
	 body {
		 font-family: Arial, Helvetica, sans-serif;
	 }

	 #content {
		 width: 99%;
		 margin: 0 auto;
	 }

	 #editor {
		 float: left;
		 width: 49%;
	 }

	 #preview {
		 float: left;
		 width: 49%;
	 }

	 #logo {
		 font-family: "Times New Roman", Times, serif;
		 font-size: 1.8em;
		 margin: 8px;
	 }

	 .text {
		 font-family:"freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
		 font-size: 1.1em;
	 }
	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/codemirror.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/codemirror.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/mode/stex/stex.js"></script>
	<script type="text/x-mathjax-config">
	 MathJax.Hub.Config({
		 tex2jax: {
			 inlineMath: [['$','$']],
			 processClass: 'mathjax',
			 ignoreClass: 'no-mathjax'
		 }
	 });
	</script>
	<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
	<script type="text/javascript">
	 var math = '';

	 function processBlock(text) {
		 var large = false;
		 var block = false;
		 var processed = '<span class="text">';
		 var changed = false;

		 for (var i = 0; i < text.length; i++) {
			 if (text.charAt(i) == '$') {
				 if (text.charAt(i + 1) == '$') {
					 if (large) {
						 large = false;
						 processed += '$$<span class="text">';
					 } else {
						 large = true;
						 processed += '</span>$$';
					 }
					 i++;
					 continue;
				 } else {
					 if (block) {
						 block = false;
						 processed += '$<span class="text">';
					 } else {
						 block = true;
						 processed += '</span>$';
					 }
					 continue;
				 }
			 }

			 if (!large && !block && text.charAt(i) == '\\') {
				 if (text.charAt(i + 1) == '\\') {
					 processed += '<br />';
				 }
			 } else {
				 processed += text.charAt(i);
			 }
		 }

		 return processed + '</span>';
	 }

	 document.addEventListener('DOMContentLoaded', function () {
		 var preview = document.getElementById('preview');
		 var markdown = document.getElementById('markdown');
		 preview.innerHTML = processBlock(markdown.value);
		 var editor = CodeMirror.fromTextArea(markdown, {
			 lineNumbers: true,
			 mode: 'stex'
		 });
		 editor.on('change', function (cm) {
			 var text = processBlock(cm.getValue());
			 preview.innerHTML = text;
			 MathJax.Hub.Queue(['Typeset', MathJax.Hub, preview]);
		 });
	 });
	</script>
  </head>
  <body class="no-mathjax">
	<h1 id="logo">Mathology</h1>
	<div id="content">
	  <div id="editor">
		  <textarea id="markdown">
$
   \def\diff{\mathrm{d}}
$

<h3>Monotone Convergence Theorem</h3>
If $\{f_n\}$ is a sequence of non-negative measurable functions,
and $\{f_n(x):n\geq1\}$ \\
increases monotonically to $f(x)$ for each $x$, i.e. $f_n \to f$ pointwise, then
$$
\lim_{n \to \infty} \int f_n\diff\mu = \int f \diff\mu
$$</textarea>
	  </div>
      <div id="preview" class="mathjax">
	  </div>
	</div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Mathology</title>
	<style>
	body {
	font-family: Arial, Helvetica, sans-serif;
	}

	#content {
	width: 99%;
	margin: 0 auto;
	}

	#editor {
	float: left;
	width: 49%;
	}

	#preview {
	float: left;
	width: 49%;
	}

	#logo {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.8em;
	margin: 8px;
	}

	.text {
	font-family:"freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
	font-size: 1.1em;
	}
	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/codemirror.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/codemirror.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/mode/stex/stex.js"></script>
	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
	tex2jax: {
	inlineMath: [['$','$']],
	processClass: 'mathjax',
	ignoreClass: 'no-mathjax'
	}
	});
	</script>
	<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
	<script type="text/javascript">
	var math = '';

	function processBlock(text) {
	var large = false;
	var block = false;
	var processed = '<span class="text">';
	var changed = false;

	for (var i = 0; i < text.length; i++) {
	if (text.charAt(i) == '$') {
	if (text.charAt(i + 1) == '$') {
	if (large) {
	large = false;
	processed += '$$<span class="text">';
	} else {
	large = true;
	processed += '</span>$$';
	}
	i++;
	continue;
	} else {
	if (block) {
	block = false;
	processed += '$<span class="text">';
	} else {
	block = true;
	processed += '</span>$';
	}
	continue;
	}
	}

	if (!large && !block && text.charAt(i) == '\\') {
	if (text.charAt(i + 1) == '\\') {
	processed += '<br />';
	}
	} else {
	processed += text.charAt(i);
	}
	}

	return processed + '</span>';
	}

	document.addEventListener('DOMContentLoaded', function () {
	var preview = document.getElementById('preview');
	var markdown = document.getElementById('markdown');
	preview.innerHTML = processBlock(markdown.value);
	var editor = CodeMirror.fromTextArea(markdown, {
	lineNumbers: true,
	mode: 'stex'
	});
	editor.on('change', function (cm) {
	var text = processBlock(cm.getValue());
	preview.innerHTML = text;
	MathJax.Hub.Queue(['Typeset', MathJax.Hub, preview]);
	});
	});
	</script>
	</head>
	<body class="no-mathjax">
	<h1 id="logo">Mathology</h1>
	<div id="content">
	<div id="editor">
	<textarea id="markdown">
	$
	\def\diff{\mathrm{d}}
	$

	<h3>Monotone Convergence Theorem</h3>
	If $\{f_n\}$ is a sequence of non-negative measurable functions,
	and $\{f_n(x):n\geq1\}$ \\
	increases monotonically to $f(x)$ for each $x$, i.e. $f_n \to f$ pointwise, then
	$$
	\lim_{n \to \infty} \int f_n\diff\mu = \int f \diff\mu
	$$</textarea>
	</div>
	<div id="preview" class="mathjax">
	</div>
	</div>
	</body>
	</html>