$(selector).writemaths() adds a bit of MathJax magic to editable areas so that when you're writing LaTeX, you get an instant preview just above the cursor.
For example, click inside these LaTeX expressions:
$e^{\pi i} + 1 = 0$
\[e^{\pi i} + 1 = 0\]
\begin{align}
x &= 1 \\
y &= 2 \\
\end{align}
Of course, it works when maths is in the middle of a line, like $\log_2 \left( \frac{1}{x+2} \right)$ is.
But stuff inside a <code> tag doesn't count: $e^{\pi i}+1 = 0$.
It works in <textarea> tags too:
And <input> tags, of course:
This plugin needs rangy-core.js for contenteditable areas. For textarea and input tags, it needs textinputs_jquery.js.
Put this in your page's <head> tag:
<!-- libraries -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="rangy-core.js"></script>
<script type="text/javascript" src="rangy-position.js"></script>
<script type="text/javascript" src="textinputs_jquery.js"></script>
<script type="text/javascript" src="jquery.caretposition.js"></script>
<!-- MathJax -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"]]},
displayAlign: "center",
displayIndent: "0.1em"
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js"></script>
<!-- writemaths itself -->
<script type="text/javascript" src="writemaths.js"></script>
<!-- initialise writemaths on all elements with class 'wm' -->
<script language="javascript">
$(document).ready(function() {
$('.wm').writemaths();
});
</script>
Made by cp in 2012-2013.