After a bit of trial and error/exploration, the solution to invoke MathJax in the preview is actually quite simple.
For those that are interested, you can do the following from scratch:
-
open a new (blank) Tbx document
-
add the default HTML Template using the menu (“File”–>“Built-In Templates”–>“HTML”)
-
go into the newly made “Templates” container and click on the “HTML page” note
-
edit this note by adding the following code anywhere between the
<head>and</head>tags:<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> -
exit the “HTML page” note and add a new note somewhere in the document. This does not need to have a prototype (i.e., be a Markdown or code note)
-
write your text (including equations**)
Any equations you have added will now be rendered when you click on the “Preview” pane button above the note title and key attributes (if present). If the button is not showing, go to the menu “Window”–>“Show Text Pane Selector”. As a bonus, the equations are also rendered when exported to HTML.
** To add an inline equation, Mathjax requires use of \(...\) (e.g. \(A = \pi r^2\). To add a display equation, Mathjax requires use of $$...$$ (e.g. $$A = \pi r^2$$)
I’ve attached an example Tbx document if the above doesn’t make sense.
Mathjax_Demo.tbx (80.0 KB)