Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Very simple latex sketchpad
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment