🏠 back to Observable

Looking for recommendations: Using MathJax to render math


#1

I am new to Observable, and find it not only very intuitive to use but also suitable to almost my everyday experiments on the Web. In addition, it is also comfortable for me to write notes on Observable, some of which contains mathematics formulas. In Observable standard library, there is a template literal, tex, that can be used to typeset some LaTeX expression powered by KaTeX. KaTeX is extremely fast to render beautiful math formulas, but I often write formulas and find KaTeX does not support it (yet). An alternative package that most mathematics website use is MathJax, and I personally use it whenever available. Here is my attempt to make MathJax work in an Observable notebook:

Some caveats are:

  1. MathJax is not a regular module AFAIK. I have to suppress the “invalid module” error and use its injected variable MathJax in the catch block.
  2. It seems that the trailing config=TeX-AMS_CHTML is mandatory. That’s why I load the JS file via an URL. Not using unpkg because it often timeouts or generates 503 :frowning:.
  3. It is not reactive, which means if you edit and save a cell, it will not get transformed. Maybe I need to roll up a template literal by myself to hook the typeset process after output.
  4. In this notebook, I write mathematics strings along with markdown contents. This is OK when there is only HTML cells, but is not ideal in other cases, for instance, some tokens used in LaTeX may conflict to Markdown syntax. I am trying combining it with a tokenizer.

I am not very familiar to techniques of Observable, so I kindly ask for recommendations for improvements on this notebook on its usability. Thanks!


#2

Hi there.

Your help request is really thoughtfully written, and from it I imagine that you have a great deal more technical knowledge than do I, so I fear I am going out on a limb somewhat with this response. Please forgive me if this is stuff you know or have tried…

Have you seen Tom’s module debugger tool? You mentioned not wanted to reference the JS from unpkg, but I think Tom offers alternatives… perhaps one require option is more stable?


#3

Hey Andy,

Awesome work! I’ll help push it along a bit - here’s a fork with some changes: https://beta.observablehq.com/d/c1f531ad037c3d21

The gist:

  • This should make mathjax sections properly reactive. This is not as elegant as I’d hoped because MathJax requires the target element to be in the document in order to typeset it, but alas, it does work
  • Also ports our tagged template literal trick to let you type MathJax equations without having to escape the \s.

EDIT: I now notice that it doesn’t work on load, only when I re-run the mathjax cells… I’m not sure why this is, looking into it!