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.
No comments:
Post a Comment