If you use markdown often, chances are that you also use some sort of markdown previewers. Unfortunately, most of them simply generate the HTML and refresh the content when there’s an update - which is fine for a lot of use cases, but not when you need to do some post-processing like MathJax.
So I built markmon which focus on improving the re-rendering speed.
The problem with refreshing page is that it will take some time to load up the MathJax library again (even if it’s cached by the browser), and then some other time for MathJax to typeset the math expressions yet again. This is annoying when you want to have real-time preview of the document.
One way to avoid doing this unnecessary post-processing is to update the DOM through diff-ing. This means that we only update the DOM through a minimum number of insertions and deletions of DOM nodes. Turns out diff-ing is quite easy. Notice that a DOM is a small ordered tree (a tree where childnodes are ordered), so a recursive version of the Needleman–Wunsch algorithm will suffice. If you haven’t heard of it yet, check out this link. My modification is just to set the cost of editing a node to another node as the alignment cost of their child nodes, recursively.
With the diff data, we can then apply the edit on the DOM and all math expressions will remain intact! So MathJax will only need to be run on new nodes, and this typically takes very little time.
If you are interested, be sure to check out the link in the beginning of this post.