require-ing MathJax fully working in Observerable notebook, but NOT in Quarto ojs cell

[jjallaire]

Discussed in #1682

^{Originally posted by stuvjordan-uroc August 4, 2022}
I'm wanting to include some Observable charts in a website I'm building with Quarto. I'd like these charts to include nicely-typeset math, and for that purpose I'm wanting to use MathJax's tex2svg function in the source code. Relative to other math typesetting solutions one can use in Observable, tex2svg is nice because it outputs pure SVG paths...Thus they scale as the svg containing them is resized without any additional code, so the math looks great on every screen size.

I'm running into this very weird difference in the result of a call to require when that call is made in an Observable Notebook, as opposed to when I make it in an ojs cell in a Quarto sourcefile.

First, let's look at what happens when we require tex2svg in an Observable Notebook. You can see the results in this notebook. Open up the object in the first cell after the title and notice the full list of methods that the object returned by the call to require includes. Notice the list includes the method .tex2svg, which is the function I need. Below is a screenshot. You'll see tex2svg as the fourth method from the bottom.

OK, great, so we can use tex2svg in an Observable notebook!

But what happens when we do the same call to require in an ojs cell in a .qmd file? Here are two cells from my current .qmd source:

//| output: true
MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(
  () => window['MathJax']
)

MathJax

Here's a screenshot of the output from the second of the above two ojs cells when I render/preview the sourcefile:

Notice that the list of methods does not include tex2svg!!!! As a result, when I do something like

MathJax.tex2svg(
    String.raw`\int_0^1 \exp(x)dx`
 );

In the quarto sourcefile, the output on render/preview is:

I'm kind of amazed by this.

Help?

[jjallaire]

I've discovered the problem.

In a qmd file that includes math in the main body, as in here is some math in a sentence $\sum_n \frac{1}{2}$, require-ing MathJax in an ojs cell results in tex2svg not being included in the objected returned from require.

On the other hand, in a qmd file that does not include math in the main body, the require call in an ojs cell performs as expected.

Should I report this as a bug? Or is this expected behavior?

[jjallaire]

From @kwangkim

A quarto template is using chtml instead of svg as a default.
quarto-cli/src/command/render/template.ts

Line 189 in 8d0e6ba

url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js",
I found two possible temporary solutions.

• You may use katex as the default html-math-method for quarto.
  https://quarto.org/docs/reference/formats/html.html

• Use MJ in https://observablehq.com/@kkim/mj which is modified from https://observablehq.com/@andy0130tw/mathjax-v3.
  Note: load: ['output/svg'] may not be necessary. I do not know how it works.

To solve this problem permanently, I think we can use one of ideas to fix the quarto template.

• Is there a way to load output/svg and output/chtml in sametime? mathjax/MathJax#2705 (comment)
• http://docs.mathjax.org/en/latest/web/webpack.html#custom-component

[cscheid]

@jjallaire I don't think this is a bug, but maybe we can offer some improvements.

Fundamentally, the problem comes from importing two different versions of mathjax, one in our template, and the other from the require statement in observable. Since that require statement comes from user code, we can't in general prevent users from importing a conflicting version of a library we use.

We might be able to improve the situation in this case by allowing our template to import a user-customizable version of MathJax (via YAML)

EDIT: I just learned that we already have support for that!

[cscheid]

@stuvjordan-uroc Another update in our discussion. If you want our version of mathjax to match exactly what you're importing, you can use the following yaml:

format: 
  html:
    html-math-method:
      method: mathjax
      url: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js