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:

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">
   tex2jax: {inlineMath: [["$","$"]]},
   displayAlign: "center",
   displayIndent: "0.1em"
<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() {

Made by cp in 2012-2013.

Fork me on GitHub