Previewing equations in a note

Q & A - getting started with Tinderbox
1

I tend to write a lot of notes that include equations that I typically write using LaTeX-like syntax (using $ to denote an inline equation). I was wondering if there is an easy way to have the equations rendered when I click on the “Preview” text pane?

2

rendered how? As a result or as a visual layout?

If the latter are these notes being written with the intent of exporting to LaTeX?

$ markers are likely a bad choice as in Tinderbox coding a $ is either a prefix with an attribute (value) or a $ regex. Thus some other would make sense. Also, as the default preview render is HTML, what about writing the equations in some web-compatible equation markup. I think there are several libraries for such purposes (maths equation layout isn’t my area of expertise).

4

rendered how? As a result or as a visual layout?

I’m not sure I follow your distinction here. I wish to see a note with equation text like this:

Screenshot of FSNotes (3-12-20, 6-17-34 PM)
Screenshot of FSNotes (3-12-20, 6-17-34 PM)1370×678 142 KB

Show up in the preview pane like this:

Screenshot of FSNotes (3-12-20, 6-17-52 PM)
Screenshot of FSNotes (3-12-20, 6-17-52 PM)1396×530 55.3 KB

I’m not really writing things this way to export them- I’m mainly interested in making sure that I’ve written the equations correctly.

I know that many websites use MathJax, so that is a possibility (the syntax isn’t too different from that of LaTeX). According to the MathJax website, I need to add the two following script lines to the HTML page:

<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">

Is there an easy way to add this code and use MathJax in the preview? Unfortunately, I have not done anything with the HTML capabilities of Tinderbox, so am completely in the dark on this.

1 Like
5

Thanks @PaulWalters. I will give this a try (your message posted before I fired mine off).

1 Like
7

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)

2 Likes
8

Thanks, I deleted the other suggestions so as not to confuse things further.

1 Like
9

Many thanks for contributing the demo file which I’m sure will help other.

10

It’s just a drop in the bucket compared to what I’ve learned from you and everyone else in this forum!

1 Like