Physics Derivation Graph navigation Sign in

live display of input

Published 2020-05-07T12:03:00.001Z by Physics Derivation Graph

I realized it would be helpful to provide users a live preview of what the Latex renders as so the mistaken input can be corrected before submitting a step. (Decreasing feedback latency is a recurring theme.)

There are Javascript-based approaches like
(see demo here - )
but these both rely on JQuery.

JQuery is "a tool used to make writing common JavaScript tasks more concise." (source: )
I want to avoid unnecessary dependencies, so live preview of text that relies on JQuery is unattractive.

I was able to find a live preview example that is written in pure Javascript:
I can get that to work on my website, but wrapping the output in \( \) to get Mathjax to interpret the live input does not work.

I needed to find a "live preview of Mathjax" since the input is parsed as Latex.
This snippet from 2013 didn't work
but a similar code posted here
does work for live preview of Mathjax!

That link is for 2.7 but I had been using Mathjax 3. I couldn't find a v3-based approach, so I posted a question
and was directed to
which is a suitable solution for v3.