1.2 KB

Latex Parsing in Javascript (ES6)

Parsing latex source code to an intermediate representation and writing it as HTML.

Partial replacement and live previews

One important feature is the reflection of changes made in latex to the HTML without too much re-rendering within the DOM which slows down real-time previewing used by my latex editor. This however, is a major headache because - among others - of empty latex blocks.

My previous approach was to check if the number of top-level "blocks" (intermediate representation of latex) has changed and doing a full re-parse + re-renderer if so. This becomes really slow for pieces of text with more than a few thousand words with laggy input as a result.

Thus I changed to an approach where I only re-render the currently modified block plus-minus x blocks around it. This is "imperfect" if for instance a minipage contains many blocks, the keyword is broken and then restored. Here, the user will have to manually instruct a full re-parse.

The upside of this much more complex approach is a maximum of (2x + m) HTML DOM elements removed / added where m is the number of modified blocks. Most commonly, this means less than 10 DOM elements deleted / inserted.