🏠 back to Observable

Looking for recommendations: Using MathJax to render math

Community Help
#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!

4 Likes
#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?

2 Likes
#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!

5 Likes
#4

Here’s a fork of Tom’s notebook with a few more improvements:

Summary:

  • Using MathJax.Hub.Queue gets the markdown cells with embedded MathJax working on load
  • The elements are now rendered inside a <span> rather than a <div> so that they can be displayed inline
  • I enabled the “autoload-all” extension
  • The AMScd extension for commutative diagrams doesn’t work with autoload-all so I included a little hack for it.
1 Like
#5

Just want to mention that I have built a free service, MathEquationAPI, that makes doing this much simpler. Basically, it renders the equation when you pass it in the query params.

So, Instead of loading javascript, you can directly embed the equation image. Just like I have done here:

#6

Hi @shubhamjain , sounds cool! Would you mind enabling link sharing on the notebook? Seems to be private still.

1 Like
#7

Or publish it! :slight_smile:

1 Like
#8

Sorry! Fixed now.

1 Like
#9

This looks fun! I forked your notebook and did some fine tuning and extension. You can have a look here:

While this is Observable specific, some of the ideas work more generally in simple HTML. I would definitely consider setting vertical-align: text-bottom as a style directive for your image, for example.

Feel free to incorporate any of that stuff into your notebook, if you like.

#10

I stuck some MathJax labels into my diagrams here, if that gives any ideas:

#11

Thank you! I didn’t even see the benefits you listed. My primary motivation to build this was to make it easier to include equations. Certainly, it can all be done with MathJax as well.