# Write maths, see maths demo

$(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: ## Download ## Installation 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>