A couple of my recent blog posts have been about the Time Value of Money (one, two). They’re full of mathematical expressions, but I was tired of writing these expressions out in Microsoft Word’s equation editor, taking a snapshot of the result, and inserting the result as an image in the post. Instead I decided to try out MathJax, a quite remarkable JavaScript library that renders math expressions at run-time in the client.
The big problem that I had was writing expressions in LaTeX is not a skill I have, so although the simpler expressions were easy (for example: P_N = P_0(1+i)^N becomes \(P_N = P_0(1+i)^N\)), by the time I was writing the second installment the expressions I wanted to write in LaTeX were getting very hairy.
I started out by writing a simple HTML page that I would alter with a modified LaTeX expression, then view the result in a browser, but the feedback loop was too staggered and awkward. I needed that feedback loop to be much tighter: I wanted to type something in the browser and immediately see the rendered expression. Seeing that I’m supposed to be a JavaScript expert, it was time to write a little bit of code.
First of all I wrote a small HTML page that had a div to display the rendered expression, a paragraph to do the same (MathJax will display its results in a block or an inline element), and then a textarea for me to type the LaTeX expression:
DOCTYPE html>
<html>
<head>
<title>Preview MathJax expressionstitle>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.1.min.js">script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">script>
head>
<body>
<div id="outputmath">div>
<p id="inlinemath" style="text-align: center;">p>
<textarea id="inputtext" cols="40" rows= "7" style="display: block; margin: 10px auto;">textarea>
body>
html>
The relevant elements are styled to appear in the center of the page (that’s the default for MathJax rendering in a block element). Notice also I’m loading jQuery and MathJax.
Next the code, which I added before the closing tag for the body element:
<script type="text/javascript"> $(function () { var inputText = $("#inputtext"), outputMath = $("#outputmath"), inlineMath = $("#inlinemath"); inputText.on("keyup", function () { var expr = inputText.val(); outputMath.text('\\[ ' + expr + ' \\]'); inlineMath.text('The expression is \\( ' + expr + ' \\).'); MathJax.Hub.Queue(["Typeset", MathJax.Hub, "outputmath"]); MathJax.Hub.Queue(["Typeset", MathJax.Hub, "inlinemath"]); }); }); script>
It’s written as a jQuery document.ready function. In it I save the jQuery objects for the input textarea and both named output elements and then I add a keyup handler to the input textarea. On every keystroke, I grab the current contents of the input box, format it as an expression for both the block and inline elements, and then ask MathJax to re-render (that is, typeset) both elements. (MathJax queues up the requests and executes them asynchronously.) Bingo!
Here is is in action, finishing off writing out the quadratic formula I’m sure you remember from school:
Once I like how a particular expression looks, I can copy the content of the textarea and paste it into the blog post.
So, if you ever find yourself writing posts that need mathematical expressions, there you go. Have at it.
Now playing:
New Order - Guilt Is a Useless Emotion [Mac Quayle Vocal Mix]
(from Waiting for the Sirens' Call)
Loading links to posts on similar topics...
4 Responses
#1 Lex Li said...
03-Apr-12 8:43 PMI am impressed by MathJax, and with your sample code, it becomes a wonderful online editor for LaTeX math expressions (even MathML). This not only demonstrates how beautiful MathJax is, but also potentially helps beginners to get familiar with the tough syntax. Wish it existed when I was learning LaTeX, as the editors I used at that time did not have the preview feature at all.
BTW, Julian, I have written to MathJax guys via www.mathjax.org/.../contact to see if they can build up a new demo based on your code. As all their existing demos are read only, adding such a live demo should make MathJax cooler :)
#2 Ruud said...
03-Apr-12 11:43 PMA bit off topic...
I have a tip for MS Word (at least it works in the equation edition of Word 2007/2010).
Install an extra keyboard in Greek.
If you want to type a Greek character, press Ctrl+Shift to change to the Greek keyboard, press the corresponding key, and press Ctrl+Shift to return to your prefered keyboard layout.
For example, to get α
Ctrl+Shift, a, Ctrl+shift
Note that Word 2007 also accepts LaTeX characters, like
\sum. After pressing the space bar, the ∑ symbol appears.
#3 julian m bucknall said...
04-Apr-12 7:19 AMRuud: Heh, I write math expressions infrequently enough that installing a separate keyboard layout for doing just that would drive me gaga :).
Separate thought: I'm old enough to remember that my exam and test papers, etc, from school and university were laboriously typed up on a typewriter by the department secretary, so this new world of typesetting math expressions on the fly is just magic. Makes me wish I had occasion to do "real" mathematics again...
Cheers, Julian
#4 julian m bucknall said...
04-Apr-12 7:21 AMLex: I'll admit I used the examples on the MathJax site as a basis for writing my own expressions, but I would have loved an interactive preview to help me stumble along faster at the start. Hence this code.
Cheers, Julian
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response