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

https://stackoverflow.com/questions/20876797/create-live-preview-of-form-inputs

(see demo here - https://jsfiddle.net/mYjrn/1/ )

and

https://demos.joypixels.com/latest/live-preview.html

but these both rely on JQuery.

JQuery is "a tool used to make writing common JavaScript tasks more concise." (source: https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery )

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:

https://www.codespeedy.com/show-live-preview-of-html-textarea-with-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

https://github.com/mathjax/mathjax-docs/wiki/More-live-preview-examples

but a similar code posted here

https://cdn.rawgit.com/mathjax/MathJax/2.7.1/test/sample-dynamic.html

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

https://stackoverflow.com/questions/61658297/mathjax-live-preview-for-version-3

and was directed to

https://mathjax.github.io/MathJax-demos-web/input-tex2chtml.html

which is a suitable solution for v3.